[CSS] CSS 박스 모델

1. CSS와 박스 모델

블록 레벨 요소와 인라인 레벨 요소

블록 레벨(block-level) 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다.

한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미이다.

너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다.

인라인 레벨(inline-level) 요소는 줄을 차지하지 않는 요소이다.

화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다.

따라서 한 줄에 여러 개의 인라인 레벨 요소를 표시할 수 있다.

종류	해당 태그
블록 레벨 태그	<p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
인라인 레벨 태그	<img>, <object>, <br>, <sub>, <span>, <input>, <textarea>, <table>, <buttom>

박스 모델

width, height 속성 - 콘텐츠 영역의 크기

 width : <크기> | <백분율> | auto

 height : <크기> | <백분율> | auto

속성 값	설명
<크기>	너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정
<백분율>	박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정
auto	박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정 (기본 값)

display 속성 - 화면 배치 방법 결정하기

 display : none | contents | block | inline | inline-block | table | table-cell 등

① block 속성 값

display:block; 으로 지정하면 해당 요소를 블록 레벨로 지정한다.

<p> 태그나 <div> 태그들은 처음부터 블록 레벨 요소였지만 <img> 태그 같은 인라인 레벨 요소도 블록 레벨 요소로 변경 가능하다.

② inline 속성 값

display 속성을 inline으로 지정하면 블록 레벨 요소를 인라인 레벨로 바꿀 수 있다. 서로 다른 줄에 배치되는 요소들을 한 줄로 함께 표시하기 위해 사용되는데 주로 목록에서 사용된다.

③ inline-block 속성 값

웹 요소를 display:inlne;으로 지정하면 한 줄로 배치할 수는 있지만 너비나 높이, 위 아래 마진, float 같은 값이 정확히 적용되지 않는다. 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고 싶을 때 사용된다.

④ none 속성 값

해당 요소를 화면에 아예 표시하지 않는다. visibility:hidden;도 비슷한 역할을 하는데 visibility 속성은 화면에서 감추기만 할 쁜 원래 요소가 있는 공간은 그대로 차지하지만 display:none;은 아예 공간조차 차지하지 않는다.

⑤ 기타 display 속성 값들

속성 값	설명
inherit	상위 요소의 display 속성을 상속받음
table	블록 레벨의 표로 만듦
inline-table	인라인 레벨의 표로 만듦  (<table> 태그 사용한 것처럼)
table-row	표의 행으로 만듦 (<tr> 태그 사용한 것처럼)
table-row-group	표의 행 그룹으로 만듦 (<tbody> 태그 사용한 것처럼)
table-header-group	표의 제목 영역(header) 그룹으로 만듦 (<thead> 태그 사용한 것처럼)
table-footer-group	표의 요약 영역(footer) 그룹으로 만듦 ( <tfoot> 태그 사용한 것처럼)
table-column	표의 열로 만듦 (<col> 태그 사용한 것처럼)
table-column-group	표의 열로 만듦 (<colgroup> 태그 사용한 것처럼)
table-cell	표에서 하나의 셀로 만듦 (<td>나 <th> 태그 사용한 것처럼)
table-caption	표의 캡션을 만듦 (<caption> 태그 사용한 것처럼)
list-item	목록의 항목을 표시할 수 있도록 기본적인 블록 박스와 표시자 박스를 만듦 (<li> 태그 사용한 것처럼)

---

2. 테두리 관련 속성들

border-style 속성 - 테두리 스타일 지정하기

border-style : none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid

속성 값	설명
none	테두리가 나타나지 않음 (기본 값)
hidden	테두리가 나타나지 않음 border-collapse:collapse일 경우, 다른 테두리도 표시되지 않음
dashed	테두리를 짧은 선(직선으로 된 점선)으로 표시
dotted	테두리를 점선으로 표시
double	테두리를 이중선(겹선)으로 표시 두 선 사이의 간격은 border-width 값으로 지정
groove	테두리를 창에 조각한 것처럼 표시 홈이 파인 듯 입체적으로 보임
inset	border-collapse:separate 일 경우, 전체 박스 테두리가 창에 박혀 있는 것처럼 표시 border-collapse:collapse일 경우, groove와 똑같이 표시
outset	border-collapse:separate 일 경우, 전체 박스 테두리가 창에서 튀어나온 것처럼 표시 border-collapse:collapse일 경우, ridge와 똑같이 표시
ridge	테두리를 창에서 튀어나온 것처럼 표시
solid	테두리를 실선으로 표시

border-width 속성 - 테두리 두께 지정하기

border-top-width : <크기> | thin | medium | thick

