박스 모델 장식과 관련된 CSS 속성

Articles

CSS 소개

이 글은 박스 모델 장식과 관련된 CSS 속성에 대해 설명합니다.

테두리와 그림자 같은 속성을 작성하는 방법을 배울 수 있습니다.

YouTube Video

미리보기를 위한 HTML

css-decoration.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

장식

`border` 속성

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

border 속성은 CSS에서 요소의 프레임을 설정하는 데 사용됩니다. border는 너비, 스타일, 색상 세 가지 요소로 구성되며, 이들을 조합하여 요소의 프레임을 설정합니다.

`border`의 기본 구조

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

border-width를 사용하여 테두리의 두께를 지정합니다. 단위는 px, em, % 등을 사용하여 지정합니다.
border-style을 사용하여 테두리의 유형을 지정합니다. 다음 값을 지정할 수 있습니다.
- 스타일 값:
  - none (테두리 없음)
  - solid (실선)
  - dotted (점선)
  - dashed (대시선)
  - double (이중선)
  - groove (홈이 있는 선)
  - ridge (돋아난 선)
  - inset (내부 그림자 선)
  - outset (외부 그림자 선)

border-color를 사용하여 테두리의 색상을 지정합니다. 색상은 색상 이름, rgb(), rgba(), hex 등을 사용하여 지정할 수 있습니다.

각 측면에 대한 개별 설정

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

이렇게 각 측면에 대해 다른 스타일을 설정할 수 있습니다.

너비, 스타일 및 색상에 대한 개별 설정

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

border-width, border-style, border-color를 사용하여 각 속성을 개별적으로 지정할 수도 있습니다.

`border-radius`와 결합

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

border-radius 속성을 사용하여 테두리 모서리를 둥글게 만들 수 있습니다.

`border-radius` 속성

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

border-radius 속성은 요소의 모서리를 둥글게 만드는 데 사용됩니다. HTML 요소의 네 모서리를 부드럽게 곡선 처리하여 직사각형 또는 정사각형을 둥근 디자인으로 변환할 수 있습니다.

설명:

border-radius-all-rounded 클래스는 모든 모서리를 20픽셀로 둥글게 만들어 부드럽게 둥근 박스를 생성합니다.
border-radius-top-left-rounded 클래스는 왼쪽 상단 모서리만 20픽셀로 둥글게 만들고 나머지 모서리는 직각으로 유지합니다.
border-radius-ellipse-corners 클래스는 타원형 모서리를 생성하여 가로로 늘어난 둥근 모양의 박스를 만듭니다.

`border-radius` 속성의 형식

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;

border-radius 속성의 값은 일반적으로 픽셀 또는 백분율로 지정됩니다. 또한 1개에서 4개의 값을 설정할 수 있습니다.
- 하나의 값을 지정하면 모든 모서리가 균일하게 둥글게 됩니다.
- 두 개의 값을 지정하면 첫 번째 값은 왼쪽 상단 및 오른쪽 하단 모서리에 적용되고, 두 번째 값은 오른쪽 상단 및 왼쪽 하단 모서리에 적용됩니다.
- 네 개의 값을 지정하여 각 모서리에 대해 다른 반지름을 설정할 수 있습니다. 값은 왼쪽 상단에서 시계 방향으로 적용됩니다.
border-top-left-radius와 같이 개별적으로 지정할 수도 있습니다.

1border-radius: 50px / 25px;

border-radius 속성은 세로 및 가로 반지름을 개별적으로 지정하여 모서리를 타원형으로 만들 수도 있습니다. 이 경우 /로 구분합니다.
- 예를 들어, 50px / 25px으로 지정하면 가로 반지름은 50픽셀이고 세로 반지름은 25픽셀이 됩니다.

요약

**border-radius**는 요소의 모서리를 둥글게 만드는 속성입니다.
픽셀 또는 백분율로 모서리의 둥글기를 지정할 수 있으며, 모든 모서리, 특정 모서리 또는 타원형으로 적용할 수 있습니다.
유연한 디자인 및 사용자 인터페이스 사용자화를 위해 유용합니다.

`outline` 속성

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

outline 속성은 요소 주변에 그려지는 선을 설정하기 위한 CSS 속성입니다.

outline은 border와 유사하지만, 다음과 같은 차이점이 있습니다:.

outline은 요소의 박스 모델에 영향을 미치지 않으므로 레이아웃에 영향을 주지 않습니다.
outline은 요소 밖에 그려지기 때문에, border의 외부에 나타납니다.
border는 요소 내부에 그려지기 때문에 요소의 크기와 레이아웃에 영향을 끼칠 수 있습니다.

이 예에서는 outline 속성이 아래와 같이 설정됩니다:.

outline-solid 클래스는 두께가 2px인 빨간색 실선 윤곽선을 설정합니다.
outline-dashed 클래스는 두께가 3px인 파란색 점선 윤곽선을 설정합니다.
outline-double 클래스는 두께가 4px인 초록색 이중선 윤곽선을 설정합니다.
outline-offset 클래스는 윤곽선과 요소 사이의 공간을 10px로 설정합니다.

기본 구문

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}

`outline-width`

outline-width는 윤곽선의 두께를 지정합니다.
thin, medium, thick와 같은 값을 지정하거나 px, em 등의 단위를 사용할 수 있습니다.

`outline-style`

outline-style은 윤곽선의 스타일을 지정합니다.
solid, dotted, dashed, double, groove, ridge, inset, outset, none 등과 같은 스타일을 지정할 수 있습니다.

