text-shadow

1 개요
2 문법
3 예제 1 - 그림자 수평 거리
4 예제 2 - 그림자 수직 거리
5 예제 3 - 그림자 흐림 정도
6 예제 4 - 그림자 중첩
7 예제 5

개요

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 / Reference / box-sizing

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / align-content

flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다.

CSS / Reference / text-align

text-align은 문단 정렬 방식을 정하는 속성입니다. 기본값 : 읽는 방향이 LTR(왼쪽에서 오른쪽)인 경우 left, RTL(오른쪽에서 왼쪽)인 경우 right 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / border-style

border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-style border-right-style border-bottom-style border-left-style

CSS / Reference / background-position

background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / tab-size

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 이 탭 크기를 조정하는 속성이 tab-size입니다.

CSS / Reference / content

content는 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가하는 속성입니다. 기본값 : normal 상속 : No 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / color

color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / font-style

font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / aspect-ratio

aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성입니다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있습니다.