border-right-width : <크기> | thin | medium | thick

border-bottom-width : <크기> | thin | medium | thick

border-left-width : <크기> | thin | medium | thick

border-width : <크기> | thin | medium | thick

 

border-color 속성 - 테두리 색상 지정하기

border-top-color : <색상>

border-right-color : <색상>

border-bottom-color : <색상>

border-left-color : <색상>

border-color : <색상>

 

border 속성 - 테두리 스타일 묶어 지정하기

border-top : <두께> | <색상> | <스타일>

border-right : <두께> | <색상> | <스타일>

border-bottom : <두께> | <색상> | <스타일>

border-left : <두께> | <색상> | <스타일>

border : <두께> | <색상> | <스타일>

 

border-style 속성 - 테두리 스타일 지정하기

border-top-left-radius : <크기> | <백분율>

border-top-right-radius : <크기> | <백분율>

border-bottom-right-radius : <크기> | <백분율>

border-bottom-left-radius : <크기> | <백분율>

border-radius : <크기> | <백분율>

속성 값	설명
<크기>	둥글게 처리할 반지름 크기를 px이나 em 같은 단위와 함께 수치로 표시
<백분율>	현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정

border-style 속성 - 테두리 스타일 지정하기

border-shadow : none | <그림자 값> [ , <그림자 값>] * ;

<그림자 값> = <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

속성 값	설명
<수평 거리>	그림자의 수평 옵셋 거리(수평으로 얼마나 떨어져 있는지) 양수 값은 요소의 오른쪽, 음수 같은 요소의 왼쪽에 그림자를 만듦, 필수 속성
<수직 거리>	그림자의 수직 옵셋 거리(세로로 얼마나 떨어져 있는지) 양수 값은 요소의 아래쪽, 음수 값은 요소의 위쪽에 그림자를 만듦, 필수 속성
<흐림 정도>	그림자의 흐림 정도를 지정 이 값을 생략하면 0을 기본 값으로 해 진한 그림자를 표시 이 값이 커질수록 부드러운 그림자를 표시하며 음수 값은 사용할 수 없음
<번짐 정도>	그림자의 번지는 정도를 나타냄 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나가기 때문에 그림자가 박스보다 크게 표시됨 반대로 음수 값은 그림자가 모든 방향으로 축소되어 보임 기본 값 0
<색상>	그림자의 색상을 지정 한 가지만 지정할 수도 있고 공백으로 구분해 여러 개의 색상을 지정할 수 있음 필요한 경우에만 사용하는 옵션 값이며 기본 값은 현재 글자 색
inset	이 키워드를 함께 표시하면 안쪽 그림자로 그림, 필요한 경우에만 사용하는 옵션 값

 

3. 여백을 조절하는 속성들

margin 속성 - 요소 주변 여백 설정하기

margin-top : <크기> | <백분율> | auto

margin-right : <크기> | <백분율> | auto

margin-bottom: <크기> | <백분율> | auto

margin-left : <크기> | <백분율> | auto

margin : <크기> | <백분율> | auto

속성 값	설명
<크기>	너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정
<백분율>	박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정
auto	display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정

p {margin: 30px 50px;}
/* 위아래 마진 - 30px, 좌우 마진 - 50px */
p {margin: 50px;}
/* 네 방향 마진 모두 50px */
p {margin: 30px 50px 30px 50px;}
/* 위아래 마진 - 30px, 좌우 마진 - 50px */
p {margin: 30px 20px 50px;}
/* 위 마진 - 30px, 좌우 마진 - 20px, 아래 마진 - 50px */

마진 중첩(margin overlap) 현상, 마진 상쇄(margin collapse) 현상

요소를 세로로 배치할 경우, 마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐지는 것

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>박스모델</title>
	<style>
    * {
      box-sizing:border-box;
    }
		div {
			width:200px;  /* 너비 */
			height:100px;  /* 높이 */
  		margin:30px;  /* 마진 */
		}
    #box1 {
      background:rgb(0, 77, 243);
    }
    #box2 {
      background:rgb(255, 72, 0);
    }
    #box3 {
      background:rgb(18, 219, 0);
    }
	</style>
</head>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
	<div id="box3"></div>
</body>
</html>

마진 설정 예상 결과(좌)와 실제 결과(우)

padding 속성 - 콘텐츠 영역과 테두리 사이 여백 설정하기

padding-top : <크기> | <백분율> | auto

padding-right : <크기> | <백분율> | auto

padding-bottom: <크기> | <백분율> | auto

padding-left : <크기> | <백분율> | auto

padding: <크기> | <백분율> | auto