text-shadow : 텍스트 효과

CSS를 사용하여 재미있는 텍스트 효과를 추가하는 방법

Internet Explorer 10에서는 text-shadow CSS(CSS 스타일시트) 속성을 사용하여 하드웨어 가속 텍스트 그림자를 지원합니다.text-shadow 속성에 대한 지원은 웹 개발자가 가장 많이 요청하는 기능 중 하나였습니다. 이 속성을 사용하면 인라인 텍스트 이미지를 사용하지 않고도 이전에 어렵거나 불가능했던 텍스트 효과를 구현할 수 있습니다.

CSS 텍스트 그림자는 W3C(World Wide Web 컨소시엄)의 CSS 텍스트 수준 3 사양의 10.3절에 정의되어 있습니다. Internet Explorer 10의 웹 페이지 이외에도 JavaScript를 사용하는 Windows 스토어 앱도 또한 text-shadow 속성을 지원합니다. 이 항목에서는 텍스트 그림자를 구현하는 기본 사항을 설명한 다음 text-shadow를 통해 가능한 재미있는 텍스트 효과를 보여 줍니다.

이 항목의 내용은 다음과 같습니다.

• text-shadow 속성의 구문
• 속성 값 지정
• 이전 기능에서 개선
• 대체 동작
• text-shadow 사용해 보기
• 다음 단계

text-shadow 속성의 구문

텍스트 그림자를 사용하여 텍스트에 대한 관심을 끌고 텍스트에 깊이감을 줍니다. text-shadow를 사용하여 대비를 추가하고 이미지 또는 컬러 배경에서 텍스트의 가독성을 개선합니다. Internet Explorer 10과 그 외 많이 사용되는 대부분의 브라우저는 text-shadow 표준을 지원하므로 공급업체 접두사(예: "-ms-", "-webkit", "-moz-" 등)가 필요하지 않습니다. 따라서 이미 text-shadow를 사용 중인 사이트는 Internet Explorer 10에서 자동으로 작동합니다.

text-shadow 속성은 지정한 텍스트에 그림자 효과를 적용하며, 손쉽게 구현할 수 있습니다. box-shadow 속성을 사용한 적이 있으면 text-shadow 속성의 구문을 이미 알고 있는 것입니다. 두 속성의 구문은 거의 동일합니다.

속성

설명

text-shadow

여기에 지정된 바와 같이 하나 이상의 공백으로 구분된 shadow 매개 변수 목록입니다. 두 개 이상의 shadow가 지정된 경우 각각의 매개 변수 목록이 쉼표로 구분됩니다. horizontal offset 필수. 양수 값은 텍스트 오른쪽에 오프셋된 그림자를 그리고, 음수 길이는 왼쪽에 오프셋된 그림자를 그립니다. vertical offset 필수. 양수 값은 텍스트 아래에 오프셋된 그림자를 그리고, 음수 값은 위에 오프셋된 그림자를 그립니다. blur distance 음수 값은 허용되지 않습니다. blur 값이 0이면 그림자 가장자리가 선명합니다. 그렇지 않으면 값이 클수록 그림자 가장자리가 흐려집니다. spread distance 양수 값을 지정하면 그림자 모양이 지정한 반경만큼 모든 방향으로 확장됩니다. 음수 값을 지정하면 그림자 모양이 축소됩니다. 이 값은 일부 브라우저에서 지원되지 않을 수도 있습니다. color 임의의 지원되는 CSS 색 값(영문)입니다.

 

text-shadow 속성이 "inset" 키워드를 인식할 수 없다는 점을 제외하고 text-shadow 속성의 구문은 box-shadow 속성의 구문과 동일합니다.

다음은 text-shadow 속성의 기본 예제입니다. 다음 코드 조각은 작은 흐림 값이 포함된 진한 회색 그림자를 이 그림자가 적용되는 텍스트의 오른쪽과 아래쪽에 적용합니다.

CSS

.myselector { 
...
  text-shadow: 0.1em 0.1em 0.15em #333; 
}

짧은 텍스트 블록에 선택기를 적용하면 다음과 같은 결과가 나타납니다.

속성 값 지정

text-shadow 속성에 최소한 두 개의 값, 즉 x 오프셋과 y 오프셋을 지정해야 합니다.

CSS

.shadow1 { 
  color: black; 
  text-shadow: 2px 2px; 
}

위 코드 조각은 다음과 같이 표시됩니다.

