CSS에서 내부 테두리 설정
-
box-sizing속성을 사용하여 CSS에서 내부 테두리 설정 -
box-shadow속성을 사용하여 CSS에서 내부 테두리 설정 -
outline및outline-offset속성을 사용하여 CSS에서 내부 테두리 설정
이 기사에서는 CSS에서 컨테이너 내부에 테두리를 설정하는 방법을 소개합니다. 컨테이너 내부의 경계를 내부 경계라고 합니다.
box-sizing 속성을 사용하여 CSS에서 내부 테두리 설정
컨테이너 내부의 요소에 테두리나 패딩을 추가하면 컨테이너의 크기가 커집니다. 크기는 초기 크기와 다릅니다. 문제를 제거하기 위해 컨테이너에 내부 테두리를 추가할 수 있습니다. 내부 테두리는 테두리와 아웃라인 속성 또는 요소 사이에 생성되는 공간입니다.
문단과 머리글의 표 내용, 이미지, 텍스트에 내부 테두리를 적용할 수 있습니다. 내부 테두리는 직사각형, 정사각형, 원형 등과 같은 모든 모양이 될 수 있습니다. 내부 테두리는 컨테이너의 크기를 늘리지 않으며 미리 정의된 크기는 일정합니다.
box-sizing 속성을 사용하여 CSS에서 내부 테두리를 만들 수 있습니다. box-sizing 속성을 border-box로 설정하면 컨테이너 차원 내에 테두리와 패딩이 포함됩니다.
예를 들어 box-sizing 속성을 border-box로 설정하여 div 스타일을 지정합니다. div의 높이와 너비를 200px로 설정합니다. 다음으로 10px 너비와 red 색상의 단색 테두리를 만듭니다. 그런 다음 background 속성을 green으로 설정합니다.
여기에서 200x200 px 크기의 div를 만들었습니다. 10px의 테두리를 추가해도 컨테이너의 크기는 변경되지 않았습니다. 테두리는 컨테이너 내에 있습니다. 따라서 box-sizing 속성을 사용하여 CSS에서 내부 테두리를 설정할 수 있습니다.
예제 코드:
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 200px;
height: 200px;
border: 10px solid red;
background: green;
}
<div></div>
box-shadow 속성을 사용하여 CSS에서 내부 테두리 설정
내부 테두리를 얻는 또 다른 방법은 box-shadow CSS 속성을 사용하는 것입니다. 속성을 사용하여 그림자가 아닌 내부 테두리처럼 보이는 삽입 그림자를 지정할 수 있습니다.
box-shadow에 대한 수평 및 수직 오프셋 값을 처음 두 값으로 설정할 수 있습니다. 다른 세 값인 흐림, 퍼짐 및 색상은 선택 사항입니다. 확산 반경을 원하는 값으로 설정하여 그림자를 만들 수 있습니다. 그런 다음 삽입 옵션을 사용하면 외부 그림자가 내부 그림자로 변경됩니다. 그림자가 컨테이너 안에 떨어집니다. 마지막으로 내부 테두리처럼 보입니다.
예를 들어 div의 height 및 width 속성을 200px로 설정합니다. 배경색을 녹색으로 설정합니다. 그런 다음 box-shadow 속성을 사용하고 처음 세 가지 옵션을 0px로 설정합니다. 네 번째 옵션인 확산 반경을 10px로 설정합니다. 색상을 빨간색으로 지정하고 삽입 옵션을 설정합니다.
여기에서 box-shadow 속성을 사용하여 10px 너비의 내부 테두리를 만들었습니다.
예제 코드:
div {
width:200px;
height:200px;
background-color:green;
box-shadow:0px 0px 0px 10px red inset;
}
<div></div>
outline 및 outline-offset 속성을 사용하여 CSS에서 내부 테두리 설정
CSS의 outline 및 outline-offset 속성을 사용하여 내부 테두리를 설정할 수 있습니다. outline 속성은 요소의 테두리 크기, 테두리 유형 및 테두리 색상을 설명합니다. outline-offset 속성은 테두리와 외곽선 요소 사이의 거리 또는 공간을 나타냅니다.
예를 들어 div의 높이와 너비를 200px로 설정합니다. 배경으로 녹색을 지정합니다. 다음으로 outline을 5px solid red로 설정합니다. 그런 다음 outline-offset을 -5px로 설정합니다.
여기에서 outline 속성은 컨테이너에 외부 테두리를 만듭니다. outline-offset 속성을 사용하고 경계 너비의 음수 값으로 설정하면 외부 경계가 내부 경계로 변경됩니다.
예제 코드:
div {
width: 200px;
height: 200px;
background: green;
outline: 5px solid red;
outline-offset: -5px;
}
<div></div>