CSS에서 내부 테두리 설정

내부 테두리란 테두리가 있어도 요소에 선언된 크기를 유지하는 것을 뜻할 수도 있고, 가장자리 안쪽에 보이는 선을 그리는 것을 뜻할 수도 있습니다. 첫 번째 목적에는 box-sizing: border-box를, 선명한 내부 선에는 box-shadow: inset을, 윤곽선을 안쪽으로 옮기려면 음수 outline-offset을 사용하세요.

box-sizing 속성으로 CSS에서 내부 테두리 설정하기

box-sizing: border-box를 사용하면 요소의 선언된 너비와 높이에 패딩과 테두리가 포함됩니다. 이 속성은 크기를 계산하는 방식을 제어할 뿐, 요소 안쪽에 별도의 선을 그리지는 않습니다. 10px 빨간 테두리가 있는 200px 정사각형을 만들려면 box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;을 사용하세요. 바깥쪽 상자의 크기는 200 × 200픽셀로 유지되고, 빨간 테두리는 그 영역의 일부를 차지합니다. 콘텐츠와 테두리 사이에 공간이 필요하면 padding을 추가하세요. 기본값인 content-box에서는 너비와 높이가 콘텐츠 영역을 기준으로 하므로 패딩과 테두리만큼 바깥쪽 크기가 커집니다. border-box는 정해진 레이아웃 크기에 맞춰야 하는 구성 요소에 유용하지만, 적절한 테두리 너비를 선택하는 일을 대신하지는 않습니다.

다음의 자체 실행 가능한 JavaScript 예제는 같은 크기와 테두리가 적용된 HTML을 출력합니다.

const html = '<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>';
console.log(html);

<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>

출력된 마크업을 HTML 문서에 붙여넣으면 크기가 고정된 정사각형을 확인할 수 있습니다.

box-shadow 속성으로 CSS에서 내부 테두리 설정하기

요소의 레이아웃 크기를 바꾸지 않고 안쪽에 선을 표시하려면 box-shadow에 inset을 사용하세요. 초록색 200px 정사각형에 10px 빨간 선을 넣으려면 다음 CSS를 <div>Content</div>에 적용합니다. <div style="width: 200px; height: 200px; background: green; box-shadow: inset 0 0 0 10px red;">Content</div>. 그림자 값 중 첫 번째와 두 번째는 각각 가로와 세로 오프셋입니다. 여기서는 둘 다 0이므로 선이 모든 면에 균일하게 나타납니다. 세 번째 값은 흐림 정도이며, 가장자리를 선명하게 하도록 0으로 설정했습니다. 네 번째 값은 확산 정도로, 이 예제에서는 선의 두께를 정합니다. inset은 그림자를 상자 안쪽에 그립니다. 색상이나 확산 값을 바꾸면 모양을 조정할 수 있으며, 흐림과 확산 값은 둘 다 기본값이 0이므로 적절한 경우 생략해도 됩니다. 그림자는 레이아웃 공간을 차지하지 않으므로 주변 요소의 위치는 그대로 유지됩니다. 테두리도 함께 설정하면 테두리는 남아 있으며 내부 그림자의 일부를 가릴 수 있습니다.

outline 및 outline-offset 속성으로 CSS에서 내부 테두리 설정하기

윤곽선은 요소 주위에 그려지며 레이아웃 공간을 차지하지 않습니다. 초록색 배경의 200px 정사각형 <div>Content</div>에 outline: 5px solid red; outline-offset: -5px;을 설정하면 빨간 윤곽선을 안쪽으로 옮길 수 있습니다. 음수 오프셋은 윤곽선을 바깥쪽 가장자리에서 콘텐츠 쪽으로 끌어당기지만, 윤곽선을 테두리로 바꾸지는 않습니다. 윤곽선은 요소 위에 그려지므로 가장자리 근처의 텍스트나 다른 콘텐츠와 겹칠 수 있습니다. 겹침이 허용되는 경우 이 방법을 사용하고, 요소의 그려진 영역 안에 머무는 내부 선이 필요하다면 box-shadow를 선택하세요.