성장하기.27 CSS - 18. 레이아웃 HTML은 원래 위에서 아래로, 블록 수준 요소들을 순차적으로 나열하며 내용을 표시한다. 하지만 우리가 구현해야 하는 것은 단순 나열이 아니라 신문의 레이아웃처럼 다단 구성을 해야 할 수도 있고, 페이지 임의 위치에 이미지나 텍스트를 자유롭게 배치할 수 있어야 한다. 1. 태그에 대해 레이아웃이라고 특별한 것은 없다. 웹 페이지 레이아웃은 어떤 정보를 페이지의 어떤 영역에 넣느냐에 관한 문제이다. css에서 정보 배치 단위를 정의하기 위해 널리 사용되는 태그가 바로 이다. 이 태그는 요소를 하나의 논리적인 그룹으로 묶거나, 페이지의 구획을 정의할 목적으로 사용된다. 태그는 만들고 나면 class나 id를 부여하여 각각의 스타일을 적용하게 된다. 그러나 id를 적용하면 우선순위가 아주 높다보니 다른 스타일.. 2020. 6. 15. CSS - 17. Position - fixed 1. Position - fixed css는 정답이 없지만, 어느 브라우저(크롬, ie, safari)에서 봐도, 어느 디바이스(아이폰, 안드로이드, 탭)에서 봐도, 어느 크기에서 봐도 화면이 이상하게 겹치거나 깨지지 않고 잘 나오도록 신경 써야 하는 것이 바로 css이다. 이제 마지막 position인 fixed를 보겠다. .coupon { position: fixed; right: 0; bottom: 0; background-color: red; color: white; font-size: 20px; } fixed는 말 그대로 고정됐다는 뜻이다. absolute는 relative를 가진 부모가 필요했는데, fixed는 필요없다. fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다.. 2020. 6. 15. CSS - 16. Position - absolute 1. Position 이제까지 html 코드를 작성하면, 작성한 순서대로 페이지에 그려졌다. CSS의 position 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있다. 예를 들어 index.html에서 코드의 위치는 제일 마지막인데, 페이지에서는 제일 위에 보이게 할 수 있다. position에서 사용하는 값은 4개가 있는데 static은 거의 사용하지 않고, 나머지 3가지들을 사용한다. position: static; position: relative; position: absolute; position: fixed; 2. relative position: relative; 자체로는 특별한 의미가 없다. 딱히 어느 위치로 이동하지 않는다. 위치를 이동시켜주.. 2020. 6. 15. HTML/CSS - 15. Input 사용자가 직접 텍스트를 입력할 수 있는 Input, Textarea 태그를 다뤄보도록 하겠다. 1. , type, placeholder라는 attribute가 있다. 1. type="text" text를 입력하는 속성이다. 대부분의 input type은 text이다. 어느 텍스트나 입력할 수 있다. 이름, id, 주소, 닉네임 등을 입력받을 때 사용한다. 2. type="password" text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나온다. 만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것이다. 화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있다. 3. type="number" 숫자만 입력할 수 있다. 만약 type="number" 으로 핸드폰 번호.. 2020. 6. 15. 이전 1 2 3 4 5 6 7 다음
