이번 포스트에서는 HTML 요소들의 크기에 대해 다뤄보려 합니다.
우선, 모든 HTML 요소는 박스를 가지고 있는데 크게 블록 박스와 인라인 박스로 나눌 수 있습니다.
블록 박스
- 브라우저 넓이를 100% 사용합니다.
- width, height 속성을 사용하여 크기를 설정할 수 있습니다.
- padding, border, margin 속성을 사용할 수 있습니다. 해당 속성들은 다른 요소들을 밀어냅니다.
인라인 박스
- 컨텐츠만큼의 크기만 가집니다. 때문에 새 줄로 행을 바꾸지 않습니다.
- width, height 속성을 사용하여 크기를 설정할 수 없습니다.
- padding, border, margin 속성을 사용할 수 있지만 margin은 좌우만 조절할 수 있습니다. 해당 속성들의 tob, bottom 값은 다른 요소들을 밀어내지 않습니다.
HTML 요소 즉, 박스들의 크기는 어떻게 지정이 되는지 더 자세하게 알아보겠습니다.
📍표준 CSS 박스 모델 (Standard CSS Box Model)
표준 CSS 박스 모델에서 요소 전체 크기 = 컨텐츠 + 보더 + 패딩
1. 컨텐츠 contents
표준 CSS 박스 모델에서 요소 전체 크기에 포함되는 컨텐츠는 width, height를 통해 크기를 지정합니다.
(단, block box인 경우만! inline box에는 width, height를 사용할 수 없습니다.)
<head>
<style>
div {
width: 50px;
height: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div><div>
</body>
2. 보더 border
border는 말 그대로 컨텐츠 박스의 테두리!
표준 CSS 박스 모델에서 border의 크기 또한 요소 전체 크기에 포함됩니다.
button {
border-width: 3px;
border-style: solid;
border-color: blue;
}
/* 축약형 */
button {
border: 3px solid blue;
}
-
border-width
- 직접 지정 - px과 같은 단위로 직접 지정
- medium - 중간 굵기로 지정
- thin - 얇은 선으로 지정
- thick - 굵은 선으로 지정
-
border-style
- none - 테두리선 없애기
- solid - 직선
- dotted - 점선
- dashed - 바느질선
- double - 이중선
,
,
,
border style은 매우 다양하기 때문에 그때그때 찾아보기!
(https://developer.mozilla.org/ko/docs/Web/CSS/border-style)
-
border-color
button {
border-color: red; /* 네 면에 동일한 색상*/
border-color: red orange; /* 상하 좌우 */
border-color: red orange yellow; /* 상 좌우 하 */
border-color: red orange yellow green; /* 상 우 하 좌 (시계방향)*/
}- border-radius
radius 속성은 테두리 꼭짓점을 둥글게 만들어 줍니다.
border-radius: 30px;
- 원 만들기
radius를 50%로 주게 되면 요소 넓이의 절반만큼 반지름이 만들어져서 원이 만들어집니다.
div{
width: 100px;
height: 100px;
border-width: 3px;
border: 3px solid black;
border-radius: 50%;
}
- 특정 꼭짓점만 둥글게 만들기
border-top-left-radius: 50px; /* 상단 왼쪽 */
border-top-right-radius: 40px; /* 상단 오른쪽 */
border-bottom-left-radius: 30px; /* 하단 왼쪽 */
border-bottom-right-radius: 20px; /* 하단 오른쪽 */
3. 패딩 padding
표준 CSS 박스 모델에서 padding의 크기도 요소 전체 크기에 포함됩니다.
div {
width: 100px;
height: 30px;
border: 3px solid black;
padding: 10px;
}
div 전체 가로값 = 3+3+10+10+100 = 126
div 전체 세로값 = 3+3+10+10+30 = 56
- padding 값을 따로따로 줄 수도 있습니다.
padding: 10px; /* 네 방향 모두 동일하게 10px 적용*/
padding: 10px 20px; /* 상하 좌우 */
padding: 10px 20px 30px; /* 상 좌우 하 */
padding: 10px 20px 30px 40px; /* 상 우 하 좌 */4. margin
margin은 요소 전체 크기에 포함되지 않습니다. 하지만 요소와 요소 사이의 영역에 영향을 줍니다.
div {
width: 100px;
height: 30px;
border: 3px solid black;
margin: 10px;
}
div 전체 가로값 = 3+3+100 = 106
div 전체 세로값 = 3+3+30 = 36
-> 마진 값은 전체 요소 크기에 포함되지 않습니다!
- margin 값을 따로따로 줄 수도 있습니다.
margin: 10px; /* 네 방향 모두 동일하게 10px 적용*/
margin: 10px 20px; /* 상하 좌우 */
margin: 10px 20px 30px; /* 상 좌우 하 */
margin: 10px 20px 30px 40px; /* 상 우 하 좌 */
margin: 10px auto;
/* auto
: 요소 크기를 제외한 나머지 마진 영역을 반으로 나눠 왼쪽과 오른쪽에 분배합니다.
좌우로만 auto를 적용할 수 있고 상하로는 적용할 수 없습니다.*/📍대체 CSS 박스 모델 (Alternative CSS Box Model)
위에서 살펴본 바와 같이 표준 박스 모델에서는 보더와 패딩 값도 전체적인 요소의 크기에 포함이 됩니다. 하지만 보더와 패딩 값을 제외한 내가 직접 지정한 width와 height를 전체적인 요소의 크기로 지정하고 싶을 때도 있습니다. 이를 위해 나온 것이 대체 CSS 박스 모델입니다.
이 모델을 사용하기 위해서는 box-sizing속성을 사용하면 됩니다.
그러면 내가 지정한 width와 height를 실제 요소의 크기로 지정할 수 있습니다.
- 대체 박스 모델
<head>
<style>
* {
margin: 0;
}
div {
width: 100px;
height: 30px;
border: 3px solid black;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
</body>
div 전체 가로값 = 3+3+10+10+74 = 100
div 전체 세로값 = 3+3+10+10+4 = 30
-> 보더, 패딩 값이 제외됩니다.
- 표준 박스 모델
<head>
<style>
* {
margin: 0;
}
div {
width: 100px;
height: 30px;
border: 3px solid black;
padding: 10px;
box-sizing: content-box; /* box-sizing의 기본 값 (생략 가능). 표준 박스 모델에서 사용됩니다. */
}
</style>
</head>
<body>
<div></div>
</body>
div 전체 가로값 = 3+3+10+10+100 = 126
div 전체 세로값 = 3+3+10+10+30 = 56
-> 보더, 패딩 값이 포함됩니다.
이번 포스팅에서는 HTML 요소의 크기를 지정하는 표준 CSS 박스 모델과 대체 CSS 박스 모델에 대해 다뤄보았습니다. 잘못된 내용이 있다면 댓글로 알려주세요!🤗
