CSS 팟캐스트 - 016: 테두리
box 모델 모듈에서는 박스 모델의 각 섹션을 설명하는 프레임 비유를 고려했습니다.
테두리 상자는 상자의 프레임이며 border
속성은 거의 모든 스타일로 프레임을 만들 수 있는 다양한 옵션을 제공합니다.
테두리 속성
개별 border
속성을 사용하여 테두리의 다양한 부분에 스타일을 지정할 수 있습니다.
스타일
테두리를 표시하려면 border-style
를 정의해야 합니다.
다음과 같은 몇 가지 옵션 중에서 선택할 수 있습니다.
ridge
, inset
, outset
, groove
스타일을 사용하면 브라우저에서 두 번째로 표시되는 색상의 테두리 색상을 어둡게 하여 대비와 깊이를 제공합니다.
이 동작은 브라우저마다, 특히 black
와 같은 어두운 색상의 경우 다를 수 있습니다.
Chrome에서는 이러한 테두리 스타일이 단색으로 표시되고 Firefox에서는 밝아진 후 두 번째 색상이 더 짙어집니다.
브라우저 동작은 테두리 스타일에 따라 다를 수 있으므로
여러 브라우저에서 사이트를 테스트하는 것이 중요합니다.
이러한 차이점의 일반적인 예는 각 브라우저가 dotted
및 dashed
스타일을 렌더링하는 방법입니다.
상자의 양쪽에 테두리 스타일을 설정하려면 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개, 가운데 섹션으로 9개 섹션이 생성됩니다.
모서리는 테두리 이미지가 있는 요소의 모서리에 적용됩니다.
가장자리는 요소의 가장자리에 적용됩니다.
border-image-repeat
속성은 이러한 가장자리가 공간을 채우는 방식을 정의하며 border-image-width
속성은 슬라이스의 크기를 제어합니다.
마지막으로 fill
키워드는 슬라이싱으로 남은 중간 섹션을 요소의 배경 이미지로 사용할지 여부를 결정합니다.
border-image-repeat
border-image-repeat
는 CSS에 테두리 이미지를 반복할 방식을 지정하는 방법입니다.
background-repeat
와 동일하게 작동합니다.
- 초깃값은
stretch
이며, 가능한 경우 소스 이미지를 확장하여 사용 가능한 공간을 채웁니다. repeat
값은 소스 이미지의 가장자리를 최대한 많이 타일식으로 처리하며 이를 위해 가장자리 영역을 잘라낼 수 있습니다.round
값은 반복과 동일하지만 이미지 가장자리 영역을 최대한 많이 맞춰 자르는 대신 이미지를 늘리고 반복해 매끄럽게 반복됩니다.space
값도 반복과 동일하지만 이 값은 각 가장자리 영역 사이에 공간을 추가하여 매끄러운 패턴을 만듭니다.
학습 내용 확인하기
테두리에 관한 지식 테스트
기본 테두리 색상은 무엇인가요?
black
white
currentColor
text-color
값을 나타내며 기본 테두리 색상입니다.historicColor
.my-element { border: solid hotpink; }
테두리의 기본 너비는 얼마인가요?
1px
medium
solid
border-width
값이 아닌 border-style
값입니다.border-inline: 1px solid
에서 실행할 작업
border-block
는 상단과 하단입니다.