CSS 박스 모델1 | content 콘텐츠 border 보더 padding 패딩 margin 마진

CSS 박스 모델 | content 콘텐츠 border 보더 padding 패딩 margin 마진

오늘은 content 콘텐츠, border 보더, padding 패딩, margin 마진의 개념을 확실히 잡아 보도록 하겠습니다.위 네 가지 개념은 CSS 디자인에 매우 중요한 요소이므로 꼭 정확히 이해하고 넘어가시기 바랍니다.

위 개념들을 확실히 잘 알아야 이미지 및 콘텐츠들을 내가 원하는 위치에 정확히 배치할 수 있기 때문입니다.

 

CSS에서 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 그 대상이 블록 요소여야 합니다.

블록 요소는 한 줄 전체를 차지하면서 네모난 박스 모양으로 자신만의 영역을 만들기 때문입니다.

우리는 이 네모난 영역을 '박스 모델'이라고 부르고, CSS로 이 박스 모델들을 조정하여 크기나 위치 등을 수정해줍니다.

2020/10/02 - [홈페이지 만들기/1단계. HTML] - HTML 블록(block) 태그

2020/10/05 - [홈페이지 만들기/1단계. HTML] - HTML 인라인(inline) 태그

 

 

 

위 예시를 보며 콘텐츠, 패딩, 보더, 마진이 어디 있는지 찾아봅시다.

※ 위 박스는 아래와 같이 만들었습니다. - 너비: 300px // 높이: 300px // 배경색: 핑크색 - border 보더(경계선)의 굵기: 5px // 모양 및 색깔: 검은색 점선 - 패딩: 50px  // 마진: 50px

일단 콘텐츠, 패딩, 보더, 마진의 크기와 위치를 확인하기 위해 아래와 같이 해봅시다.

1. 콘텐츠, 패딩, 보더, 마진이 어디에 있는지 찾기 위해서는 만들어 놓은 박스(html파일)를 크롬을 사용해 실행해줍니다.

2. 마우스를 우클릭을 하여 '검사'를 눌러줍니다.

3. 검사창이 뜨면, 검사창 좌측 상단의 마우스 커서 모양 버튼(①로 표시)을 눌러줍니다.

4. 그 다음 만들어 놓은 박스를 클릭하고 'computed'라고 쓰여 있는 부분을 눌러줍니다.

5. 그러면 주황색, 연두색 등으로 표현된 콘텐츠, 패딩, 보더, 마진의 크기와 위치를 확인할 수 있게 됩니다.

 

첫 번째로 콘텐츠 영역을 알아봅시다.

콘텐츠는 말 그대로 div 태그 안쪽에 쓰여있는 텍스트와 같은 것들의 영역입니다. 위 예시에서는 핑크색 박스 가운데에 빨간색 네모 박스를 하나 더 그려 콘텐츠의 위치를 표시해주었습니다.

콘텐츠 영역은 아래와 같이 설정할 수 있습니다.

선택자 { width: 크기; height:  크기; }

 

두 번째로 패딩 영역을 알아봅시다. 

패딩은 콘텐츠 바깥쪽에, 그리고 보더(경계선) 안쪽에 있는 영역입니다. 우리가 몸뚱이 겉에 패딩 잠바를 입어 따뜻하게 덮어주듯이, 콘텐츠를 덮어주는 영역이 패딩입니다.

패딩 영역은 아래와 같이 설정할 수 있습니다.

선택자 { padding: 크기; }

 

세 번째로 보더 영역을 알아봅시다.

보더는 패딩 바깥쪽에, 마진 안쪽에 있는 영역입니다. 경계선 또는 테두리라고 부르기도 합니다. 위 예시에서는 보더의 굵기를 5px로, 검은색 점선으로 표시하였습니다.

보더 영역은 아래와 같이 설정할 수 있습니다.

선택자 { border: 굵기 스타일 색깔; }

*스타일은 dotted(점선), solid(실선) 등을 선택할 수 있습니다. 

 

끝으로 마진 영역을 알아봅시다.

마진은 가장 바깥쪽에 있는 영역입니다. 보통 여백으로 표현되는 부분입니다.

마진 영역은 아래와 같이 설정할 수 있습니다.

선택자 { margin: 크기; }

 

 

 

처음에는 위 네 가지 개념이 조금 헷갈릴 수 있습니다.

따라서 이렇게 저렇게 숫자를 바꾸어 보며 박스 모델의 크기와 위치를 조정해보시기 바랍니다.

 

다음 시간에는 콘텐츠, 패딩, 보더, 마진을 조정해가며 이 네 가지 속성에 대해 더 자세히 알아보겠습니다.

 

그럼 이만 :D