코딩독학) CSS 박스 모델 (Box Model) - border, margin, padding

CSS 박스 모델 (Box Model)

웹 페이지를 만들 때 레이아웃을 구성하기 위해서는 박스 모델에 대해서 알아야 한다.

각각의 태그들은 태그 자신이 화면에서 차지하는 영역을 가지고 있다. 그 영역은 아래 그림과 같이 구성된다.

 

출처: GCFLearnFree.org

 

border: 태그(컨텐츠)를 둘러싸고 있는 선.

padding: 컨텐츠와 border 사이의 간격.

margin: border를 기준으로 컨텐츠와 다른 컨텐츠의 사이의 간격.

 

이렇게 border, padding, margin 세 개의 개념만 제대로 가지고 있으면 박스모델은 전혀 어렵지 않다. 컨텐츠를 둘러싸고 있는 각각의 공간을 조정해서 크기를 조절하고 이걸을 제대로 배치할 수 있으면 레이아웃 구성은 끝이기 때문이다.

배치하는 방법은 다음에 공부할 예정이고, 먼저 박스 크기를 조절하는 방법에 대해 공부하겠다.

 

예제 연습

 

예제에는 html 문서에 box라는 class 값을 가진 두 개의 div태그가 있다. 이 태그들에 우측과 같은 CSS가 적용되어 있는데, 아래 그림처럼 웹 페이지 상의 결과물을 보면 width로 지정된 500px은 컨텐츠의 width 값이고 padding 값 30px은 상하좌우로 각각 추가적으로 적용된 것을 볼 수 있다. 그리고 margin 값은 60px인데 두 개의 div 태그들이 각각 60px의 margin 값을 갖고 있음에도 불구하고 총 마진 값이 120px이 아니라 60px인 이유는 CSS의 적용 원리 상 margin은 중첩되어 적용되고 둘 중 큰 쪽의 마진값이 적용되기 때문이다.

 

padding값과 margin값은 상하좌우를 다르게 적용할 수도 있다.

 

padding → padding-bottom, padding-left, padding-right, padding-top

margin → margin-bottom, margin-left, margin-right, margin-top

 

인라인 요소의 박스 모델

블럭 요소의 박스 모델과 다르게 인라인 요소의 박스 모델은 내가 적용한 padding 값과 margin 값이 인라인 요소를 해칠 경우에는 값이 무시된다. 아래의 예제를 보자.

 

예제 연습

예제에는 span 태그를 이용해서 인라인 요소를 만들었고 그 인라인 요소에 각각 width, border, padding, margin 값을 지정했다. 웹 페이지에 표시된 결과를 보면 "dolor sit amet consectetur," 부분에 보라색 점선이 둘러싸인 것을 볼 수 있는데 위 아래로 내용을 침범한 것을 볼 수 있다. 그러나 좌우에는 padding과 margin 값이 적용되어 있다. 글이 라인에 따라 구성되어 있기 때문에 문장 모양을 해치는 것은 무시되고 좌우는 띄어쓰기 개념으로 적용된 것이다. 이것이 바로 인라인 요소의 박스 모델이다.

 

Border Style 속성

마지막으로 border의 모양의 다양한 속성값을 연습해보고 마무리하겠다.

 

예제 연습

 

none: border가 없는 상태. 디폴트 값.

hidden: border가 있으나 숨겨져 있는 상태.

dotted: 점선.

dashed: 대쉬선.

solid: 실선.

double: 두 줄 선.

groove: 둥근 음각.

ridge: 둥근 양각.

inset: 각진 음각.

outset: 각진 양각.

initial: 디폴트 값에 맞춤.

inherit: 부모 요소의 속성 값에 맞춤.

 

 

 

 

출처

https://www.w3schools.com/cssref/pr_border-style.asp

CSS border-style property

https://www.w3schools.com/cssref/pr_padding.asp

CSS padding property

https://www.youtube.com/watch?v=_3xFkIfc-5U