일반적으로 그림자 색을 지정할 수 있습니다. 다음 예제에서 "black"은 텍스트 자체의 색을 나타내는 반면 "#87CEEB"는 그림자 색 연한 파랑을 16진수로 표현한 것입니다.

CSS

.shadow2 { 
  color: black; 
  text-shadow: #87CEEB 1px 3px; 
}

위 코드 조각은 다음과 같이 표시됩니다.

그림자 정의 시작 또는 끝 부분에 색 매개 변수를 배치할 수 있습니다. 가우스 흐림 알고리즘을 사용하여 그림자의 흐림 정도를 설명하는 흐림 반경을 추가할 수도 있습니다. 예를 들어 다음 예제 코드를 살펴보세요.

CSS

.shadow3 { 
  color: black; 
  text-shadow: 1px 3px 3px rgba(135, 206, 235, 1); 
}

위 코드 조각은 다음과 같이 표시됩니다.

확산 거리를 지정할 수도 있습니다. 양수 값은 그림자가 확장되는 크기를 설명하고, 음수 값은 그림자가 축소되는 크기를 설명합니다. 다음 코드 예제에는 양수 확산 거리가 적용되어 있습니다.

CSS

.shadow4 { 
  color: black; 
  text-shadow: skyblue 0px 0px 0px 4px; 
}

위 코드 조각은 다음과 같이 표시됩니다.

양수 확산 값을 갖는 text-shadow 속성의 효과는 종종 충분한 개수의 0 확산 그림자를 그려서 모방할 수 있습니다. 그러나 이를 위한 태그는 더 복잡하며, 결과적으로 성능이 저하되고 그림자 품질이 떨어질 수 있습니다. 그럼에도 이 속성을 지원하지 않는 브라우저에서 확산을 모방하려면 이 방법이 필요할 수 있습니다. 예를 들어 다음 코드 예제를 고려해 보세요.

CSS

.shadow4_nospread { 
  color: black; 
  text-shadow: skyblue 0px 2px, skyblue 2px 0px, skyblue -2px 0px, 
    skyblue 0px -2px, skyblue -1.4px -1.4px, skyblue 1.4px 1.4px, 
    skyblue 1.4px -1.4px, skyblue -1.4px 1.4px; 
}	

위 코드 조각은 다음과 같이 표시됩니다.

spread 매개 변수를 사용하면 이 효과를 훨씬 더 쉽게 구현할 수 있습니다. 또한 이 매개 변수를 사용하여 음수 값이 사용될 때 불가능한 효과를 낼 수도 있습니다. 다음 예제를 참조하세요.

CSS

.shadow5 { 
  text-shadow: 5px 5px 2px -2px #9966CC; 
}

위 코드 조각은 다음과 같이 표시됩니다.

여기에 표시된 5개의 매개 변수는 단일 그림자를 설명합니다. text-shadow 속성은 또한 앞에서 뒤로 쌓여 있는 그림자 목록을 지원합니다.

다음 예제는 아래 나열된 5개의 그림자가 앞에서 뒤로 표시된 텍스트 그림자를 보여 줍니다.

• 부분적으로 투명한 흰색 그림자
• 노란색 그림자
• 주황색 그림자(위에 그려진 그림자)
• 빨간색 그림자

CSS

.shadow6 { 
  text-shadow: rgba(255, 255, 255, .5) 1px 1px, 
    yellow 2px 3px, 
    rgba(255, 153, 0, .7) 3px 6px,
    rgba(255, 0, 0, .5) 4px 8px; 
}

위 코드 조각은 다음과 같이 표시됩니다.

이 글을 쓰는 시점에서는 확산 거리 매개 변수를 지원하는 브라우저가 계속 바뀌고 있으므로 최대의 상호 운용성을 위해서는 대체를 포함하는 것이 좋습니다. spread 매개 변수를 지원하지 않는 브라우저에서는 이 매개 변수의 구문이 잘못 분석됩니다. 마지막 매개 변수를 사용하려는 경우 태그에 spread 매개 변수 없이 text-shadow의 대체 버전을 포함해야 합니다. 그렇지 않으면 확산을 지원하지 않는 브라우저에서 텍스트 그림자가 표시되지 않습니다.

CSS

.shadow7 {
  color: black;
  text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread support */
  text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with spread support */
}

spread 매개 변수를 지원하지 않는 브라우저에서 위 코드 조각은 다음과 같이 표시됩니다.

Internet Explorer 10을 비롯하여 spread 매개 변수를 지원하는 브라우저에서 위 코드 조각은 다음과 같이 표시됩니다.

