Box Model
▼ HTML 요소는 박스(box)로 이루어져 있다. (박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나간다.)
▼ HTML의 box 이해하기 <body> <header> <h1>Lorem</h1> </header> </body> : body박스 위에 header박스가, header박스 위에 h1박스가 놓인 형태이다.
1. Box Model 의 형태
▼ Box는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성된다.
Content
: 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 프로퍼티를 갖는다.Padding
: 테두리(border) 안쪽에 위치하는 요소의 내부 여백 영역이다.
기본적으로 투명하며 각 변마다 선의 굵기(width), 선의 형태(style), 선의 색상(color)를 지정할 수 있다. 요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용된다.Border
: 테두리 영역으로 border프로퍼티 값은 테두리의 두께를 의미한다.Margin
: 테두리(border) 바깥에 위치하는 요소의 외부 여백 영역이다.
기본적으로 투명하며 배경색을 지정할 수 없다. 주로 px, em, % 등의 단위를 사용한다.
▼ 각 영역을 꾸밀 때 사용하는 속성은 다음과 같다.
- 안쪽여백:
padding 속성- 테두리:
border 속성- 바깥 여백:
margin 속성- 박스의 가로 크기:
width 속성- 박스의 세로 크기:
height 속성- 박스의 크기 기준:
box-sizing 속성- 박스의 배경:
background 속성
2. Width / Height 프로퍼티
- width와 height 프로퍼티는 요소의 너비와 높이를 지정하기 위해 사용된다.
- 값을 정의 할 때는 '100px' 처럼 숫자 뒤에 단위를 표시한다.
- 지정되는 요소의 너비와 높이는 콘텐츠 영역을 대상으로 한다.
- width와 height 프로퍼티를 비롯한 모든 박스모델 관련 프로퍼티(margin, padding, border, box-sizing 등)는 상속되지 않는다.
- width와 height 프로퍼티의 초기값은 auto이다.
▼ HTML, CSS <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .aa { width: 200px; height: 300px; } .box1 { background-color: #d2f4ff; border: 2px solid #ccddff; } .box2 { background-color: #dddddd; border: 2px solid #ccdd33; } </style> </head> <body> <div class="aa box1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div class="aa box2"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </body> </html>▼ result
- 공통적으로 갖는 class속성과 각각 box1, 2로 구분하여 효과를 주는 속성을 나누어서 실행해 보았다.
+) 전체 사이즈 계산법
기본적으로 width와 height 프로퍼티는 콘텐츠 영역을 대상으로 크기를 지정하므로, 전체크기는 다음과 같이 계산한다. ▼
전체 너비: 20 + 6 + 20 + 400 + 20 + 6 + 20
전체 높이: 20 + 6 + 20 + 100 + 20 + 6 + 20+) max-width / min-width
max-width
: 요소 너비의 최대값을 지정한다. max-width: 300px 의 경우, 브라우저의 너비가 300px보다 작아지면 요소 너비는 브라우저의 너비에 따라서 작아진다.
min-width
: 요소 너비의 최소값을 지정한다. min-width: 300px 의 경우, 브라우저의 너비가 300px보다 작아져도 요소 너비는 지정 너비(300px)을 유지한다.
3. Margin / Padding 프로퍼티
- margin, padding 프로퍼티는 content의 4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.
- -top, -right, -bottom, -left 4방향의 프로퍼티를 각각 지정하지 않고 margin, padding 1개의 프로퍼티만으로 4방향의 프로퍼티를 한번에 지정할 수 있다. ▼
ex) margin-top: 40px;
margin-right: 25px;
margin-bottom: 20px;
margin-left: 5px;
: margin: 40px 25px 20px 5px; (top부터 시계방향이다.)- margin 프로퍼티에 auto 키워드를 설정하면 해당 요소를 브라우저 중앙에 위치 시킬 수 있다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div { width: 300px; height: 100px; background-color: #d2f4ff; border: 2px solid #ccddff; margin: 0 auto; } </style> </head> <body> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </body> </html>▼ result
4. border 프로퍼티
테두리(boder)를 구성하는 세가지 요소
:이 테두리는 각 변마다 선의 굵기(width), 선의 형태(style), 선의 색상(color)을 지정할 수 있다.
4-1. 선의 형태(border-style)
- border-style 프로퍼티는 테두리 선의 스타일을 지정한다.
- 실선이나 점선 등으로 바꿔줄 수 있으며, 아예 없앨 수도 있다.
- 프로퍼티 값의 갯수에 따라 4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.
none
선을 없앤다. 대부분 요소의 기본 값이다.solid
실선의 형태로 적용한다.dotted
점선 형태로 적용한다.dashed
바느질선 같은 형태의 점선이다.double
이중 선의 형태이다. 굵기가 3px 이상이 되어야 볼 수 있다.groove
입체적으로 선을 홈이 들어간 것처럼 보여준다. 최소 2px은 되어야 확인 가능하다.ridge
groove와 비슷하지만, 음영 값이 반대로 선이 돌출되어 보인다.inset
요소 전체가 안으로 들어가 보인다.outset
inset의 반대로, 요소 전체가 밖으로 돌출되어 보인다.inherit
부모의 속성을 상속받는다.
4-2. 선의 굵기(border-width)
- border-width 프로퍼티는 테두리의 두께를 지정한다. 프로퍼티 값의 갯수에 따라 4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.
- border-width 프로퍼티는 border-style과 함께 사용하지 않으면 적용되지 않는다.
ex) div { border-top-width : 3px } : 상단 테두리 선 굵기를 선언할 경우 예시이다. 위치를 지정하지 않으면 4변이 동일하게 설정된다.
4-3. 선의 색상(border-color)
- border-color 프로퍼티는 테두리의 색상을 지정한다.
- 보통의 색상 속성과 마찬가지로, 색상 명이나 색상 코드가 들어갈 수 있다.
- 프로퍼티 값의 갯수에 따라 4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.
- border-color 프로퍼티는 border-style과 함께 사용하지 않으면 적용되지 않는다.
ex) div { border-color : red green blue yellow } : 색상순 차례대로 변의 상단,우측,하단,좌측으로 지정된다.
4-4. 테두리(border) 속성의 조합
- border 프로퍼티는 border-width, border-style, border-color를 한번에 설정하기 위한 shorthand 프로퍼티이다.
▼ 중복사용 코드를 줄여서 compact하게 정리한다.
div { border-width : 3px; border-style : dotted; border-color : red; } = div { border : 3px dotted red; }
- 네 방향으로 조합할 경우
3개를 적어주면top,(right+left),bottom으로 인식하고,
2개를 적어주면(top+bottom),(right+left)으로 인식한다.
(이러한 방향의 조합은 다른 속성들에도 많이 사용된다고 한다.)
4-5. border-radius 속성
- border-radius 속성은 요소의 테두리를 둥글게 만들어 준다. px 단위와 % 단위를 사용할 수 있으며, border 속성 없이도 사용할 수 있다
- 각각의 모서리에 border-radius 프로퍼티를 개별적으로 지정할 수도 있고 4개의 모서리를 short-hand로 한번에 지정할 수도 있다.
▼ HTML, CSS <!DOCTYPE html> <html> <head> <style> div { background: orange; color: #ffffff; display: inline-block; width: 90px; height: 90px; line-height: 90px; margin: 5px; text-align: center; } .aa { border-radius: 8px; } .bb { border-radius: 50%; } .cc { border-radius: 10px 30px; } </style> </head> <body> <div class="aa">8px</div> <div class="bb">50%</div> <div class="cc">10px 30px</div> </body> </html>▼ result
위에서 line-height는 줄 높이를 정하는 속성이다.
5. box-sizing 프로퍼티
- box-sizing 프로퍼티는 요소의 너비와 높이를 계산하는 방법을 지정한다.
content-box(기본값)
: width, height 프로퍼티 값은 content 영역을 의미한다.border-box
: width, height 프로퍼티 값은 content, padding, border가 포함된 값(총 너비)을 의미한다.
ex) * { box-sizing: border-box; }
6. box model 써먹기!
개발자도구
- 크롬 기준 페이지 우클릭 후 '검사'를 누르면 도구 창이 열린다. (맥은 fn + F12로도 가능하다.)
- 태그를 선택하고 styles 창을보면, 이 선택된 태그가 어떠한 css스타일의 영향을 받고 있는가를 보여주는 중요한 기능이다.
html과 css가 복잡해졌을때, 어떤 하나의 태그가 어떤 css의 영향을 받는지 알 수 있으므로 공부에도 도움이 된다. - 개발자 도구 style탭을 통해서 마진과 패딩 등을 조절하여 미리 원하는 값을 짐작할 수 있다. (실제로 변경되는 것은 아니다.)
❗️ 작업을 하면서 css 속성들 사이에,를 넣거나, 맨뒤에;(세미콜론) 을 붙이지 않거나, 속성을 주려는 태그와는 다른 태그를 사용하거나 등의 실수가 전부 화면상에서 다르게 표시되므로(줄이 사라지거나 여백이 이상해지는 등) 주의하자.
reference : https://poiemaweb.com/ https://www.codingfactory.net/10556
기억보단 기록을 ✨