HTML 박스모델이란?(2) margin, border, padding, content
HTML 박스모델이란?(2)
전에 글에서 말씀드린 데로 이번에는 박스 모델에 대해 더 자세한 설명을 해보겠습니다.
복습을 하자면 박스 모델은 HTML에서 작성된 값은 보이지 않지만 4개의 박스로 구성이 되어있습니다.
가장 밖깥쪽에 margin, 테두리를 담당하는 border, 그 안에 padding,
이미지나 텍스트로 구성된 content의 영역으로 구성이 되어있고
CSS 코드 예시를 보여드렸었습니다.
다시 강조 드리지만 HTML 박스 모델은 CSS를 통해 HTML을 꾸밀 경우 꼭 알아둬야 하는
중요한 기초 정보이기 때문에 꼭 알아두셔야 합니다.
본론으로 돌아가서 content영역을 제외한 박스 모델은 각각의 영역이
위, 왼쪽, 아래, 오른쪽으로 나눠져있습니다.
그래서 모든 영역을 top, left, bottom, right를 통해
효과를 주고 싶은 위치를 따로 정해서 적용할 수 있습니다.
이것이 중요한 이유는 웹 디자인을 했을 때 어느 한쪽만 따로 값을 지정해야하는 경우가
반드시 생기기 때문에 정말 중요하게 알아두셔야하는 기본 정보입니다.
이제 Margin 영역을 예시로 설명해 드리겠습니다.
'div{margin-top: 10px;}' 이 CSS 코드를 해석해 보면
'HTMl에 작성된 div 태그에서 margin 영역 중 위쪽의 영역에
10px의 거리를 비워라'라고 해석할 수 있습니다.
저번 시간에 보여드린 태그를 다시 보면
'div{margin: 10px;}' 이렇게 작성이 되는데
이 코드는 사실 요약된 코드로 요약된 코드를 풀어서 보면
'div{margin: 10px 10px 10px 10px;}'로 볼 수 있습니다.
저건 위, 왼쪽, 아래, 오른쪽 순으로 작성되는데
만약 'div{margin: 10px 10px;}' 이렇게 작성하면
위쪽과 왼쪽 부분에만 값을 줬더라도 아래와 오른쪽도 반대편의 값과
똑같이 적용돼서 보이게 됩니다.
이것을 알게 된다면 코드를 작성할 때 더욱 가독성이 좋게 정리를 할 수 있게 되며
정리가 잘 된 코드가 완성된다면 값을 변경하고 싶은 경우도
빠르게 발견할 수 있게 되어서 정말 중요합니다.
현재 margin 영역으로 설명을 드리고 있는데
content 영역을 제외한 border, padding 영역도 margin 영역과 똑같이 적용할 수 있습니다.
content 영역은 작성된 값이 보이는 본 영역이기 때문에 코드를 작성할 때
다른 영역과 다르게 width(넓이), height(높이) 영역을 지정하기 때문에
따로 위쪽, 아래쪽, 왼쪽, 오른쪽의 영역을 구성하지 않습니다.
이점 참고하시기 바랍니다.
정리하자면 박스 모델은 margin, border, padding, content 영역으로 구성이 되는데
content 영역을 제외한 margin, border, padding 영역은 위, 왼쪽, 아래, 오른쪽을 따로 값을 지정할 수 있으며
'div{'margin or border or padding': 10px;)은 요약된 코드로
'div{'margin or border or padding': 10px 10px 10px 10px;}로 풀어서 쓸 수 있습니다.
그리고 이 코드는 위, 왼쪽, 아래, 오른쪽 순으로 지정되어 있습니다.
마지막으로 content 영역은 본 작성된 값이 위치한 영역이기 때문에
content 영역은 width(넓이), height(높이)값을 지정해서 크기를 조정할 수 있다는 것까지
정리하고 마치도록 하겠습니다.
감사합니다!!
