CSS 개요

웹 요소를 디자인할 때 페이지의 요소 주위에 윤곽선을 표시할 수 있습니다. 예를 들어 강조 표시하려는 상자를 디자인하는 경우 상자 주위에 색상 윤곽선을 추가하여 요소에 주의를 끌 수 있습니다.

여기에서 CSS 아웃라인 속성이 필요합니다. 아웃라인 속성을 사용하면 요소 테두리 외부에 선을 추가하여 웹 페이지에서 요소를 눈에 띄게 만들 수 있습니다.

이 튜토리얼에서는 예제와 함께 아웃라인의 기본 사항과 CSS 아웃라인 속성을 사용하여 웹 요소의 테두리 외부에 선을 그리는 방법에 대해 설명합니다. 이 튜토리얼을 다 읽고 나면 CSS 아웃라인 속성을 사용하여 아웃라인을 그리는 전문가가 될 것입니다.

CSS 개요

윤곽선은 테두리 외부의 요소 주위에 그려진 선입니다. Outline 속성의 가장 일반적인 사용 사례는 HTML 요소를 강조 표시하는 것입니다.

다음은 CSS에서 윤곽선이 적용되는 방식을 그래픽으로 나타낸 것입니다.

이 그래픽은 윤곽선이 웹 요소의 콘텐츠와 테두리 외부에 모두 나타나는 것을 보여줍니다. 아웃라인이 웹 요소의 가장 바깥쪽 레이어임을 알 수 있습니다.

CSS에서 테두리와 윤곽선 사이에는 몇 가지 차이점이 있습니다.

먼저, 우리가 논의한 바와 같이 외곽선은 테두리와 달리 요소 외부에 그려집니다. 이는 우리가 선언한 개요가 웹 페이지의 다른 콘텐츠와 겹칠 수 있음을 의미합니다. 그러나 윤곽선은 공간을 차지하지 않으므로 요소를 겹칠 수 있다는 점 외에는 주변 요소에 영향을 주지 않습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

또한 아웃라인은 요소 차원의 일부가 아닙니다. 즉, 지정한 윤곽선은 요소의 높이와 너비 값에 영향을 주지 않습니다.

테두리와 달리 윤곽선은 각 가장자리에 대해 다른 테두리 너비, 색상 또는 스타일을 가질 수 없습니다. 따라서 요소 주위에 지정하는 윤곽선은 모든 가장자리에서 일관되게 나타납니다.

CSS의 테두리에 대해 자세히 알아보려면 CSS 테두리에 대한 가이드를 읽어보세요.

CSS 개요 속성

개요 속성은 웹 페이지의 요소에 개요를 추가하는 데 사용됩니다.

개요 속성은 웹 페이지에 개요가 표시되는 방식을 사용자 지정할 수 있는 네 가지 하위 속성의 약어입니다. 이러한 하위 속성은 다음과 같습니다.

outline-color:윤곽선의 색상을 설정합니다.
outline-style:윤곽선의 스타일을 설정합니다.
outline-width:윤곽선의 너비를 설정합니다.

아웃라인 속성의 구문은 다음과 같습니다.

outline: outline-color outline-style outline-width;

Outline 속성으로 지정된 값은 특정 순서로 나타날 필요가 없습니다.

아웃라인 속성이 작동하는 방식을 설명하기 위해 예제를 살펴보겠습니다. This is a box 텍스트가 포함된 상자 주위에 윤곽선을 만들고 싶다고 가정합니다. . 개요에는 다음과 같은 특성이 있어야 합니다.

윤곽선은 빨간색이어야 합니다.
윤곽선의 두께는 3픽셀이어야 합니다.
윤곽선은 점으로 표시되어야 합니다.

또한 윤곽선에 1px 두께의 검은색 테두리가 있기를 원합니다. 다음 코드를 사용하여 이 윤곽선과 테두리를 만들 수 있습니다.

<html>

<p class="outlineExample">This is a box.</p>
</html>

<style>
	
.outlineExample {
	width: 100px;
	border: black solid 1px;
	outline: red dotted 3px;
}
</style>

