박스 모델 속성 part2 - by. UXKM

Publishing
CSS
CSS 초급
박스 모델 속성 part2

요약 설명
박스 모델(Box Model)은 CSS가 모든 HTML 요소를 사각형 박스로 취급하여 배치하는 기본 개념입니다.
각 요소는 내용(content), 내부 여백(padding), 테두리(border), 외부 여백(margin) 영역으로 구성되며, 이 영역들을 조합하여 요소의 최종 크기와 위치를 결정합니다.

박스 모델을 이해하면 요소의 크기(width, height), 여백(margin, padding), 테두리(border) 등을 정확하게 제어할 수 있으며, 레이아웃을 구성하는 데 필수적인 개념입니다.

요약 설명
박스 모델 속성 part-2에서는

박스 테두리(border) 속성

박스 라운드(radius) 속성

박스 모델 크기(box-sizing) 제어 속성

박스 그림자(box-shadow) 속성에 대한 내용을 다룹니다.

박스 테두리(border)를 제어하는 속성

요소의 테두리 스타일, 두께, 색상을 설정하는 속성입니다.
border 속성을 설정하기 위해서는 반드시 border-style 속성이 먼저 설정되어 있어야 합니다.

border 축약형(shorthand) 속성

모든 border 속성을 한 줄에 축약형으로 설정할 수 있습니다.

									div {
										border: <border-width> <border-style> <border-color>;
									}

border-style 속성

테두리 선의 스타일을 지정하는 속성입니다.

border-style의 기본 키워드 값은 다음과 같습니다.

dotted : 테두리를 점선으로 설정합니다.
dashed : 테두리를 약간 긴 점선으로 설정합니다.
solid : 테두리를 실선으로 설정합니다.
double : 테두리를 이중 실선으로 설정합니다.
groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받습니다.
ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받습니다.
inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받습니다.
outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받습니다.
none : 테두리를 없앱니다.
hidden : 테두리가 존재하기는 하지만 표현되지는 않습니다.

속성값의 개수에 따라 4개 방향(top, right, bottom, left)에 대하여 지정할 수 있습니다.

4개의 border-style 속성값을 지정할 때 top, right, bottom, left 순으로 설정합니다.
div { border-style: dotted dashed solid double; /* 위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다. */ border-top-style: dotted; border-right-style: dashed; border-bottom-style: solid; border-left-style: double; }
3개의 border-style 속성값을 지정할 때 top, right/left, bottom 순으로 설정합니다.
div { border-style: dotted dashed solid; /* 위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다. */ border-top-style: dotted; border-right-style: dashed; border-left-style: dashed; border-bottom-style: solid; }
2개의 border-style 속성값을 지정할 때 top/bottom, right/left 순으로 설정합니다.
div { border-style: dotted dashed; /* 위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다. */ border-top-style: dotted; border-bottom-style: dotted; border-right-style: dashed; border-left-style: dashed; }
1개의 border-style 속성값을 지정할 때 모든 테두리의 스타일을 같게 설정합니다.
div { border-style: dotted; /* 위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다. */ border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; }

border-width 속성

테두리의 두께를 지정하는 속성입니다.
속성값의 개수에 따라 4개 방향(top, right, bottom, left)에 대하여 지정할 수 있습니다.
border-width 속성은 border-style과 함께 사용하지 않으면 적용되지 않습니다.
px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정할 수 있으며, 예약어인 thin, medium, thick을 사용할 수도 있습니다.

border-color 속성

테두리의 색상을 지정하는 속성입니다.
속성값의 개수에 따라 4개 방향(top, right, bottom, left)에 대하여 지정할 수 있습니다.
border-color 속성은 border-style과 함께 사용하지 않으면 적용되지 않습니다.
기본적인 color 속성값들뿐만 아니라 투명한 선을 나타내는 transparent 속성값을 사용할 수도 있습니다.
border-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 그대로 물려받습니다.

border-top 속성

상단 테두리를 설정하는 속성입니다.
축약형으로 border-style, border-width, border-color를 한 번에 설정하거나, 각각 따로 설정할 수 있습니다.

축약형

										div {
											border-top: <border-width> <border-style> <border-color>;
										}

style, width, color

										div {
											border-top-style: <border-style>;
											border-top-width: <border-width>;
											border-top-color: <border-color>;
										}

border-right 속성

오른쪽 테두리를 설정하는 속성입니다.
축약형으로 border-style, border-width, border-color를 한 번에 설정하거나, 각각 따로 설정할 수 있습니다.

축약형

										div {
											border-right: <border-width> <border-style> <border-color>;
										}

style, width, color

										div {
											border-right-style: <border-style>;
											border-right-width: <border-width>;
											border-right-color: <border-color>;
										}

border-bottom 속성

