Display
레이아웃을 제어하기 위한 가장 중요한 프로퍼티입니다. 모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값이 있습니다. 대부분의 엘리먼트에 대한 기본값은 보통 block이나 inline입니다.
Block
블록 레벨 엘리먼트는 새 줄에서 시작해 좌우로 최대한 늘어납니다. width와 margin으로 이를 조절합니다.
<div>,<p>,<form>,<header>,<footer>,<section>,<li>,<table>, heading tag
Inline
인라인 엘리먼트는 단락 안에서 해당 단락의 흐름을 방해하지 않은 채로 요소를 감쌀 수 있습니다.
<span>,<a>,<img>
Inline-block
inline-block 엘리먼트는 inline 엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있습니다. 브라우저 너비를 채우고 알맞게 줄 바꿈되는 박스 그리드를 구성함에 있어서 주로 사용됩니다. inline-block 엘리먼트는 vertical-align 프로퍼티의 영향을 받습니다. 각 요소의 너비를 설정할 필요가 있습니다. HTML의 각 칼럼 사이에 공백이 있으면 칼럼 간에 틈이 생깁니다
none
script와 같은 일부 특별한 엘리먼트에서는 none을 기본값으로 사용하기도 합니다. none은 자바스크립트에서 엘리먼트를 실제로 삭제하고 재생성하지 않으며, 엘리먼트를 보이고 감추는 데 흔히 사용됩니다.
visibility 속성의 경우와 렌더링에 있어서 차이가 있습니다. visibility: hidden;으로 설정하면 엘리먼트가 감춰질 테지만 해당 엘리먼트는 완전히 보이지 않게 되더라도 여전히 공간을 차지합니다. display를 none으로 설정하면 엘리먼트가 마치 존재하지 않는 것처럼 페이지가 렌더링됩니다.
Box-model
모든 HTML 요소는 Box 형태의 영역을 가지고 있습니다. Box는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)로 구성됩니다. 브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등), 위치를 근거로 하여 렌더링을 실행합니다. 레이아웃은 콘텐츠를 담을 박스 모델을 정의하고 CSS 프로퍼티를 통해 스타일(배경, 폰트와 텍스트 등)과 위치 및 정렬을 지정하는 것이라고 할 수 있습니다. 각자 개별적인 콘텐츠 요소이기에 width와 height 프로퍼티를 비롯한 모든 박스모델 관련 프로퍼티(margin, padding, border, box-sizing 등)는 상속되지 않습니다.
| 명칭 | 설명 |
|---|---|
| Content | 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역 width, height 프로퍼티 |
| Padding | 테두리(Border) 안쪽에 위치하는 요소의 내부 여백 영역 padding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명(transparent) 요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용 |
| Border | 테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미 |
| Margin | 테두리(Border) 바깥에 위치하는 요소의 외부 여백 영역 margin 프로퍼티 값은 마진 영역의 두께를 의미 기본적으로 투명(transparent)하며 배경색을 지정불가 |
width / height 프로퍼티
너비와 높이를 지정하기 위해 사용됩니다. 이때 지정되는 요소의 너비와 높이는 콘텐츠 영역을 대상으로 합니다. 만일 width와 height로 지정한 콘텐츠 영역보다 실제 콘텐츠가 크면 콘텐츠 영역을 넘치게 된다는 것에 유의하여야 합니다. 요소 너비가 브라우저 너비보다 크면 가로 스크롤바가 만들어지기에 이 문제를 해결하기 위해서 max-width 프로퍼티를 사용할 수 있습니다. 그리고, 반응형 사이트 제작에 있어서 % 기준의 콘텐츠 너비를 지정하면 유동적으로 뷰포트의 크기 변화에 대응할 수 있게 됩니다. overflow: hidden;을 지정하면 넘친 콘텐츠를 감출 수 있습니다.
margin / padding 프로퍼티
레이아웃의 기본적인 콘텐츠와 여백을 분리하는 개념입니다. 4개 방향(top, right, left, bottom)에 대하여 지정이 가능하며 수직 방향으로 마진의 겹침현상과 콘텐츠 사이즈에 대한 이해에 있어서 주안점이 있으므로 확인해야합니다. 콘텐츠의 정렬에 있어서 추가적인 사항을 숙지하고 함께 병행하여 쓰는 것이 좋습니다.
border 프로퍼티
주로 모든 가장자리 선에 대한 지정을 할 때 해당 요소를 사용합니다. 모서리 모양, 색상 등 요소 제어가 구체적이기에 커스텀이 용이합니다. 따라서 기본적인 text-decoration 속성보다 우선적으로 사용됩니다.
Box-sizing
엘리먼트의 너비를 설정할 경우 해당 엘리먼트는 실제로 설정한 것보다 크게 나타날 수 있습니다. 이것은 엘리먼트의 테두리와 패딩이 지정된 너비 이상으로 엘리먼트를 늘리기 때문입니다. 이를 해결하기 위해선 콘텐츠 자체의 크기에 집중하여 엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않습니다. 직관적인 방식으로 크기가 지정되기에 전체 요소에 주로 적용을 하는 편입니다.
column 프로퍼티
이 모듈은 요소를 여러 열로 분할하고 몇 가지 세부 정보에 대한 추가 지침을 제공합니다. 최소 너비를 첫 번째 인자로 명시하고, 열의 최대 갯수를 두 번째 인자로 명시합니다. 신문의 글자 배열을 생각하면 이해하기 쉽습니다. CSS 칼럼은 아주 최근에 생겼기 때문에 호환 접두사를 사용할 필요가 있으며, IE9까지 또는 오페라 미니에서는 동작하지 않습니다
Position
relative
별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작합니다. 상대 위치가 지정된 엘리먼트에 top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정됩니다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않을 것입니다.
fixed
고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻입니다. 주로 헤더의 네비게이션 메뉴에 사용됩니다. 해당하는 영역만큼 본문 내용과 겹침이 발생하게 되므로 이를 padding, margin의 여백을 활용하여 수정해주어야 합니다. relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용됩니다. 모바일 브라우저의 경우 고정 엘리먼트 지원이 굉장히 불안정합니다.
absolute
absolute는 가장 다루기 까다로운 위치 지정 값입니다. absolute는 뷰포트에 상대적으로 위치가 지정되는 게 아니라 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면 fixed와 비슷하게 동작합니다.
위치가 지정된 조상 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직입니다. 엘리먼트가 기준으로 삼는 "위치가 지정된" 엘리먼트는 position이 static으로 지정되지 않은 엘리먼트를 가리킵니다.
float
float은 본래 이미지 주위를 텍스트로 감싸기 위한 목적으로 만들었습니다.
하지만, 주위 요소들과 상호작용이 별로도 이루어지게 되면서 의도했던 대로 레이아웃 배치가 어려워지는 경우가 발생하게 됩니다. 따라서, 이를 clear 프로퍼티를 이용하여 해결합니다. 아래와 같이 clear를 할 경우 콘텐츠의 겹침을 방지할 수 있습니다. 이를 활용하여 페이지의 레이아웃을 구성하는데 부가적으로 사용되기도 했지만 현재는 inline-block, flex 등 보다 편리한 방법이 나왔기에 많이 사용되지는 않습니다.
부모요소::after { content: ''; dispaly: block; clear: both; }부모요소 { overflow: hidden / overflow: auto; }