텍스트 확산을 사용하면 스트로크 텍스트, 더 어둡게 흐릿한 그림자 또는 텍스트에 딱 붙는 그림자 등 더 많은 효과를 구현할 수 있습니다.

이전 기능에서 개선

Windows Internet Explorer의 독점적인 CSS 필터 지원에 익숙한 경우 이전에는 DXImageTransform.Microsoft.Shadow, DXImageTransform.Microsoft.DropShadow, DXImageTransform.Microsoft.Glow 및 DXImageTransform.Microsoft.Blur 필터를 사용하여 텍스트 그림자를 생성할 수 있었다는 것을 이미 알고 있을 것입니다. CSS 필터는 브라우저가 이전 문서 모드에 있을 경우를 제외하고 Internet Explorer 10에서 더 이상 지원되지 않습니다. 문서 모드에 대한 자세한 내용은 문서 호환성 정의를 참조하세요.

이러한 DXImageTransform 필터를 사용하여 텍스트 그림자 효과를 구현하는 대신 Internet Explorer 10에서는 text-shadow 속성을 사용하세요. Internet Explorer 10에서는 표준을 따르는 상호 운용성 방식으로 효과를 구현할 뿐 아니라 그래픽이 하드웨어 가속을 지원하므로 더 이상 사용되지 않는 대체 방식보다 성능이 현저히 향상됩니다.

대체 동작

현재 text-shadow 속성을 사용하는 사이트가 text-shadow를 지원하지 않는 브라우저에서 렌더링되면 자연스럽게 품질이 저하됩니다. 현재 웹에서 text-shadow가 사용되는 대부분의 경우 텍스트 그림자는 시각적 깊이를 추가하는 미묘한 장식 효과를 냅니다. 그러나 text-shadow를 사용하여 더 창의적인 시각적 효과를 구현할 수도 있습니다. 이 경우 text-shadow 속성을 지원하지 않는 브라우저도 고려해야 합니다. 예를 들어 다음 이미지는 text-shadow 속성이 적용된 텍스트가 Windows Internet Explorer 9에서 표시되는 모습입니다.

이 텍스트는 text-shadow를 지원하는 Internet Explorer 10 및 기타 브라우저에서는 다음과 같이 표시됩니다.

text-shadow를 지원하지 않는 브라우저를 지원해야 할 경우 CSSOM(CSS 개체 모델)에서 textShadow에 대한 기능 검색을 사용하여 이 예술적 감각을 표현할 때 조건부로 텍스트 색을 변경해야 합니다.

예를 들어 다음은 text-shadow를 지원하지 않는 브라우저에서 볼 때 적절한 대체 동작을 생성합니다.

JavaScript

if (typeof document.body.style.textShadow == 'undefined') {
  // text-shadow is not supported
  document.body.style.color = 'black';
}	
else {
  // text-shadow is supported
  document.body.style.color = '#FFFFCC';
  document.body.style.textShadow = 'turquoise -2px -2px, black 2px 2px';
}

text-shadow 사용해 보기

오늘 text-shadow를 사용해 보세요. 이미 이 속성에 익숙한 경우 spread 매개 변수를 통해 얻을 수 있는 새로운 가능성을 살펴보세요. 여러 개의 그림자를 사용하고 여러 매개 변수를 수정하면 재미있는 효과를 만들 수 있습니다.

다음은 text-shadow를 통해 구현한 흥미롭고 재미있는 효과를 보여 주는 갤러리입니다.

이 갤러리의 라이브 버전을 볼 수 있습니다.

다음 단계

WOFF(Web Open Font Format) 글꼴 및 입력 요소에서 CSS3(CSS 스타일시트, Level 3) 전환 및 애니메이션과 함께 text-shadow를 사용할 수 있습니다. text-shadow와 CSS 전환 및 애니메이션을 모두 지원하는 브라우저를 사용하는 경우 위에 제공된 갤러리 링크를 방문하여 이러한 기능이 함께 작동하는 모습을 확인해 보세요. 그런 다음 소스 HTML을 보거나 F12 개발자 도구를 사용하여 태그를 볼 수 있습니다.

IE 테스트 드라이브 데모 실습: text-shadow(영문)는 텍스트 그림자를 실험해 볼 수 있는 대화형 방법을 제공합니다. 텍스트에 생기를 불어넣는 것이 얼마나 쉬운지 확인해 보세요.

source : https://msdn.microsoft.com/ko-kr/library/ie/jj680149%28v=vs.85%29.aspx