IT 강좌 CSS 기초 024_테두리, 윤곽선, 그림자

테두리

CSS의 테두리(Borders)는 요소 주위에 시각적 경계를 만드는 데 사용되는 중요한 스타일 속성입니다.

예제 효과

테두리 속성

border-width: 테두리의 너비를 설정합니다.
border-style: 테두리의 스타일을 설정합니다 (solid: 실선, dotted: 점선, dashed: 파선, double: 이중선, groove: 홈, ridge: 돌출, inset: 음각, outset: 양각, none: 테두리 없음).
border-color: 테두리의 색상을 설정합니다.

예제:

1
    .example1 {
2
        border-width: 2px;
3
        border-style: solid;
4
        border-color: #333;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border: 2px solid #333;
10
        /* 약식 속성 */
11
        width: 200px;
12
        height: 200px;
13
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

효과: 예제 효과

테두리 방향

border-top, border-right, border-bottom, border-left: 각각 상단, 오른쪽, 하단, 왼쪽 테두리를 설정합니다.

예제:

1
    .example1 {
2
        border-top: 2px solid #333;
3
        border-right: 1px dashed #555;
4
        border-bottom: 3px solid #777;
5
        border-left: 1px dotted #999;
6
        width: 200px;
7
        height: 200px;
8
    }

1
    <div class="example1"></div>

효과:

예제 효과

둥근 모서리

border-radius: 테두리의 둥근 모서리를 설정합니다.

예제:

1
    .example1 {
2
        border-radius: 10px;
3
        /* 모든 모서리에 10px 반지름 적용 */
4
        border: 1px solid black;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border-top-left-radius: 10px;
10
        border-top-right-radius: 20px;
11
        border-bottom-left-radius: 30px;
12
        border-bottom-right-radius: 40px;
13
        border: 1px solid black;
14
        width: 200px;
15
        height: 200px;
16
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

효과:

예제 효과

그림자

CSS의 그림자(box-shadow)는 요소 주위에 그림자 효과를 만드는 속성입니다. 그림자는 요소의 입체감을 향상시켜 페이지를 더 생동감 있게 보이게 할 수 있습니다. box-shadow 값 앞에 inset 키워드를 추가하면 내부 그림자를 만들 수 있습니다. 여러 box-shadow 값을 쉼표로 구분하여 여러 그림자 효과를 추가할 수 있습니다. 요소에 둥근 모서리가 있으면 그림자는 둥근 모서리에 맞게 적용됩니다.

그림자는 수평 오프셋, 수직 오프셋, 흐림 반지름, 그림자 색상 등 여러 매개변수를 가질 수 있습니다.

수평 오프셋(horizontal offset): 그림자의 수평 방향 오프셋.
수직 오프셋(vertical offset): 그림자의 수직 방향 오프셋.
흐림 반지름(blur radius): 그림자의 흐림 정도.
확산 반지름(spread radius): 그림자의 크기, 양수 값은 확대, 음수 값은 축소.
그림자 색상: 그림자의 색상.

예제:

1
    .base {
2
        border: 1px solid black;
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
8
    }
9
    .example2 {
10
        box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
11
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>

효과:

예제 효과

윤곽선

CSS의 윤곽선(outline)은 요소 주위에 추가할 수 있는 가시적 테두리로, 일반적으로 요소의 외부 가장자리를 강조하는 데 사용됩니다. 윤곽선은 레이아웃에 영향을 주지 않으며, 요소의 크기나 위치를 변경하지 않습니다. 윤곽선은 일반적으로 폼 요소의 포커스 시각화, 링크의 활성 상태 등에 사용됩니다.

outline-color: 윤곽선의 색상을 설정합니다.
outline-style: 윤곽선의 스타일을 설정합니다.
outline-width: 윤곽선의 너비를 설정합니다.
outline-offset: 윤곽선의 오프셋을 설정하며, 윤곽선과 테두리 사이의 간격입니다.

예제:

1
    .example1 {
2
        outline-color: blue;
3
        outline-style: dotted;
4
        outline-width: 2px;
5
        outline-offset: 5px;
6
        border: 1px solid red;
7
        width: 200px;
8
        height: 200px;
9
    }
10
    .example2 {
11
        outline: 2px solid green;
12
        border: 1px solid red;
13
        width: 200px;
14
        height: 200px;
15
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

효과:

예제 효과

테두리

테두리 속성

테두리 방향

둥근 모서리

그림자

윤곽선

댓글