[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) 박스 모델 요소 : 박스 형태인 요소

이미지 출처 : https://minimin2.tistory.com/20

ⓐ 마진 : 박스 모델 사이의 여백

ⓑ 테두리(보더)

ⓒ 패딩 : 박스와 콘텐츠 영역 사이의 여백

ⓓ 콘텐츠 영역 

 

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 으로 지정한다.