CSS 개요 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

코드에서 빨간색으로 표시되는 윤곽선과 검은색으로 표시되는 테두리를 모두 선언했습니다. 테두리는 1px 두께로 실선으로 표시되며 윤곽선은 빨간색 3px 두께로 점선으로 표시됩니다. 또한 상자의 너비를 100px로 설정했습니다.

보시다시피 윤곽선은 웹 요소의 테두리 외부에 나타납니다.

CSS 개요 하위 속성

CSS 개요 속성은 앞에서 논의한 것처럼 4개의 하위 속성을 줄인 것입니다. 이러한 각 하위 속성을 개별적으로 탐색하여 작동 방식을 설명하겠습니다.

CSS 윤곽 너비

outline-width 속성은 웹 요소에 적용되는 외곽선의 너비를 지정합니다.

Outline-width 속성은 다음 길이 값을 허용합니다.

얇음(기본값:1px)
중간(기본적으로 3px)
두꺼움(기본값:5px)
px, pt, cm, em, rem 또는 다른 CSS 길이 측정항목으로 지정된 크기

3px(중간) 파란색의 실선 윤곽선이 있는 상자를 디자인한다고 가정합니다. 또한 상자에 1px 너비의 검은색 테두리가 있기를 원합니다. 다음 코드를 사용하여 이 상자를 만들 수 있습니다.

<html>

<p class="outlineExample">This is a box.</p>
</html>

<style>

.outlineExample {
	width: 100px;
	border: black solid 1px;
	outline-style: solid;
	outline-color: red;
	outline-width: medium;
}
<style>

CSS 개요 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

이 예를 분해해 보겠습니다. CSS 코드에서 상자의 너비를 100px로 설정하고 상자 주위에 1px 너비의 검은색 단색 테두리를 정의했습니다.

그런 다음 세 가지 하위 속성을 사용하여 경계를 정의했습니다.

아웃라인 스타일 속성은 이 경우 솔리드인 아웃라인의 스타일을 설정하는 데 사용됩니다. Outline-color 속성은 이 예에서 빨간색인 윤곽선의 색상을 설정하는 데 사용됩니다. (outline-style 및 outline-color 하위 속성은 이 가이드 뒷부분에서 더 자세히 설명합니다.)

outline-width 속성은 medium으로 설정한 외곽선의 너비를 설정하는 데 사용됩니다. (기본적으로 3px입니다).

보시다시피 상자에는 3px 너비의 빨간색 윤곽선이 있습니다.

CSS 윤곽선 색상

Outline-color 속성을 사용하면 특정 웹 요소에 할당된 윤곽선의 색상을 설정할 수 있습니다. 속성은 다음 CSS 색상 유형을 허용합니다.

