...
CSS box-model
HTML 요소는 기본적으로 박스 모델로 되어 있다. 태그를 통해 요소를 만들 때마다 새로운 box가 생기고 그 박스에 style을 주어서 문서를 꾸밀 수 있게 되는 것이다. 내용을 표시하는 영역(Content Area)부터 바깥 영역 여백(Margin)까지를 한 박스 모델의 영역이라고 보면 된다.
Content : 태그 박스 안의 내용, 텍스트나 이미지
Padding : content 주위 영역 (태그 안)
Border : padding과 content를 둘러싼 주위 영역 (태그와 밖의 경계)
Margin : border의 밖 (태그와 태그 밖 밖깥 태그나 body 사이 영역)
콘텐츠 크기 속성
height / width / max-width / min-width
기본적으로 width와 height 프로퍼티는 콘텐츠 영역을 대상으로 요소의 너비와 높이를 지정한다.
#width1 {
width: 10%;
height: 50px;
}
#width2 {
min-width: 200px; /* 요소 너비의 최소값.
브라우저 너비가 200보다 작아져도 200을 유지. */
max-width: 400px; /* 요소 너비의 최대값.
브라우저 너비가 400보다 작으면 요소는 브라우저의 너비에 따라서 작아짐
반대로, 브라우저 너비가 400보다 크면, 요소는 400으로 고정 */
}
만일 아래와 같이 되어있을 경우, 박스 전체 크기는 다음과 같이 계산할 수 있다.
[전체 너비]
- width + left padding + right padding + left border + right border + left margin + right margin
- 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px
[전체 높이]
- height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
- 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px
콘텐츠 여백 속성
*-top, *-right, *-bottom, *-left 4방향의 프로퍼티를 각각 지정하지 않고, margin, padding 1개의 프로퍼티만으로 4방향의 프로퍼티를 한번에 지정할 수 있다.
[ 여백 순서 규칙 ]
- 한 개의 값은 모든 네 면의 여백을 설정합니다.
- 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정합니다.
- 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 여백을 설정합니다.
- 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 여백을 지정합니다. (시계방향)
padding
내용과 border 사이의 영역을 나타내고 안쪽 여백 역할을 담당한다.
/* 따로따로 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
/* 네 면 모두 적용 */
padding: 1em; //em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다.
/* 세로방향 | 가로방향 */
padding: 5% 10%;
/* 위 | 가로방향 | 아래 */
padding: 1em 2em 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 5px 1em 0 2em;
border
border-style /* 테두리(border)를 다양한 모양으로 설정함. */
border-width /* 테두리(border)의 너비를 설정함. */
border-color /* 테두리(border)의 색상을 설정함. */
border-top /* 테두리(border)의 top 부분 속성을 한 번에 설정함. */
border-top-style /* 테두리(border)의 top 부분의 스타일을 설정함. */
border-top-width /* 테두리(border)의 top 부분의 너비를 설정함. */
border-top-color /* 테두리(border)의 top 부분의 색상을 설정함. */
border-right /* 테두리(border)의 right 부분 속성을 한 번에 설정함. */
border-right-style /* 테두리(border)의 right 부분의 스타일을 설정함. */
border-right-width /* 테두리(border)의 right 부분의 너비를 설정함. */
border-right-color /* 테두리(border)의 right 부분의 색상을 설정함. */
border-bottom /* 테두리(border)의 bottom 부분 속성을 한 번에 설정함. */
border-bottom-style /* 테두리(border)의 bottom 부분의 스타일을 설정함. */
border-bottom-width /* 테두리(border)의 bottom 부분의 너비를 설정함. */
border-bottom-color /* 테두리(border)의 bottom 부분의 색상을 설정함. */
border-left /* 테두리(border)의 left 부분 속성을 한 번에 설정함. */
border-left-style /* 테두리(border)의 left 부분의 스타일을 설정함. */
border-left-width /* 테두리(border)의 left 부분의 너비를 설정함. */
border-left-color /* 테두리(border)의 left 부분의 색상을 설정함. */
border-style
: 테두리 선의 스타일을 지정
.dotted { border-style: dotted; } /* 점선 */
.dashed { border-style: dashed; }
.solid { border-style: solid; } /* 직선 */
.double { border-style: double; } /* 이중선 */
.groove { border-style: groove; } /* 3D grooved 효과, border 색에 따라 효과가 달라진다. */
.ridge { border-style: ridge; } /* 3D 안으로 들어간 효과, border 색에 따라 효과가 달라진다. */
.inset { border-style: inset; } /* 3D 안으로 들어간 효과, border 색에 따라 효과가 달라진다. */
.outset { border-style: outset; } /* 3D 안으로 들어간 효과, border 색에 따라 효과가 달라진다. */
.none { border-style: none; } /* 선이 없음 */
.hidden { border-style: hidden; } /* 선을 숨김 */
.mix { border-style: dotted dashed solid double; } /* 4면을 따로따로 설정 */
border-width
테두리 두께
/* border-width 프로퍼티는 border-style과 함께 사용하지 않으면 적용되지 않는다. */
border-width: thin; /* 1px */
border-width: medium; /* 3px */
border-width: thick; /* 5px */
border-width: 15px;
border-width: 2px 10px 4px 20px; // 4방향 적용
border-color
테두리 색깔
/* border-color 프로퍼티는 border-style과 함께 사용하지 않으면 적용되지 않는다. */
border-color: red;
border-color: green;
border-color: red green blue yellow; // 4방향 적용
border-top ( -left, -right, -bottom )
border-top-width, border-top-style, border-top-color를 한번에 설정
/* 순서대로 width, style, color 지정 */
border-top: 4mm ridge rgb(170, 50, 220, .6);
border-right: solid;
border-left: 1rem solid;
border-bottom: thick double #32a1ce;
border
border-width, border-style, border-color를 한번에 설정
/* border-width border-style border-color */
border: 5px solid red;
border-radius
테두리 모서리를 둥글게 표현하도록 지정한다.
프로퍼티 값은 길이를 나타내는 단위(px, em 등)와 %를 사용한다.
border-radius: 5px;
border-radius: 50%;
border-radius: 15px 75px;
/* 각각의 모서리를 개별적으로 설정 */
border-radius: 10px 40px 40px 10px;
/* 위 코드는 아래의 shorthand이다.
border-top-left-radius: 10px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 10px;
*/
/* 두개의 반지름을 지정하여 타원형 둥근 모서리 설정 */
border-top-left-radius: 50px 25px;
/* 각각의 모서리에 타원형 둥근 모서리 축약 설정 */
border-radius: 50px 50px 0 0 / 25px 25px 0 0;
margin
border 부터 box model의 maximum 범위 까지를 나타내는 영역이다. 바깥 여백 영역 역할을 한다.
외부 요소와의 거리를 조절하는 용도로 많이 사용된다.
/* 따로따로 */
margin-top: 40px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 10px;
/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;
/* 세로방향 | 가로방향 */
margin: 5% auto; /* auto : 브라우저가 적절한 여백 크기를 선택. */
/* 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있습니다. */
/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;
outline
border 밖으로 그려지는 선.
border는 옵션의 두께만큼 박스의 전체 크기도 늘어나게 하는 반면, outline은 박스의 크기를 늘리는 게 아니라 단지 테두리만 생기는 것뿐이다.
만약, 여러 개의 박스를 가로로 정렬하고 싶은데 border값을 주면 그 두께만큼 간격이 벌어지지만 outline은 간격이 벌어지지 않고 현재 위치에서 테두리만 생기게 하는 거다. 즉 레이아웃에 영향을 끼치지 않는다.
/* border와 outline을 동시에 적용해 보면? */
width: 400px;
height: 150px;
margin: 150px auto;
background: #555;
border: 3px solid black;
outline: 3pz solid blue;
속성 | 설명 |
outline | 모든 outline 속성을 이용한 스타일을 한 줄에 설정할 수 있음. |
outline-style | 아웃라인(outline)를 다양한 모양으로 설정함. |
outline-width | 아웃라인(outline)의 너비를 설정함. |
outline-color | 아웃라인(outline)의 색상을 설정함. |
outline-offset | 테두리(border)와 아웃라인(outline) 사이의 여백을 설정함. |
outline-style
border-style과 value가 같음
outline-color
border-color과 value가 같음
outline-width
border-width과 value가 같음
outline-offset
outline과 border 사이 여유공간 크기
outline
여러 속성 한 번에 추가 가능
outline: dotted red;
outline: 5px solid yellow;
outline: thick ridge pink;
콘텐츠 박스 기준 속성
box-sizing
box-sizing 프로퍼티의 기본값은 content-box이다. 이는 width, height 프로퍼티의 대상 영역이 content 영역을 의미한다. 다만 컨텐츠의 크기 기준을 여백을 제외한 내용물만 기준을 정할지 여백도 포함할지에 대해 사람마다 각각 생각하는게 다르기 때문에 박스 모델 기준을 정하는 속성이라고 보면된다.
그래서 box-sizing 프로퍼티의 값을 border-box로 지정하면, 마진(margin)을 제외한 박스 모델 전체를 width, height 프로퍼티의 대상 영역으로 지정할 수 있어 CSS Layout을 직관적으로 사용할 수 있게 한다.
box-sizing: border-box;
키워드 | 설명 |
content-box | width, height 프로퍼티 값은 content 영역을 의미한다. (기본값) |
border-box | width, height 프로퍼티 값은 content 영역, padding, border가 포함된 값을 의미한다. |
# 참고자료
https://poiemaweb.com/css3-box-model
이 글이 좋으셨다면 구독 & 좋아요
여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.