코딩스쿨

CSS Borders

CSS Borders: 웹 페이지에서 테두리 설정하는 방법

CSS에서는 HTML 요소의 테두리를 다양한 방식으로 설정할 수 있습니다. 테두리는 요소의 강조, 구분 또는 스타일링을 위해 자주 사용되며, 다양한 스타일, 굵기, 색상을 적용할 수 있습니다. 이 자료에서는 CSS에서 테두리 속성을 사용하여 웹 페이지의 디자인을 더욱 풍부하게 만드는 방법을 설명합니다.

1. CSS 테두리 속성 (Border Properties)

CSS는 테두리를 설정하기 위해 여러 속성을 제공합니다. 이러한 속성들은 각각 테두리의 스타일, 굵기, 색상을 제어하며, 전체 테두리나 각 방향(위, 아래, 왼쪽, 오른쪽)별로 개별적으로 설정할 수 있습니다.

주요 CSS 테두리 속성은 다음과 같습니다:

border: 테두리 스타일, 색상, 두께를 한 번에 설정하는 단축 속성.
border-width: 테두리의 두께를 설정합니다.
border-style: 테두리의 스타일을 설정합니다.
border-color: 테두리의 색상을 설정합니다.
border-radius: 테두리 모서리를 둥글게 설정합니다.

2. `border` 단축 속성

border 속성은 테두리의 스타일, 두께, 색상을 한 줄로 설정할 수 있는 단축 속성입니다. 이 속성을 사용하면 간단하게 테두리의 여러 속성을 한 번에 적용할 수 있습니다.

예시:

div {
    border: 2px solid red;
}

위 코드는 굵기 2px, 실선(solid), 빨간색(red) 테두리를 설정합니다.

구문:

border: [border-width] [border-style] [border-color];

3. `border-width` 속성

border-width 속성은 테두리의 두께를 설정하는 데 사용됩니다. 이 속성은 픽셀(px), em, rem 등의 단위로 지정할 수 있으며, 기본값은 medium입니다.

예시:

p {
    border-width: 5px;
    border-style: solid;
}

위 코드는 5px 두께의 실선 테두리를 설정합니다.

값을 지정하는 방법:

thin: 얇은 테두리
medium: 중간 두께 (기본값)
thick: 굵은 테두리
픽셀 값: 예를 들어, 2px, 10px

각 방향별로 두께 지정:

p {
    border-top-width: 5px;
    border-right-width: 10px;
    border-bottom-width: 5px;
    border-left-width: 10px;
}

각 방향별로 테두리의 두께를 다르게 지정할 수 있습니다.

4. `border-style` 속성

border-style 속성은 테두리의 스타일을 지정합니다. 이 속성에는 여러 가지 스타일이 있으며, 이를 통해 테두리의 외관을 조정할 수 있습니다.

자주 사용되는 테두리 스타일:

solid: 실선
dashed: 점선
dotted: 점으로 이루어진 테두리
double: 이중선
groove: 3D 그루브 모양
ridge: 3D 돌출된 모양
inset: 요소가 안으로 들어간 것처럼 보이는 테두리
outset: 요소가 밖으로 나와 있는 것처럼 보이는 테두리
none: 테두리 없음
hidden: 테두리 숨김

예시:

h1 {
    border-style: dashed;
}

위 코드는 점선(dashed) 스타일의 테두리를 설정합니다.

5. `border-color` 속성

border-color 속성은 테두리의 색상을 설정하는 속성입니다. 색상은 색상 이름, 16진수 값, RGB, HSL 값을 사용할 수 있습니다.

예시:

div {
    border: 2px solid;
    border-color: blue;
}

위 코드는 파란색(blue) 테두리를 설정합니다.

각 방향별로 다른 색상 지정:

p {
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
}

각 방향별로 다른 색상을 지정할 수 있습니다.

6. `border-radius` 속성

border-radius 속성은 모서리를 둥글게 만드는 데 사용됩니다. 이 속성은 단순한 직사각형 요소를 부드럽고 둥근 모양으로 변형할 수 있으며, 완전한 원을 만들 수도 있습니다.

예시:

button {
    border: 2px solid black;
    border-radius: 10px;
}

위 코드는 모서리가 둥근 버튼을 생성합니다. border-radius 값을 증가시키면 더 둥근 모서리가 만들어집니다.

원형 만들기:

img {
    border-radius: 50%;
}

위 코드는 원형 이미지를 만들 때 사용되며, 테두리를 둥글게 설정해 이미지를 원형으로 보여줍니다.

7. 각 방향별로 테두리 설정

border-top, border-right, border-bottom, border-left 속성을 사용하여 각 방향별로 개별적인 테두리를 설정할 수 있습니다.

예시:

div {
    border-top: 5px solid red;
    border-right: 3px dotted green;
    border-bottom: 5px double blue;
    border-left: 3px solid yellow;
}

이 코드는 요소의 상단, 우측, 하단, 좌측에 각각 다른 스타일과 두께, 색상의 테두리를 설정합니다.

8. `border` 단축 속성

border 속성을 사용하면, 여러 속성을 한 줄로 설정할 수 있습니다. 이 속성은 두께, 스타일, 색상을 한 번에 정의할 수 있습니다.

예시:

div {
    border: 3px dashed #ff5733;
}

위 코드는 3px 두께의 주황색 점선 테두리를 설정합니다.

구문:

border: [border-width] [border-style] [border-color];

이렇게 한 줄로 모든 속성을 설정할 수 있어 코드를 간결하게 작성할 수 있습니다.

9. 자주 사용되는 테두리 예제

단순한 테두리:

p {
    border: 2px solid black;
}

점선 테두리:

div {
    border: 1px dashed gray;
}

둥근 모서리:

button {
    border: 1px solid blue;
    border-radius: 5px;
}

이중 테두리:

section {
    border: 4px double green;
}

원형 테두리:

img {
    border: 2px solid black;
    border-radius: 50%;
}

코딩 스쿨 CSS