이름:blue과 같은 색상 이름 또는 pink
hex:16진수 색상(예:#f7f7f7)
rgb:rgb(102, 211, 56)와 같은 RGB 값
invert:윤곽선의 색상을 반전시킵니다.
hsl:hsl(0, 25%, 50%)과 같은 HSL 값

상자 주위에 파란색으로 표시되는 상자 주위에 윤곽선을 디자인한다고 가정합니다. 윤곽선의 두께는 3픽셀이어야 하며 단색 스타일을 사용해야 합니다. 다음 코드를 사용하여 이 윤곽선이 있는 상자를 만들 수 있습니다.

<html>

<p class="outlineExample">This is a box.</p>
<html>
  
<style>

.outlineExample {
	width: 100px;
	border: black solid 1px;
	outline-style: solid;
	outline-color: blue;
	outline-width: medium;
}
<style>

CSS 개요 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

이 예에서는 외곽선 색상 속성을 사용하여 외곽선 색상을 파란색으로 설정했습니다. 또한 Outline-style 속성을 사용하여 윤곽선의 스타일을 단색으로 설정하고 Outline-width 속성을 사용하여 윤곽선 너비의 스타일을 3px(또는 medium ).

코드에서 우리는 상자 너비를 100픽셀로 만들고 상자 주위에 1픽셀의 검은색 단색 테두리를 설정하여 윤곽선을 더 쉽게 볼 수 있도록 했습니다.

CSS 개요 스타일

아웃라인 스타일 속성을 사용하면 아웃라인 스타일을 설정할 수 있습니다.

이 속성은 다음 값을 허용합니다.

점선
대시
그루브
릿지
단단한
더블
삽입
시작
없음
숨겨진

따라서 ridge 값은 능선 윤곽선, inset을 만듭니다. 값은 삽입 윤곽선, groove를 생성합니다. 값은 홈 윤곽을 만드는 등의 작업을 수행합니다. 이러한 윤곽선이 어떻게 나타나는지 설명하기 위해 윤곽선이 있는 상자를 만들고 이러한 각 윤곽선 스타일을 상자에 개별적으로 적용해 보겠습니다. 상자의 기본 코드는 다음과 같습니다.

<html>

<p class="outlineExample">This is a box.</p>
<html>
  
<style>

.outlineExample {
	width: 300px;
	border: black solid 1px;
	outline-color: blue;
	outline-width: medium;
}
<style>

CSS 개요 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

이 코드는 너비가 3px인 파란색 윤곽선이 있는 상자를 만듭니다(medium 윤곽의 너비를 나타내는 값). 상자에는 너비가 1픽셀이고 너비가 200픽셀인 검은색 실선 테두리가 있습니다.

상자의 스타일을 설정하려면 outline-style 속성을 사용해야 합니다. 따라서 double이 있는 상자를 갖고 싶다면 개요 스타일, 다음 CSS 스타일을 사용할 수 있습니다.

<style>
  
.outlineExample {
outline-style: dotted;
}
<style>

다음은 Outline-style에서 허용하는 모든 잠재적 값과 함께 사용되는 이 속성의 결과를 보여주는 그래픽입니다.

CSS 아웃라인 오프셋

아웃라인 오프셋 속성은 아웃라인과 요소의 테두리 사이에 공간을 추가합니다.

Outline-offset 속성으로 정의된 요소의 외곽선과 테두리 사이의 공간은 투명합니다. 또한 outline-offset 속성은 독립 실행형이며 개요 약어로 사용할 수 없습니다.

1픽셀 너비의 검은색 테두리와 2픽셀 너비의 빨간색 테두리가 있는 상자를 디자인한다고 가정합니다. 외곽선은 경계선 바깥쪽에서 10px 오프셋되어야 합니다. 다음 코드를 사용하여 이러한 스타일로 상자를 만들 수 있습니다.

<html>

<p class="outlineExample">This is a box.</p>
<html>
  
<style>

.outlineExample {
	width: 200px;
	border: black solid 1px;
	outline: red 2px solid;
	outline-offset: 10px;
}
<style>

CSS 개요 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

이 예에서는 너비가 200픽셀이고 너비가 1픽셀인 검은색 실선 테두리와 너비가 2픽셀인 빨간색 실선 윤곽선이 있는 상자를 정의했습니다. 상자의 윤곽선은 10px 오프셋되어 있으며, 이는 각 경계 가장자리와 윤곽선 사이에 10px 간격이 있음을 의미합니다.

결론

CSS 아웃라인 속성은 웹 요소의 테두리 주위에 아웃라인을 정의하는 데 사용됩니다.

Outline 속성은 사용자 정의 윤곽선을 만드는 데 사용되는 세 가지 하위 속성인 outline-color, outline-width 및 outline-style의 약어입니다. 또한 outline-offset 속성은 요소의 외곽선과 테두리 사이에 공백을 추가하는 데 사용됩니다.

이 튜토리얼에서는 예제를 참조하여 CSS에서 아웃라인의 기본 사항, 아웃라인 속성과 그 하위 속성을 사용하는 방법, 아웃라인 오프셋 속성을 사용하는 방법에 대해 설명했습니다. 이제 CSS 전문가처럼 윤곽선 디자인을 시작하는 데 필요한 지식을 갖추게 되었습니다!