Chrome에서 서드 파티 쿠키 지원 중단에 대비하세요. 지금 사이트에 손상이 있는지 테스트합니다.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

테두리

CSS 팟캐스트 - 016: 테두리

box 모델 모듈에서는 박스 모델의 각 섹션을 설명하는 프레임 비유를 고려했습니다.

3개의 사진 액자가 나란히 놓여 있습니다.
중간 프레임에는 그 위에 상자 모델 섹션이 있습니다.

테두리 상자는 상자의 프레임이며 border 속성은 거의 모든 스타일로 프레임을 만들 수 있는 다양한 옵션을 제공합니다.

테두리 속성

개별 border 속성을 사용하여 테두리의 다양한 부분에 스타일을 지정할 수 있습니다.

브라우저 지원

소스

스타일

테두리를 표시하려면 border-style를 정의해야 합니다. 다음과 같은 몇 가지 옵션 중에서 선택할 수 있습니다.

ridge, inset, outset, groove 스타일을 사용하면 브라우저에서 두 번째로 표시되는 색상의 테두리 색상을 어둡게 하여 대비와 깊이를 제공합니다. 이 동작은 브라우저마다, 특히 black와 같은 어두운 색상의 경우 다를 수 있습니다. Chrome에서는 이러한 테두리 스타일이 단색으로 표시되고 Firefox에서는 밝아진 후 두 번째 색상이 더 짙어집니다.

브라우저 동작은 테두리 스타일에 따라 다를 수 있으므로 여러 브라우저에서 사이트를 테스트하는 것이 중요합니다. 이러한 차이점의 일반적인 예는 각 브라우저가 dotted 및 dashed 스타일을 렌더링하는 방법입니다.

테두리가 표시되는 방식의 미묘한 차이를 보여주는 Chrome, Firefox, Safari의 테두리 데모 — Chrome, Firefox, Safari에서 테두리가 표시됩니다.

상자의 양쪽에 테두리 스타일을 설정하려면 border-top-style, border-right-style, border-left-style, border-bottom-style를 사용하면 됩니다.

약식

margin 및 padding와 마찬가지로 border 약식 속성을 사용하여 하나의 선언에서 테두리의 모든 부분을 정의할 수 있습니다.

.my-element {
    border: 1px solid red;
}

border 약식의 값 순서는 border-width, border-style, border-color입니다.

색상

상자의 모든 면이나 border-color을 사용하여 각 면의 색상을 설정할 수 있습니다. 기본적으로 상자의 현재 텍스트 색상인 currentColor을 사용합니다. 즉, 너비와 같은 테두리 속성만 선언하면 명시적으로 설정하지 않는 한 색상은 계산된 값이 됩니다.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

상자의 각 면에 테두리 색상을 설정하려면 border-top-color, border-right-color, border-left-color, border-bottom-color를 사용합니다.

너비

테두리의 너비는 선의 두께이며 border-width로 제어됩니다. 기본 테두리 너비는 medium입니다. 그러나 스타일을 정의하지 않는 한 표시되지 않습니다. thin 및 thick와 같은 다른 이름이 지정된 너비를 사용할 수 있습니다.

border-width 속성에는 px, em, rem 또는 %와 같은 길이 단위도 허용됩니다. 상자의 양쪽에 테두리 너비를 설정하려면 border-top-width, border-right-width, border-left-width, border-bottom-width를 사용합니다.

논리 특성

논리적 속성 모듈에서 명시적인 상단, 오른쪽, 하단, 왼쪽이 아닌 블록 흐름과 인라인 흐름을 참조하는 방법을 알아봤습니다.

테두리가 있는 이 기능도 사용할 수 있습니다.

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

이 예에서 .my-element의 모든 변에는 현재 텍스트 색상인 점선 테두리 2px가 있는 것으로 정의된 모든 면이 있습니다. 그런 다음 inline-end 테두리가 빨간색 실선 2px로 정의됩니다. 즉, 영어와 같이 왼쪽에서 오른쪽으로 읽는 언어에서는 상자 오른쪽에 빨간색 테두리가 표시됩니다. 아랍어처럼 오른쪽에서 왼쪽으로 쓰는 언어에서는 상자 왼쪽에 빨간색 테두리가 표시됩니다.

브라우저 지원 여부는 테두리의 논리적 속성에 따라 다르므로 사용하기 전에 지원 여부를 확인해야 합니다.

테두리 반경

상자 모서리를 둥글게 만들려면 border-radius 속성을 사용합니다.

.my-element {
    border-radius: 1em;
}

이렇게 하면 상자의 각 모서리에 일관된 테두리가 추가됩니다. 다른 테두리 속성과 마찬가지로 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius를 사용하여 각 면의 테두리 반경을 정의할 수 있습니다.

약식으로 각 모서리의 반경을 지정할 수도 있습니다. 이 순서는 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단 순입니다.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

