CSS의 꽃이라 할 수 있는 레이아웃 속성 기초에 대해 알아보자!
1. Box-model
html 문서의 요소들은 기본적으로 박스 형태로 정의된다.
따라서 웹페이지 레이아웃이란, 이런 박스를 상하좌우로 적절하게 배치하는 것을 뜻한다.
박스모델은 테두리, 내용, 안쪽여백(padding), 바깥여백(margin) 4요소로 구성된다.
* 요소는 실질적으로 border-box 영역이라고 생각하면 편하다.
Contents-box : 컨텐츠 영역으로 텍스트 및 이미지가 차지하는 영역.
Padding-box : 테두리와 박스 사이의 안쪽 여백.
Border-box : 박스를 둘러싼 테두리 영역.
Margin-box : 박스의 외부 영역으로, 근처 박스와의 바깥쪽 여백.
2. display 속성
css로 작업을 하다 개발자도구를 열면
display : block / display : inline / display : inline-block을 본 적 있을 것이다.
이것은 HTML에서 각 요소가 차지하는 공간에 대한 개념이라고 이해하는 것이 좋다.
가장 직관적으로 display 속성을 설명한듯한 그림을 가져왔다.
블록은 해당 요소가 문서의 가로 전체를 차지하고, 인라인은 다른 요소와 한줄에 나란히 있을 수 있다.
인라인-블록은 애매하지만, 이름처럼 인라인과 블록의 특징을 반반 갖고있는 것 같다.
그 특징 차이에 대해 표로 정리해 봤다.
인라인의 경우 높이와 너비를 설정해줄 수 없으며, 마진과 패딩 또한 좌우로만 적용이 가능하다.
이러한 인라인이 갖는 단점을 인라인-블록 속성을 통해 보완할 수 있는 것이다.
즉, 요소들을 한 줄에 배치하고 싶은데 그 요소 크기에 대한 제약을 벗어나고 싶다면 인라인-블록을 쓰면 된다.
위에서 예시로 들은 태그들의 경우 기본으로 설정된 display 속성일뿐, 충분히 변경 가능하다.
CSS에서 display 속성을 줌으로써 해당 태그의 속성을 얼마든지 바꿀 수 있다.
3. position 속성
position은 요소의 위치에 대한 속성이다.
position : static (정적인)
=> position 속성의 기본값으로, 요소 순서대로 배치되며 왼쪽에서 오른쪽으로 추가된다.
position : relative (상대적인)
=> 자신이 원래 있던 위치를 기준으로 상하좌우에 배치시킬 수 있는 속성이다.
position : absolute (절대적인)
=> relative position을 갖는 가장 가까운 부모 요소가 위치의 기준이 된다.
마치 부모가 자식에게 있어 절대적 권위을 갖는 것처럼, 그런식으로 이해해 두는 것도 좋다.
직계 부모가 relative가 아니라면 더 조상 요소를 찾아간다. 기준을 따라 상하좌우 배치가 가능하다.position : fixed (고정적인)
=> 브라우저 창(window)이 위치의 기준이다. 따라서 페이지를 스크롤해도 계속 고정되어 표시된다.
* position : static에서는 float 속성을 이용해 요소를 좌측이나 우측으로 배치시킬 수 있다.
float: left; 혹은 float: right;를 지정하여 요소를 띄워 다른 요소가 들어올 만큼의 공간을 비워 둔다.
