CSS / text-shadow / 글자에 그림자 효과를 주는 속성

개요

text-shadow는 글자에 그림자 효과를 주는 속성이다.

  • 기본값 : none
  • 상속 : Yes
  • 애니메이션 : Yes
  • 버전 : CSS Level 3

박스에 그림자 효과를 주고 싶다면 box-shadow를 사용한다.

문법

text-shadow: offset-x offset-y blur-radius color | none | initial | inherit
  • offset-x : 그림자의 수평 거리를 정한다. (필수)
  • offset-y : 그림자의 수직 거리를 정한다. (필수)
  • blur-radius : 흐림 정도를 정한다. (선택 : 값을 정하지 않으면 0)
  • color : 색을 정한다. (선택 : 값을 정하지 않으면 브라우저 기본값)
  • none : 글림자 효과를 없앤다.
  • initial : 기본값으로 설정한다.
  • inherit : 부모 요소의 속성값을 상속받는다.

예제 1 - 그림자 수평 거리

offset-x의 값을 증가시키면 그림자의 위치가 오른쪽으로 이동한다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-family: "Arial Black", sans-serif;
        font-size: 36px;
        font-weight: bold;
        color: #ffffff;
      }
      .s1 { text-shadow: 2px 2px 2px gray; }
      .s2 { text-shadow: 4px 2px 2px gray; }
      .s3 { text-shadow: 6px 2px 2px gray; }
    </style>
  </head>
  <body>
    <p class="s1">Lorem ipsum dolor sit amet.</p>
    <p class="s2">Lorem ipsum dolor sit amet.</p>
    <p class="s3">Lorem ipsum dolor sit amet.</p>
  </body>
</html>

예제 2 - 그림자 수직 거리

offset-y의 값을 증가시키면 그림자의 위치가 아래로 이동한다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-family: "Arial Black", sans-serif;
        font-size: 36px;
        font-weight: bold;
        color: #ffffff;
      }
      .s1 { text-shadow: 2px 2px 2px gray; }
      .s2 { text-shadow: 2px 4px 2px gray; }
      .s3 { text-shadow: 2px 6px 2px gray; }
    </style>
  </head>
  <body>
    <p class="s1">Lorem ipsum dolor sit amet.</p>
    <p class="s2">Lorem ipsum dolor sit amet.</p>
    <p class="s3">Lorem ipsum dolor sit amet.</p>
  </body>
</html>

예제 3 - 그림자 흐림 정도

blur-radius의 값을 증가시키면 그림자가 흐려진다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-family: "Arial Black", sans-serif;
        font-size: 36px;
        font-weight: bold;
        color: #ffffff;
      }
      .s1 { text-shadow: 2px 2px 2px gray; }
      .s2 { text-shadow: 2px 2px 4px gray; }
      .s3 { text-shadow: 2px 2px 6px gray; }
    </style>
  </head>
  <body>
    <p class="s1">Lorem ipsum dolor sit amet.</p>
    <p class="s2">Lorem ipsum dolor sit amet.</p>
    <p class="s3">Lorem ipsum dolor sit amet.</p>
  </body>
</html>

예제 4 - 그림자 중첩

속성값을 쉼표로 구분하여 여러 번 쓰면 여러 개의 그림자가 생긴다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-family: "Arial Black", sans-serif;
        font-size: 60px;
        font-weight: bold;
        color: #0D47A1;
      }
      .s1 {
        text-shadow: 4px 4px 0px #1565C0, 8px 8px 0px #42A5F5, 12px 12px 0px #E3F2FD;
      }
    </style>
  </head>
  <body>
    <p class="s1">Lorem ipsum</p>
  </body>
</html>

예제 5

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        margin: 0px;
      }
      p {
        margin: 20px;
        padding: 20px 0px;
        text-align: center;
        text-transform: uppercase;
        font-family: "Arial Black", sans-serif;
        font-size: 60px;
        font-weight: bold;
      }
      .s1 {
        background-color: #666666;
        color: #222222;
        text-shadow: 2px 2px 3px rgba(255,255,255,0.2);
      }
      .s2 {
        background-color: #E1F5FE;
        color: #ffffff;
        text-shadow: 4px 4px 0px #bdbdbd;
      }
      .s3 {
        background-color: #F44336;
        color: #ffffff;
        text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -3px 20px rgba(255,255,255,0.4);
      }
    </style>
  </head>
  <body>
    <p class="s1">Lorem ipsum</p>
    <p class="s2">Lorem ipsum</p>
    <p class="s3">Lorem ipsum</p>
  </body>
</html>

같은 카테고리의 다른 글
CSS / 표(table) 꾸미기 / 반응형 표 만들기

CSS / 표(table) 꾸미기 / 반응형 표 만들기

데이터를 잘 정리해서 보여줄 때 표를 이용한다. 표는 일정한 가로 크기를 갖고 있어야 보기 좋다. 그런데, 모바일 접속자를 위해서 가로 크기를 100%로 하면 문제가 발생한다. 다음은 가로 크기가 100%인 간단한 표이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 100%; } td { padding: 20px; border: 1px solid #444444; } </style> </head> <body> <div> <table> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> <tr> <td>Lorem</td> <td>Lorem Ipsum Dolor Lorem Ipsum Dolor</td> <td>Dolor</td> </tr> </table> </div> </body> </html> 웹브라우저의 가로 크기가 클 때는 ...

CSS / 구분선 만들기

CSS / 구분선 만들기

글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 한다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제이다. 예제 문서 <div class="jb-division-line"></div>를 꾸며서 구분선을 만들 것이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / Grid / order

CSS / Grid / order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여줍니다. hide : 빈 셀의 테두리를 숨깁니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...

CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 동영상을 배경으로 사용하는 방법

CSS / 동영상을 배경으로 사용하는 방법

동영상을 배경으로 사용하면 좀 더 다이나믹하고 화려하게 웹페이지를 꾸밀 수 있습니다. 단, 네트워크 속도가 느리거나 컴퓨터 사양이 좋지 않거나 구 버전의 웹브라우저를 사용하면 문제가 생길 수 있으니, 신중히 결정하는 것이 좋습니다. 예제로 사용한 동영상 예제에서 사용한 동영상은 Pixabay에서 구했습니다. 상업적으로 사용 가능하고, 출처 표시를 하지 않아도 됩니다. https://pixabay.com/videos/network-loop-energy-technology-12716/ 전체 코드와 결과 다음은 간단하게 만든 예제의 ...

CSS / Grid / display

CSS / Grid / display

display: grid 그리드(grid)는 콘테이너(container)와 아이템(item)으로 구성됩니다. 아래는 그리드를 위한 간단한 HTML 문서입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / list-style-image / 목록의 마커로 이미지 사용하기

CSS / list-style-image / 목록의 마커로 이미지 사용하기

개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...

CSS / 표(table) 꾸미기 / 배경색 만들기

CSS / 표(table) 꾸미기 / 배경색 만들기

배경색을 만드는 속성 배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / Flex / order / 아이템의 순서 정하는 속성

CSS / Flex / order / 아이템의 순서 정하는 속성

Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; ...