모서리의 단일 값을 정의하면 테두리 반경이 세로 및 가로 측면의 두 부분으로 나뉘기 때문에 다른 약식을 사용하게 됩니다. 즉, border-top-left-radius: 1em를 설정할 때 왼쪽 상단 상단 반경과 왼쪽 상단 왼쪽 반경을 설정하게 됩니다.

다음과 같이 모서리에 따라 두 속성을 모두 정의할 수 있습니다.

.my-element {
    border-top-left-radius: 1em 2em;
}

그러면 1em의 border-top-left-top 값과 2em의 border-top-left-left 값이 추가됩니다. 이렇게 하면 왼쪽 상단 테두리 반경이 기본 원형 반경이 아닌 타원형 반경으로 변환됩니다.

표준 값 뒤에 /를 사용하여 타원형 값을 정의함으로써 border-radius 약식에서 이러한 값을 정의할 수 있습니다. 이를 통해 창의력을 발휘하고 복잡한 도형을 만들 수 있습니다.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

테두리 이미지

CSS에서 획 기반 테두리를 사용하지 않아도 됩니다. 또한 border-image를 사용하여 모든 유형의 이미지를 사용할 수 있습니다. 이 약식 속성을 사용하면 소스 이미지, 이미지 슬라이스 방법, 이미지 너비, 테두리가 가장자리에서 떨어진 거리, 반복 방법을 설정할 수 있습니다.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

border-image-width 속성은 border-width와 같습니다. 테두리 이미지의 너비를 설정하는 방법입니다. border-image-outset 속성을 사용하면 테두리 이미지와 이 이미지가 둘러싸는 상자 사이의 거리를 설정할 수 있습니다.

`border-image-source`

border-image-source(테두리 이미지의 소스)는 CSS 그라데이션이 포함된 유효한 이미지의 url가 될 수 있습니다.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

`border-image-slice`

border-image-slice 속성은 이미지를 4개의 분할 선으로 구성된 9개 부분으로 분할할 수 있는 유용한 속성입니다. 이는 상단, 오른쪽, 하단, 왼쪽 오프셋 값을 정의하는 margin 약식 메뉴와 같이 작동합니다.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

데모에 사용된 이미지 4개 조각이 파란색 선으로 표시되어 있음

오프셋 값을 정의하면 이미지의 모서리 4개, 가장자리 4개, 가운데 섹션으로 9개 섹션이 생성됩니다. 모서리는 테두리 이미지가 있는 요소의 모서리에 적용됩니다. 가장자리는 요소의 가장자리에 적용됩니다. border-image-repeat 속성은 이러한 가장자리가 공간을 채우는 방식을 정의하며 border-image-width 속성은 슬라이스의 크기를 제어합니다.

마지막으로 fill 키워드는 슬라이싱으로 남은 중간 섹션을 요소의 배경 이미지로 사용할지 여부를 결정합니다.

`border-image-repeat`

border-image-repeat는 CSS에 테두리 이미지를 반복할 방식을 지정하는 방법입니다. background-repeat와 동일하게 작동합니다.

초깃값은 stretch이며, 가능한 경우 소스 이미지를 확장하여 사용 가능한 공간을 채웁니다.
repeat 값은 소스 이미지의 가장자리를 최대한 많이 타일식으로 처리하며 이를 위해 가장자리 영역을 잘라낼 수 있습니다.
round 값은 반복과 동일하지만 이미지 가장자리 영역을 최대한 많이 맞춰 자르는 대신 이미지를 늘리고 반복해 매끄럽게 반복됩니다.
space 값도 반복과 동일하지만 이 값은 각 가장자리 영역 사이에 공간을 추가하여 매끄러운 패턴을 만듭니다.

학습 내용 확인하기

테두리에 관한 지식 테스트

기본 테두리 색상은 무엇인가요?

black

다시 시도해 보세요.

white

다시 시도해 보세요.

currentColor

이 특수 CSS 값은 계산된 text-color 값을 나타내며 기본 테두리 색상입니다.

historicColor

이렇게 구성되어 있습니다. 다시 시도해 보세요.

.my-element {
  border: solid hotpink;
}

테두리의 기본 너비는 얼마인가요?

1px

다시 시도해 보세요.

medium

🎉

solid

border-width 값이 아닌 border-style 값입니다.

border-inline: 1px solid에서 실행할 작업

왼쪽과 오른쪽에 테두리를 지정합니다 (라틴 레이아웃에서).

🎉

상단과 하단에 테두리를 넣습니다 (라틴 레이아웃에서).

영어와 같은 라틴어 레이아웃에서 border-block는 상단과 하단입니다.

안쪽에 테두리를 넣으세요.

다시 시도해 보세요.

첫 번째 줄에 테두리를 지정합니다.

다시 시도해 보세요.