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

개요

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

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

문법

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>

브라우저 지원

  • Chrome : 4.0+
  • Firefox : 3.5+
  • Internet Explorer : 10.0+
  • Opera : 9.6+
  • Safari : 4.0+

Related Posts

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

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

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

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

개요 background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat : 가로 방향, 세로 방향으로 반복합니다. repeat-x : 가로 방향으로 반복합니다. repeat-y : 세로 방향으로 반복합니다. no-repeat : 반복하지 않습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> ...

CSS / 표(table) 꾸미기 / 크기 정하기

CSS / 표(table) 꾸미기 / 크기 정하기

표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...

CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성

CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성

개요 font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-variant: normal | small-caps | initial | inherit normal : 소문자를 작은 대문자로 바꾸지 않습니다. small-caps : 소문자를 작은 대문자로 바꿉니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype ...

CSS / 상속(inheritance)

CSS / 상속(inheritance)

상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 상속하는 속성 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 즉 <style> p { color: blue; } </style> <p>Lorem <em>Ipsum</em></p> 일 때, Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다. 상속하지 않는 속성 예를 들어 ...

CSS / Flex / align-content

CSS / Flex / align-content

flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다. 기본값은 stretch로, 높이를 꽉 채웁니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / border-radius / 테두리 둥글게 만드는 속성

CSS / border-radius / 테두리 둥글게 만드는 속성

border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다. 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { box-sizing: border-box; width: 200px; height: 200px; margin: 20px auto; background-color: orange; } </style> </head> <body> <div class="jb"></div> </body> </html> 문법 1 border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 속성의 ...

CSS / background-position / 배경 이미지의 위치를 정하는 속성

CSS / background-position / 배경 이미지의 위치를 정하는 속성

개요 background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-position: x-position y-position | initial | inherit x-position y-position : 가로 위치와 세로 위치를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 위치 값으로 사용할 수 있는 것은 다음과 같습니다. 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 ...

CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성

CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성

개요 background-attachment로 배경 이미지의 스크롤 여부를 정합니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-attachment: scroll | fixed | local | initial | inherit scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 움직이지 않습니다. local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 ...

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...