[CSS] 08_레이아웃을 구성하는 CSS 박스 모델
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다.
01 CSS와 박스 모델
1. 블록 레벨 요소와 인라인 레벨 요소
1) 블록 레벨 요소 : 태그를 이용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것
- 너비(width), 높이(height), 안쪽 여백(padding), 바깥 여백(margin)으로 레이아웃 수정을 할 수 있으며, 블록요소가 끝나는 지점에서 자동으로 줄바꿈됨
ex) <h1> , <div> , <p>, <ul>, <li>, ...
2) 인라인 레벨 요소 : 한 줄 차지하지 않음
- 너비(width), 높이(height)를 조절할 수 없고, line-height(높낮이 조절) 혹은 text-align(텍스트 정렬)을 할 수 있으며, 블록 요소와 다르게 인라인 요소는 끝나는 지점에 줄바꿈안됨
ex) <span>, <img>, <strong>, ...
2. 박스 모델의 기본 구성
1) 박스 모델 요소 : 박스 형태인 요소
ⓐ 마진 : 박스 모델 사이의 여백
ⓑ 테두리(보더)
ⓒ 패딩 : 박스와 콘텐츠 영역 사이의 여백
ⓓ 콘텐츠 영역
3. 박스 모델 속성
- <div> 같은 박스 모델에 클래스 이름을 지정하고, 클래스에 스타일을 적용한다.
| 종류 | 설명 |
| width | 박스 모델 너비(크기, 백분율, auto) |
| height | 박스 모델 높이(크기, 백분율, auto) |
| box-sizing | 박스 모델의 크기를 계산하는 기준 border-box : 테두리 포함 너비값 content-box : 콘텐츠 영역만 너비값(기본값) |
| box-shadow | 그림자 효과 box-shadow : <수평 거리> <수직 거리> <흐림 정도> <범짐 정도> <색상> inset(내부그림자) |
02 테두리 스타일
| 속성 | 설명 |
| border-style border-위치-style |
상하좌우 4개방향의 테두리 스타일 한꺼번에 지정 ex) none, solid, dotted, dashed |
| border-width border-위치-width |
상하좌우 4개 방향 테두리 두께를 한꺼번에 지정 <크기> | thin | medium | thick |
| border-color border-위치-color |
상하좌우 4개방향 테두리 색상을 한꺼번에 지정 |
| border-radius border-위치-radius |
상하좌우 4개방향 꼭짓점을 한꺼번에 둥글게 만듬 <크기 | <백분율> * 원 : 50% |
* 위치 : top, right, bottom, left
03 여백을 조정하는 속성
1. margin
margin: <크기> | <백분율> | auto
* auto : display속성에서 지정한 값에 맞게 적절한 값을 자동 배정
margin-위치
* 특정 위치의 마진만 지정* margin 속성으로 웹 문서를 가운데 정렬하기
margin : 0px auto;
/*상하마진 0px, 좌우마진 자동계산*/
2. padding
padding: <크기> | <백분율> | auto
* auto : display속성에서 지정한 값에 맞게 적절한 값을 자동 배정
padding-위치
* 특정 위치의 패딩만 지정
04 웹 문서의 레이아웃 만들기
1. display 속성
- 배치 방법을 결정
| 종류 | 설명 |
| block | 인라인 레벨 요소를 블록 레벨 요소로 만듬 |
| inline | 블록 레벨 요소를 인라인 레벨 요소로 만듬 |
| inlinke-block | 두대 속성 다 가지고 있고, 마진과 패딩 지정 가능 |
| none | 해당 요소를 화면에서 표시 안함 |
ex) 수평 네비게이션 만들기
<style>
*{ box-sizing: border-box }
nav ul { list-style: none; }
nav ul li {
display: inline-block;
padding: 20px;
margin: 0 20px;
border: 1px solid #222;
}
...
<nav>
<ul>
<li>menu1<li>
<li>menu2<li>
<li>menu3<li>
<li>menu4<li>
<ul>
</nav>
2. float 속성
- 요소들을 나란히 배치하고 싶을 때 사용
float : left | right | none(기본값)- 속성 해제 : clear
clear : left | right | both
05 위치 지정 속성
1. position 사용
| 종류 | 설명 |
| static | 기본값 |
| relative | 다른 요소의 기준이 되는 위치요소 지정, 위칫값 지정가능 |
| absolute | relative로 지정한 상위 요소를 기준으로 배치 |
| fixed | 브라우저 창을 기준으로 위치 지정 |
* 위치는 left, right, top, bottom 으로 지정한다.