CSS Property - Box Model 이해하기(크기와 여백)

 

 

CSS Box Model

 

---

 

• HTML Element를 박스모델로 컨트롤 하는 부분이다.
• 이전에 블럭요소와 인라인요소, 인라인블럭요소에 대한 차이점을 정리해 본 적이 있습니다. 아래에 다시한번 표로 정리해서 보여드릴게요~ CSS에서는 꼭 알아두어야 할 사항입니다.
• 자 이제 한번 살펴볼까요?

 

 

크기, 바깥 여백, 안쪽여백, 테두리 지정에 대한 계산 법 및 적용방법을 한번 알아봅시다~!

 

Welcome to CODING HELL

BOX Model 

블럭요소의 BOX-model 이해하기

 

A. 단위(Units)

- 크기나 여백을 지정할때에 사용할 수 있는 단위는 아주 많습니다.

- 그 중 CSS 에서 자주 사용하는 것들에 대해 알아봅시다.

 

단위	사용예	Description
백분율(%)	div { width:80%; }	div가 속해있는 영역내에서의 80%크기
픽셀(px)	div ( width:80px}	div의 크기를 80px로 고정
뷰포트 가로 (vw)	div { width: 80vw }	웹페이지를 보고있는 디바이스의 가로크기(뷰포트)의 80% 크기
뷰포트 세로 (vh)	div { height: 80vh }	웹페이지를 보고있는 디바이스의 세로크기(뷰포트)의 80% 크기
폰트 크기 기준 (em)	div { margin:1.2em; }	div의 글자크기가 10px일때, 상하좌우 마진을 12px로 적용한다. (1.2em -> 1.2배) 이때의 특징은 div의 글자크기가 반응형으로 인해, 변경된다면, 여백도 같이 줄어들거나 늘어나게 된다.

 

 

 

B. 브라우저에 렌더링되는 최종 Element의 크기를 정하는 기준(box-sizing)

- 가로,세로 크기를 정했지만 어떤 기준을 적용하느냐에 따라 실제로 다른값을 출력하게 됩니다.

- 모든 블럭요소의 크기의 기본값은 'box-sizing:content-box'입니다.

- 이는 지정한 width,height의 크기가 contents영역을 기준으로 하고있다는 것입니다.

- 하여, padding과 border가 있을경우 실제크기는 늘어나게 됩니다.

- 'box-sizing:border-box' 를 지정할 경우, 지정한 width,height은 테두리까지를 포함하므로 원하는 사이즈로 출력됩니다.

div { width:100px; height:80px; padding:10px; border:3px solid red; }

div.a { box-sizing:content-box; } // 실제브라우저에 페인팅되는 크기 : 126px * 106px
div.b { box-sizing:border-box; } // 실제브라우저에 페인팅되는 크기 : 100px * 80px

 

C. 크기 지정하기 (Width, Height)

- 이때, 요소가 인라인 레벨 요소라면 크기를 받더라도 렌더링 되지 않습니다.

- 블럭요소, 인라인블럭요소만 지정이 가능합니다.

property	정의	사용 예	Description
width	가로크기	div { width : 100px }
height	세로크기	div { height : 80px }

 

 

 

D. 안쪽 여백 지정하기(Padding - 패딩)

- 좌우 안쪽 여백은 인라인요소에서도 사용할 수 있습니다.

property	정의	사용 예	Description
padding	축약형 ( 4가지로 표현 가능 )	20px 20px 10px 20px 10px 20px 10px 20px 30px 40px	전체 상하 좌우 상 좌우  하 상 우 하 좌
padding-left	좌측 안쪽 여백	div { padding-left: 10px }
padding-right	우측 안쪽 여백	div { padding-right: 10px }
padding-top	위 안쪽 여백	div { padding-top: 10px }
padding-bottom	아래 안쪽 여백	div { padding-bottom: 10px }

 

---

여백은 축약형으로도 많이 사용합니다. 아래를 참조하세요

// padding 축약형
div {
	padding: 전체;
	padding: 상하 좌우;
	padding: 상 좌우 하;
	padding: 상 우 하 좌; // 시계방향
 }

 

 

E. 바깥쪽 여백 지정하기(Margin - 마진)

- 좌우 바깥 여백은 인라인요소에서도 사용할 수 있습니다.

property	정의	사용 예	Description
margin	축약형 ( 4가지로 표현 가능 )	20px 20px 10px 20px 10px 20px 10px 20px 30px 40px	전체 상하 좌우 상 좌우  하 상 우 하 좌
margin-left	좌측 바깥쪽 여백	div { margin-left: 10px }
margin-right	우측 바깥쪽 여백	div { margin-right: 10px }
margin-top	위 바깥쪽 여백	div { margin-top: 10px }
margin-bottom	아래 바깥쪽 여백	div { margin-bottom: 10px }

 

---

여백은 축약형으로도 많이 사용합니다. 아래를 참조하세요

// margin 축약형
div {
	margin: 전체;
	margin: 상하 좌우;
	margin: 상 좌우 하;
	margin: 상 우 하 좌; // 시계방향
 }

 

 

 

F. 테두리 지정하기(Border - 보더)

 

- 테두리 축약형 사용

property	정의	사용 예	Description
border	전체 축약형	div { border:1px solid red }	전체 똑같이 지정
border-left	좌측 테두리	div { border-left: 1px solid red }
border-right	우측 테두리	div { border-right: 1px solid red }
border-top	위 테두리	div { border-top: 1px solid red }
border-bottom	아래 테두리	div { border-bottom: 1px solid red }

 

 

- 테두리 속성 3가지

property	정의	사용 예	Description
border-style	테두리 종류	div { border-style:dashed }	상하좌우 모두 dashed 스타일로 변경
border-width	테두리 굵기	div { border-width:3px }	상하좌우 모두 굵기를 3px로 지정
border-color	테두리 컬러	div { border-color: tomato; }	상하좌우 모두 tomato 테두리 컬러 지정

 

- 축약형을 다양하게 사용

property	정의	사용 예	Description
border-style	스타일 축약형	div { border-style:dashed solid }	상하는 dashed,  좌우는 solid
border-width	굵기 축약형	div { border-width: 1px 2px 3px 4px}	상,우,하,좌 테두리 굵기 다르게 지정
border-color	컬러 축약형	div { border-color:tomato gray olive }	상, 좌우, 하 테두리 컬러 다르게 지정
border-top-color	위 테두리 컬러	div { border-top-color: red }	위쪽의 테두리 컬러만 지정

 

이렇듯, 테두리는 너무나 많은 축약형과 방법으로 사용할 수 있다. 자주사용하는 것들만 익혀도 무방하다.

 

 

G. 테두리 둥글기 지정하기(Border  Radius - 보더 래디어스)

좌상, 우상이렇게 복잡하게 보지말고, 그냥 상하좌우를 모서리로 생각하면 편해요~!

- 테두리 축약형 사용

property	정의	사용 예	Description
border-radius	전체 축약형	div { border-radius : 10px }	전체 똑같이 지정
border-radius	전체 축약형	div { border-radius: 10px 20px }	좌상,우하 10px,  우상, 좌하 20px

 

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.