0. layout
layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다.
모바일 사용자가 늘어나는 상황을 감안하여, 화면의 크기에 따라 적절히 화면 구성을 변화시키는 '반응형 웹 디자인(Responsive Web Design)' 또한 모던 웹 사이트의 필수 사항이 되었다.
1. position 속성 - relative, absolute, fixed
display 는 레이아웃을 제어하는 가장 중요한 프로퍼티 입니다.
#main {
width: 600px;
margin: 0 auto;
}블록 레벨 엘리먼트의 width를 설정하면 컨테이너의 좌우 가장자리로 늘어나지 않게 할 수 있습니다.
그런 다음 좌우 마진을 auto로 설정해 해당 엘리먼트를 컨테이너 안에서 가로 중앙에 오게 할 수 있습니다.
1-1. static
static 은 기본값입니다.
1-2. relative
relatve는 별도의 프로퍼티를 지정하지 않으면 static 과 동일하게 동작합니다.
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}상대 위치가 지정된 엘리먼트에 top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정됩니다.
1-3. fixed
고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻입니다.
relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용됩니다.
단,
.fixed {
position: fixed;
bottom: 0;
right: 0;}👆 우측하단에 엘리먼트를 고정합니다.
1-4. absolute
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
absolute는 가장 다루기 까다로운 위치 지정 값입니다.
가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면 fixed와 비슷하게 동작합니다.
절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼습니다.
단, 기준으로 삼는 엘리먼트는 position이 static으로 지정되지 않은 엘리먼트를 가리킨다는 사실을 기억하세요.
2. Box model: border-box
오랜 시간에 걸쳐 사람들은 너비값을 조절하는 해법이 그다지 만족스럽지 않다는 사실을 깨닫고 box-sizing이라고 하는 새로운 CSS 프로퍼티를 만들어냈습니다.
box-sizing: border-box를 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않습니다.
▼ 아래 그림과 같이, content-box의 전체 폭은, 컨텐츠 내용의 폭과 패딩, 보더의 폭을 모두 더한 합계입니다.
▼ 한편, border-box의 경우 전체 요소의 크기가 width 값입니다. 이에 따라서 요소의 padding과 border의 폭이 요소의 width를 늘릴 수는 없습니다.
3. inline, inline-block, block
3-1. inline
text를 주입할 때 사용되는 형태이다.
대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다.
height,width,margin,padding 적용이 불가능하다.
3-2. block
display: block;
block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다.
기본적으로 width 값은 100%다.
대표적인 태그는 div가 있다.
height,width,margin,padding 적용이 가능하다.
3-3. inline-block
inline-block은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다.
inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성가능),
height,width,margin,padding를 적용할 수 있는 특징이 있다.
(지정하지 않을경우, content 만큼 영역이 잡힘)
4. float
레이아웃을 잡는 데 사용하는 또 하나의 CSS 프로퍼티는 바로 float입니다.
float은 이미지 주위를 텍스트로 감싸기 위해 만들어진 것입니다.
종류는 left, right, none 이 있습니다.
플로팅된 요소는 display: inline-block;을 선언한것과 동일하게 기능합니다.
clear
플로팅의 영향을 해제합니다.
clear의 속성값
.left: 왼쪽에 floating 된 요소를 지정 해제
.right: 오른쪽에 floating 된 요소를 지정 해제
.both: 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제
.none: 기본값(default), floating 을 해제하지 않음
5. flexbox (예정)
