CSS 박스모델 이해하기

CSS 박스모델 

 

HTML의 태그들은 모두 박스단위로 이루어져 있습니다. HTML 레이아웃을 설계할 때 박스 모델을 이해한다면 "어느 정도" 시행착오를 줄일 수 있습니다. css와 html을 공부하시는 분들이라면 크롬의 개발자 도구를 기본적으로 알 것이라 생각하여 어떻게 보는지는 따로 다루진 않겠습니다. (시간이 생기면 추가 포스팅을 제작해보도록 할게요)

 

박스 모델은 HTML요소들이 문서 내에 공간을 차지하는 규칙입니다. 이 박스 모델을 시각적으로 볼 수 있는데 그 방법은 크롬의 개발자 도구의 style란을 보시면 됩니다.

 

박스 모델은 왼쪽 그림과 같이 position, margin, border, padding 그리고 가운데 파란색 박스로 있는 content로 구성되어 있습니다. 

 

여기서 position 옵셔널로 css의 position 설정 여부로 있을 수도 없을 수도 있습니다. 

 

 

여기서 스타일을 설정해서 박스 모델의 각 요소를 이해해보도록 하겠습니다. 

 

CSS 박스모델

CSS 박스모델

content

content는 태그가 차지하는 공간을 의미합니다. css의 width와 height를 이용해 크기를 조절할 수 있습니다.

 

 

padding

padding은 content를 중심으로 태그의 부피를 늘리고 싶을 때 사용할 수 있습니다. 

 

 

위에 패딩의 수치를 정할 때 10px 한 번만 작성했는데 4면이 전부 10px인 것을 눈치채셨나요? 

 

padding: 10px; 은 실제 padding: 10px 10px 10px 10px; 과 같은 뜻입니다. 저렇게 중복되는 코드를 줄일 수 있습니다. 각 연단 것은 순서대로 위, 오른쪽, 아래, 왼쪽으로 시계방향 순으로 설정이 됩니다. 나중에 소개될 마진도 같은 형식입니다.

border

border는 테두리를 말합니다. 그리고 padding과 content를 합한 부피에 테두리를 설정합니다. 

 

 

border는 border-width border-style border-color로 이루어져 있습니다. 바로 위의 인라인으로 작성된 스타일처럼 말이죠. 또한 각 속성을 독립적으로 사용할 수도 있습니다. 예를 들어 이렇게 말이죠.

 

border-color: {색상}

border-width: {크기}

border-style: {보더 스타일, 기본적으로 solid(실선)}

 

그리고 border는 위, 오른쪽, 아래, 왼쪽으로 각각 설정할 수도 있습니다. 

 

border-top: {속성}

border-bottom: {속성}

border-left: {속성}

border-right: {속성}

 

이를 또 독립적으로 사용할 수 있습니다만 사용빈도는 그렇게 높지 않습니다만 참고하시길 바라요. 

 

border-top-color: {색상}

border-top-style: {보더 스타일}

border-top-width: {크기}

 

추가적으로 border-radius도 있습니다. 보더의 둥근 정도를 설정할 수 있는 것인데요. 여러분들이 시험 삼아 한번 해보세요.  

margin

margin은 태그와 태그와의 거리를 나타냅니다. 

 

 

 

마치며

 

CSS 박스모델 에 대해서 알아보았습니다. css는 간단하지만 세부적으로 들어가면 많이 헷갈리게 되는데요. 많이 연습해 보시는 것만이 답입니다. 에디터를 하나 열고 여러 블로그를 참고하면서 연습을 꾸준히 해보시길 바랍니다. 

 

다음은 position 속성에 대해 알아보도록 하겠습니다.