`outline-color`

outline-color는 윤곽선의 색상을 지정합니다.
이름, HEX, RGB 등을 사용하여 원하는 색상을 지정할 수 있습니다.

`outline-offset`

outline-offset은 윤곽선과 요소 사이의 거리를 지정합니다.
px, em 등의 단위로 정확한 값을 지정할 수 있습니다.

`box-shadow` 속성

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

box-shadow 속성은 요소에 그림자를 추가하는 데 사용됩니다. 이 속성을 사용하여 요소 주위에 그림자를 만들어 차원감과 깊이를 표현할 수 있습니다.

설명:

box-shadow-basic-shadow 클래스에서는 요소의 오른쪽 하단에 흐릿한 검은색 그림자가 표시됩니다.
box-shadow-inset-shadow 클래스에서는 요소 내부에 흐릿한 그림자가 표시됩니다. 그림자가 내부로 들어가면 움푹 들어간 디자인을 만들 수 있습니다.
box-shadow-multiple-shadow 클래스에서는 검은색과 빨간색 두 개의 그림자가 요소에 적용됩니다. 그림자가 서로 다른 위치에 표시되기 때문에 입체적인 효과를 얻을 수 있습니다.

`box-shadow` 속성 형식

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];

각 값의 의미

첫 번째 값인 수평 오프셋(horizontal offset)은 요소의 왼쪽에서부터 그림자의 위치를 지정합니다. 양의 값을 지정하면 그림자가 오른쪽으로 이동하고, 음의 값을 지정하면 그림자가 왼쪽으로 이동합니다.

두 번째 값인 수직 오프셋(vertical offset)은 요소의 위쪽에서부터 그림자의 위치를 지정합니다. 양의 값을 지정하면 그림자가 아래로 이동하고, 음의 값을 지정하면 그림자가 위로 이동합니다.

세 번째 값인 블러 반경(blur radius)은 그림자의 흐림 정도를 지정하는 값입니다. 값이 클수록 그림자가 더욱 퍼지며, 결과적으로 더 흐릿한 그림자가 나타납니다. 양의 값을 지정하면 그림자가 아래로 이동하고, 음의 값을 지정하면 그림자가 위로 이동합니다. 이 값은 선택 사항이며 기본값은 0으로, 그림자가 흐리지 않은 상태를 의미합니다.

네 번째 값인 확산 반경(spread radius)은 그림자가 얼마나 퍼지는지를 지정하는 값입니다. 양의 값을 지정하면 그림자가 더 커지고, 음의 값을 지정하면 그림자가 더 작아집니다. 이 값도 선택 사항입니다.

다섯 번째 값인 색상(color)은 그림자의 색상을 지정하는 값입니다. 색상은 색상 이름, RGB, HEX, HSL 등의 CSS에서 사용할 수 있는 색상 모델을 사용하여 설정할 수 있습니다. 생략하면 해당 요소의 기본 텍스트 색상(color 속성의 값)이 적용됩니다.

inset 키워드를 먼저 지정할 수도 있습니다. inset 키워드를 지정하면 그림자가 외부 대신 요소 내부로 그려집니다. 쉼표로 구분하여 여러 개의 그림자를 설정하는 것도 가능합니다.

`box-shadow` 예시

기본 그림자 예제

1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}

수평 오프셋이 10px로 설정되어 그림자가 오른쪽으로 10픽셀 생성됩니다.
수직 오프셋이 10px로 설정되어 그림자가 아래쪽으로 10픽셀 생성됩니다.
블러 반경이 5px로 설정되어 그림자가 5픽셀 부드럽게 흐려집니다.
색상이 rgba(0, 0, 0, 0.5)로 설정되어 반투명 검은색 그림자가 생성됩니다.

내부 그림자 예제

1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}

inset을 사용하면 요소 내부에 그림자를 그릴 수 있습니다.

다중 그림자 예제

1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}

쉼표로 여러 그림자를 설정할 수도 있습니다. 이 예제에서는 두 개의 그림자가 적용됩니다: 검은 그림자와 빨간 그림자.

요약

**box-shadow**는 요소에 그림자를 추가하여 깊이감을 만드는 데 사용되는 속성입니다.
수평 및 수직 오프셋, 블러, 확산 반경, 색상을 조합하여 다양한 효과를 만들 수 있습니다.
**inset**을 사용하여 내부에 그림자를 그릴 수 있고, 여러 그림자를 한 번에 설정할 수도 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

배경 관련 CSS 속성 목록 관련 CSS 속성

박스 모델 장식과 관련된 CSS 속성

YouTube Video

미리보기를 위한 HTML

장식

border 속성

border의 기본 구조

각 측면에 대한 개별 설정

너비, 스타일 및 색상에 대한 개별 설정

border-radius와 결합

border-radius 속성

설명:

border-radius 속성의 형식

요약

outline 속성

기본 구문

outline-width

outline-style

outline-color

outline-offset

box-shadow 속성

설명:

box-shadow 속성 형식

각 값의 의미

box-shadow 예시

기본 그림자 예제

내부 그림자 예제

다중 그림자 예제

요약

YouTube Video

`border` 속성

`border`의 기본 구조

`border-radius`와 결합

`border-radius` 속성

`border-radius` 속성의 형식

`outline` 속성

`outline-width`

`outline-style`

`outline-color`

`outline-offset`

`box-shadow` 속성

`box-shadow` 속성 형식

`box-shadow` 예시