css 외곽선

css out-line type

CSS에서 외곽선 속성은 경계 속성과 유사하게 element 주위에 경계를 추가하는 데 사용된다. 그러나 아웃라인 특성은 페이지의 공간을 차지하지 않으며 다른 element의 레이아웃에 영향을 미치지 않는다는 점에서 보더 특성과 다르다.

아웃라인 속성은 보더 속성과 동일한 방식으로 element에 보더를 추가하는 데 사용할 수 있다.

p {
    outline: 1px solid black;
}

이렇게 하면 모든 <p> element 주위에 1픽셀 너비의 검은색 solid 테두리가 추가된다.

또한 윤곽선 색상, 윤곽선 스타일 및 윤곽선 너비 특성을 개별적으로 지정할 수 있다.

p {
    outline-color: red;
    outline-style: dotted;
    outline-width: 2px;
}

이렇게 하면 모든 <p> element 주위에 2픽셀 너비의 빨간색 점선 테두리가 추가된다.

아웃라인-오프셋 특성을 사용하여 아웃라인과 아웃라인이 둘러싸고 있는 element 사이에 공간을 만들 수도 있다.

p {
    outline: 1px solid black;
    outline-offset: 10px;
}

아웃라인과 <p> element 사이에 10px 공간이 생성된다.
개요 속성이 모든 브라우저에서 광범위하게 지원되는 것은 아니다

div border css

CSS에서 보더 속성은 element 주위에 보더를 추가하는 데 사용된다. 테두리 속성은 <div> element를 포함하여 HTML element에 테두리를 추가하는 데 사용할 수 있다.

테두리 속성은 윤곽선 속성과 동일한 방식으로 element에 테두리를 추가하는 데 사용할 수 있다.

div {
    border: 1px solid black;
}

이것은 모든 element 주변의 모든 element 주위에 하나의 픽셀을 추가할 것 이다.

또한 색,  속성을 개별적으로 지정할 수 있다.

div {
    border-color: red;
    border-style: dotted;
    border-width: 2px;
}

그러면 모든 <div> element 주위에 2픽셀 너비의 빨간색 점선 테두리가 추가된다.

테두리 속성을 사용하여 element의 특정 측면에 테두리를 추가할 수도 있다.

div {
    border-top: 1px solid black;
    border-right: 2px dashed blue;
    border-bottom: 3px dotted green;
    border-left: 4px double orange;
}

그러면 모든 <div> element 주위에 2픽셀 너비의 빨간색 점선 테두리가 추가된다.

테두리 속성을 사용하여 element의 특정 측면에 테두리를 추가할 수도 있다.

div {
    border: 1px solid black;
    border-radius: 10px;
}

이렇게 하면 모든 <div> element에 대해 10px 둥근 모서리가 있는 1px solid 검은색 테두리가 생성된다.

경계 특성을 사용할 때는 padding 및 margin 특성을 사용할 수 있다