220416 CSS Chapter 8

레이아웃을 구성하는 CSS 박스 모델

 

웹 문서에서 내용을 배치할 때는 각 요소를 박스 형태로 구성한다.

각 박스 모델은 실제 내용이 들어가는 콘텐츠 영역과 테두리, 여백으로 구성되어 있다.

 

블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것

ex) <h1>, <div>, <p> 등

 

인라인 레벨 요소 : 한 줄을 모두 차지하지 않고 콘텐츠 만큼만 영역을 차지하며 나머지 공간에는 다른 요소가 올 수 있음.

ex) <span>, <img>, <strong> 등

 

 

웹 문서의 블록 레벨 요소는 모두 박스형태이고, 스타일 시트에서는 이렇게 박스 형태인 요소를 박스 모델 요소라고 한다.

박스 모델은 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 사이의 여백인 마진(margin)등의 요소로 구성된다.

 

- 박스 모델의 속성

width : 박스 모델의 너비를 지정

height : 박스 모델의 높이를 지정

box-sizing : 박스 모델의 크기를 계산하는 기준을 지정 (너비에 패딩과 테두리 값을 포함시킬것인지 아닌지)

box-shadow : 박스 모델에 그림자 효과를 추가

 

- 테두리 속성

border-style : 상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정함.

border-위치-style : 특정 위치의 테두리 스타일을 지정

border-width : 상하좌우 4개 방향 테두리 두께를 한꺼번에 지정

border-위치-width : 특정 위치의 테두리 두께를 지정

border-color : 상하좌우 4개 방향 테두리 색상을 한꺼번에 지정

border-위치-color : 특정 위치의 테두리 색상을 지정

border-radius : 상하좌우 4개 방향 꼭짓점을 한꺼번에 둥글에 만듦.

border-위치-radius- 특정 위치의 꼭짓점만 둥글게 처리

 

- 여백 속성

margin : 마진을 한꺼번에 지정

margin-위치 : 특정 위치의 마진을 지정

padding : 패딩을 한꺼번에 지정

padding-위치 : 특정 위치의 패딩을 지정

 

- 레이아웃 속성

display : 화면에서 요소를 어떻게 배치할 것인지 지정. block, inline, inline-block, none 등이 있음

float : 웹 요소를 왼쪽이나 오른쪽으로 배치한다. float를 적용한 요소는 clear 속성으로 해제하지 않으면 뒤에 오는 요소도 계속 왼쪽이나 오른쪽으로 연결해서 배치됨.

 

- 위치 지정 속성

left, right, top, bottom : 기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정

position : 웹 요소의 위치를 지정한다. 속성값으로 static, relative, absolute, fixed가 있음.

 

---

출처 : Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석