CSS 개요는 단순한 테두리 이상입니다.
CSS 개요 속성은 혼란스러운 속성입니다. 처음에 그것에 대해 배울 때 국경 재산과 어떻게 다른지 이해하는 것은 어렵습니다. W3C 에서는 다음과 같은 차이점이 있다고 설명합니다.
- 외곽선은 공간을 차지하지 않습니다.
- 외곽선은 직사각형이 아닐 수 있습니다.
개요는 공간을 차지하지 않습니다.
이 진술 자체는 혼란 스럽습니다. 웹 페이지의 객체가 웹 페이지의 공간을 차지하지 않는 이유는 무엇입니까? 그러나 웹 페이지를 양파처럼 생각하면 페이지의 각 항목이 다른 항목 위에 겹쳐서 표시 될 수 있습니다. outline 속성은 항상 요소의 상자 위에 위치하기 때문에 공간을 차지하지 않습니다.
윤곽선이 요소 주위에 배치되면 해당 요소가 페이지에 배치되는 방법에 아무런 영향을 미치지 않습니다. 요소의 크기 나 위치는 변경되지 않습니다. 요소에 윤곽선을 추가하면 해당 요소의 윤곽선이없는 것처럼 동일한 양의 공간을 차지합니다. 이것은 국경에 해당하지 않습니다. 요소의 테두리가 요소의 바깥 쪽 폭과 높이에 추가됩니다. 따라서 너비가 50 픽셀이고 테두리가 2 픽셀 인 이미지 는 54 픽셀 (각 측면 테두리 당 2 픽셀)을 차지합니다. 2 픽셀 외곽선이있는 동일한 이미지는 페이지에서 50 픽셀 너비 밖에 차지하지 않으며 외곽선은 이미지의 바깥 쪽 가장자리에 표시됩니다.
윤곽선이 비 직사각형 일 수 있음
당신이 생각하기 시작하기 전에 "멋진, 지금 나는 원을 그릴 수 있습니다!" 다시 생각 해봐. 이 진술은 당신이 생각하는 것보다 다른 의미를 가지고 있습니다. 요소에 테두리를 추가하면 브라우저는 요소를 하나의 거대한 직사각형 상자처럼 해석합니다. 상자가 여러 줄로 나뉘면 상자가 닫히지 않았기 때문에 브라우저는 가장자리를 열어 두었습니다. 마치 브라우저가 무한히 넓은 화면의 경계선을 보듯이 - 그 경계선이 하나의 연속 직사각형이 될 정도로 넓습니다.
반대로 윤곽선 속성은 가장자리를 고려합니다. 윤곽선이 지정된 요소가 여러 줄에 걸쳐 있으면 윤곽선이 줄 끝에서 닫히고 다음 줄에서 다시 열립니다. 가능한 경우 외곽선도 완전하게 연결되어 직사각형이 아닌 모양을 만듭니다.
개요 속성 사용
개요 속성을 가장 잘 사용하는 방법 중 하나는 검색어를 강조 표시하는 것입니다. 많은 사이트에서 배경색을 사용하지만 개요 속성을 사용할 수도 있고 페이지에 추가 간격을 추가하는 것에 대해 걱정할 필요가 없습니다.
outline-color 속성은 윤곽선 색상을 현재 배경의 역상으로 만드는 "invert"라는 용어를 허용합니다. 이렇게하면 어떤 색상이 사용 되는지 알 필요없이 동적 웹 페이지의 요소를 강조 표시 할 수 있습니다.
또한 outline 속성을 사용하여 활성 링크 주위의 점선을 제거 할 수 있습니다. CSS-Tricks의이 기사에서는 점선으로 된 개요를 제거하는 방법을 보여줍니다.