하단 테두리를 설정하는 속성입니다.
축약형으로 border-style, border-width, border-color를 한 번에 설정하거나, 각각 따로 설정할 수 있습니다.

축약형

										div {
											border-bottom: <border-width> <border-style> <border-color>;
										}

style, width, color

										div {
											border-bottom-style: <border-style>;
											border-bottom-width: <border-width>;
											border-bottom-color: <border-color>;
										}

border-left 속성

왼쪽 테두리를 설정하는 속성입니다.
축약형으로 border-style, border-width, border-color를 한 번에 설정하거나, 각각 따로 설정할 수 있습니다.

축약형

										div {
											border-left: <border-width> <border-style> <border-color>;
										}

style, width, color

										div {
											border-left-style: <border-style>;
											border-left-width: <border-width>;
											border-left-color: <border-color>;
										}

박스 라운드(radius)를 제어하는 속성

CSS3에 추가된 속성으로, 테두리 모서리를 둥글게 표현하는 속성입니다.
속성값은 길이를 나타내는 단위(px, em 등)와 %를 사용합니다.
각각의 모서리를 개별적으로 지정할 수도 있고, 4개의 모서리를 축약형으로 한 번에 지정할 수도 있습니다.

								div {
									border-radius: border-radius-width | inherit;
								}

border-radius 축약형(shorthand) 속성

상단 좌측, 상단 우측, 하단 우측, 하단 좌측의 속성을 한 번에 축약하여 지정할 수 있습니다.

									div {
										/* 아래의 예제는 모두 같은 결과를 나타냅니다. */
										/* border-radius: [top-left-width top-right-width bottom-left-width bottom-right-width]; */
										border-radius: 20px;

										/* border-radius: top-left-width top-right-width bottom-left-width bottom-right-width; */
										border-radius: 20px 20px 20px 20px;

										/* border-[상|하]-[좌|우]-radius: border-width; */
										border-top-left-radius: 20px;
										border-top-right-radius: 20px;
										border-bottom-left-radius: 20px;
										border-bottom-right-radius: 20px;
									}

border-top-left-radius 속성

상단 좌측 라운드만 지정합니다.

ex) border-top-left-radius: 20px

border-top-right-radius 속성

상단 우측 라운드만 지정합니다.

ex) border-top-right-radius: 20px

border-bottom-right-radius 속성

하단 우측 라운드만 지정합니다.

ex) border-bottom-right-radius: 20px

border-bottom-left-radius 속성

하단 좌측 라운드만 지정합니다.

ex) border-bottom-left-radius: 20px

박스 라운드(radius) 예제

박스모델 크기(box-sizing) 제어

CSS3에 추가된 속성으로, 요소의 너비와 높이를 계산하는 방법을 지정하는 속성입니다.
기본값인 content-box는 width와 height가 콘텐츠 영역만을 의미하지만, border-box로 설정하면 width와 height가 패딩과 테두리를 포함한 전체 크기를 의미합니다.

box-sizing 속성

요소의 너비와 높이를 계산하는 방법을 지정하는 속성입니다.
box-sizing 속성은 상속되지 않으므로, 모든 요소에 적용하려면 아래와 같이 초기화합니다.

									html {box-sizing: border-box;}
									*, *::before, *::after {box-sizing: inherit;}

									div {
										box-sizing: content-box | border-box;
									}

content-box : 기본값으로 width, height 속성값은 콘텐츠 영역만을 의미합니다.
border-box : width, height 속성값은 콘텐츠 영역, padding, border가 포함된 값을 의미합니다.

box-sizing 테스트

위에 설명된 속성(width, height, margin, padding, border, border-radius)이 box-sizing의 속성 기준으로 어떤 차이점이 있는지 확인할 수 있습니다.
각 속성을 좌·우로 드래그하여 테스트해보세요.
테스트기 출처 : http://921430km.com/box_model

박스 그림자(box-shadow)를 제어하는 속성

CSS3에 추가된 속성으로, 요소에 그림자 효과를 적용하는 속성입니다.
콤마(,)로 구분하여 여러 개의 그림자를 지정할 수 있습니다.

								div {
									box-shadow: none | [ inset | position-x | position-y | blur | spread | color ] | inherit;
								}

none : 기본값으로 그림자 효과를 없앱니다.
inset : 그림자가 요소 안쪽에 위치합니다. 생략 가능합니다.
position-x : 그림자의 가로 위치입니다. 양수는 오른쪽, 음수는 왼쪽으로 이동합니다.
position-y : 그림자의 세로 위치입니다. 양수는 아래쪽, 음수는 위쪽으로 이동합니다.
blur : 그림자의 흐림 정도입니다. 값이 클수록 더 흐려집니다. 생략 가능합니다.
spread : 그림자의 확장 여부입니다. 양수는 확대, 음수는 축소합니다. 생략 가능합니다.
color : 그림자의 색상입니다. 생략 가능합니다.