코딩스쿨

CSS Outline

CSS Outline: 웹 페이지에서 아웃라인 설정하는 방법

*CSS 아웃라인(Outline)**은 HTML 요소 주위에 그려지는 선으로, **테두리(Border)**와는 다른 개념입니다. 아웃라인은 요소를 강조하거나 포커스 상태를 나타낼 때 주로 사용되며, 테두리와 달리 요소의 크기에 영향을 주지 않습니다. 이 자료에서는 CSS 아웃라인 속성을 사용하여 웹 페이지에서 요소를 스타일링하는 방법을 다룹니다.

1. CSS 아웃라인 속성 (Outline Properties)

아웃라인 속성은 HTML 요소 주위에 선을 추가하는 데 사용됩니다. 아웃라인은 **테두리(Border)**와 달리 요소의 외부에 그려지며, 요소의 크기에 영향을 주지 않고, 중첩된 콘텐츠를 밀어내지 않습니다. 또한, 아웃라인은 네 방향(위, 오른쪽, 아래, 왼쪽)에 동일하게 적용됩니다.

주요 CSS 아웃라인 속성은 다음과 같습니다:

outline: 아웃라인의 스타일, 두께, 색상을 한 번에 설정하는 단축 속성.
outline-width: 아웃라인의 두께를 설정합니다.
outline-style: 아웃라인의 스타일을 설정합니다.
outline-color: 아웃라인의 색상을 설정합니다.
outline-offset: 아웃라인과 요소 사이의 간격을 설정합니다.

2. `outline` 단축 속성

outline 속성은 아웃라인의 스타일, 두께, 색상을 한 줄로 설정할 수 있는 단축 속성입니다. 이 속성을 사용하면 코드가 간결해지며, 아웃라인을 빠르게 지정할 수 있습니다.

예시:

button {
    outline: 3px solid red;
}

위 코드는 3px 두께의 빨간색 실선 아웃라인을 버튼 요소에 적용합니다.

구문:

outline: [outline-width] [outline-style] [outline-color];

3. `outline-width` 속성

outline-width 속성은 아웃라인의 두께를 설정하는 데 사용됩니다. 두께는 픽셀(px) 값으로 지정하거나, thin, medium, thick 같은 키워드를 사용할 수 있습니다.

예시:

p {
    outline-width: 5px;
    outline-style: solid;
}

위 코드는 5px 두께의 실선 아웃라인을 설정합니다.

값을 지정하는 방법:

thin: 얇은 아웃라인
medium: 중간 두께 (기본값)
thick: 굵은 아웃라인
픽셀 값: 예를 들어, 2px, 10px 등

4. `outline-style` 속성

outline-style 속성은 아웃라인의 스타일을 설정하는 속성입니다. 이 속성에는 다양한 스타일을 지정할 수 있습니다.

자주 사용되는 아웃라인 스타일:

solid: 실선
dashed: 점선
dotted: 점으로 이루어진 아웃라인
double: 이중선
groove: 3D 그루브 모양
ridge: 3D 돌출된 모양
inset: 요소가 안으로 들어간 것처럼 보이는 아웃라인
outset: 요소가 밖으로 나와 있는 것처럼 보이는 아웃라인
none: 아웃라인 없음

예시:

input:focus {
    outline-style: dashed;
}

위 코드는 점선(dashed) 스타일의 아웃라인을 적용합니다. 주로 포커스된 상태의 입력 필드에 적용하는 데 유용합니다.

5. `outline-color` 속성

outline-color 속성은 아웃라인의 색상을 설정하는 속성입니다. 색상은 색상 이름, 16진수 값, RGB, HSL 값을 사용할 수 있습니다.

예시:

a {
    outline: 2px solid;
    outline-color: blue;
}

위 코드는 파란색(blue) 아웃라인을 설정한 예시입니다.

다중 아웃라인 색상 지정:

div {
    outline-color: rgba(255, 0, 0, 0.5); /* 반투명한 빨간색 */
}

위 코드는 50% 투명한 빨간색 아웃라인을 설정합니다.

6. `outline-offset` 속성

outline-offset 속성은 아웃라인과 요소 사이의 간격을 설정하는 속성입니다. 기본적으로 아웃라인은 요소의 외부 바로 옆에 그려지지만, 이 속성을 사용해 간격을 벌릴 수 있습니다.

예시:

button {
    outline: 3px solid green;
    outline-offset: 10px;
}

위 코드는 아웃라인을 요소에서 10px 떨어진 위치에 설정합니다. 이는 요소와 아웃라인 사이에 공간을 만들고, 더 강조된 효과를 줍니다.

7. 아웃라인과 테두리의 차이점

*아웃라인(Outline)**과 **테두리(Border)**는 비슷해 보일 수 있지만, 다음과 같은 차이점이 있습니다:
아웃라인은 요소 크기에 영향을 주지 않습니다. 아웃라인은 요소의 바깥쪽에 그려지며, 요소의 크기나 레이아웃에 영향을 미치지 않습니다. 반면, 테두리는 요소 크기에 포함됩니다.
아웃라인은 항상 네 방향에 동일하게 적용됩니다. 테두리는 각 방향별로 다르게 설정할 수 있지만, 아웃라인은 모든 방향에 동일한 두께, 색상, 스타일을 가집니다.

8. 아웃라인과 접근성

아웃라인은 특히 **접근성(Accessibility)**을 개선하는 데 중요한 역할을 합니다. 예를 들어, 키보드로 탐색할 때 사용자는 포커스된 요소가 어디인지 시각적으로 확인할 수 있어야 합니다. 아웃라인을 사용해 포커스 상태를 명확히 표시하는 것은 접근성 측면에서 매우 중요합니다.

포커스 아웃라인 예시:

button:focus {
    outline: 2px solid blue;
}

위 코드는 포커스된 버튼에 파란색 아웃라인을 설정하여, 사용자가 키보드로 탐색할 때 시각적으로 쉽게 구분할 수 있게 만듭니다.

9. 자주 사용되는 아웃라인 예제

기본 아웃라인 설정:

div {
    outline: 3px solid black;
}

포커스 상태에서 점선 아웃라인:

input:focus {
    outline: 2px dashed green;
}

아웃라인 간격 조정:

button {
    outline: 5px solid red;
    outline-offset: 15px;
}

투명한 아웃라인:

p {
    outline: 2px solid rgba(0, 0, 255, 0.5);
}

아웃라인은 요소를 강조하고 포커스 상태를 표시하는 데 유용하며, 웹 페이지 디자인에서 접근성을 높이는 중요한 도구입니다.

코딩 스쿨 CSS