css 박스 모델의 구성 알아보기(콘텐츠, 패딩(padding), 테두리(border), 여백(margin)

css 박스 모델의 구성 알아보기(콘텐츠, 패딩(padding), 테두리(border), 여백(margin)

네 안녕하세요, 이번 포스팅에서는 css로 다루는 모델 중 하나인 박스 모델에 대하여 알아보도록 하겠습니다.

html은 사실 여러 개의 박스가 모여 하나의 웹 페이지를 만든다고 봐도 이상하지 않습니다.

그 이유는 본문을 이루는 body 태그 안에 있는 div 태그가 바로 블록 박스 태그이기 때문입니다.

그래서 이번 포스팅에서는 이러한 블록 박스 모델을 어떤 식으로 구성을 하고 있는지에 대하여 알아보도록 하겠습니다.

그럼 지금부터 같이 보시죠.

 

1. html 태그를 다루는 방법

html 태그는 사각형의 박스로 이루어져 있습니다.

그래서 앞서 말씀드린 것처럼 html은 여러 개의 블록 박스 구역으로 이루어져 있다고 말씀을 드린 겁니다.

그리고 이러한 블록 박스의 너비는 태그가 감싸진 만큼 너비를 차지합니다.

그리고 이러한 박스는 일반 html만 작성을 하면 보이지가 않는데,

css를 입히면 그 박스의 너비를 볼 수가 있습니다.

 

2. 박스의 구성(콘텐츠, 패딩(padding), 테두리(border), 여백(margin)

html 태그를 구성하는 박스는 크게 4가지로 구성이 되어있습니다.

 

2 - 1. 콘텐츠

html 내부에서 사용하는 태그 내에는 콘텐츠가 항상 있습니다.

그 콘텐츠는 이미지, 텍스트, 영상, 다운로드 및 사이트 링크 등이 될 수가 있습니다.

그리고 이들을 통틀어서 콘텐츠라고 부릅니다.

반응형

 

2 - 2. 패딩(padding)

패딩은 콘텐츠를 둘러싸고 있는 내부의 여백입니다.

html에서의 여백은 두 가지입니다.

하나는 패딩이 담당하는 여백이고,

다른 하나는 마진이 담당하는 여백입니다.

그리고 패딩과 마진의 차이는 내부에서 여백을 제어하느냐,

외부에서 여백을 제어하느냐의 차이입니다.

 

2 - 3. 테두리(border)

테두리는 html 태그가 구성하는 블록의 외곽선입니다.

그리고 이 테두리는 없앨 수도, 실선, 점선, 심지어는 이미지도 입힐 수가 있습니다.

그래서 이 테두리가 존재하기 때문에 마치 액자처럼 생겨있는 것처럼 보이기도 합니다.

 

2 - 4. 여백(margin)

마진은 블록 박스의 가장 바깥쪽 영역입니다.

패딩은 내부 여백이라고 한다면, 마진은 외부 여백입니다.

그래서 전체적인 박스의 위치를 제어하는 것은 마진을 이용을 하여 제어를 하고,

이 마진을 이용하여 서로 다른 태그가 인접해 있는 공간의 너비를 제어할 수가 있습니다.

 

여기까지 html을 이루는 박스 모델에 대하여 알아보았습니다.

다음 포스팅에서는 이 박스를 제어하는 프로퍼티들에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사합니다 ~