HTML5로 시각적 효과 주기

 

 

오늘은 HTML5에서 텍스트 및 박스의 그림자를 부여할 수 있는 프로퍼티에 대해서 정리해 보겠습니다.

 

 

[텍스트에 그림자 효과 부여하기]

 

- 'text-shadow'프로퍼티를 활용해서 텍스트의 그림자 효과를 줄 수 있다.

- 해당 프로퍼티를 사용하는 방법은 아래와 같다.

• text-shadow : __
  • h-shadow : 원본 텍스트와 그림자 텍스트 사이의 수평 거리
  • v-shadow : 원본 텍스트와 그림자 텍스트 사이의 수직 거리
  • blur-radius : 그림자의 번짐(흐릿함)을 조절
  • color : 그림자의 색
  • none : 그림자 효과 없음

 

- 아래는 위의 프로퍼티를 활용한 예시 코드와 출력 결과이다.

 

(소스코드)

div.red{
    text-shadow:  3px 3px red;
}

<div class="red"><b>그림자를 보세요!</b></div>

 

(출력결과)

브라우저 출력 결과

 

 

- 또한 블러(blur) 처리를 하게 되면 위의 선명한 그림자와 달리 흐릿한 그림자가 출력되는 모습을 볼 수 있다.

 

(소스코드)

div.blur{
    text-shadow:  3px 3px 5px red;
}

<div class="blur"><b>그림자를 보세요!</b></div>

 

(출력결과)

블러처리된 그림자 효과

 

 

[박스에 그림자 효과 부여하기]

- 'box-shadow' 프로퍼티를 이용하면 박스의 전체에 그림자 효과를 부여할 수 있다.

- 해당 프로퍼티를 사용하는 방법은 아래와 같다.

• box-shadow__
  • h-shadow  : 원본 텍스트와 그림자 텍스트 사이의 수평 거리
  • v-shadow : 원본 텍스트와 그림자 텍스트 사이의 수직 거리
  • blur-radius : 그림자의 번짐(흐릿함)을 조절
  • spread-radius : 그림자의 크기 조절
  • color none | inset : 그림자 효과 제거 | 음각 박스로 보이도록 박스의 상단 안쪽에만 그림자 출력

 

 

 

 

 

 

 

 

★해당 게시물은 "HTML5 + CSS3 + Javascript 웹 프로그래밍"도서를 참고하여 작성된 게시물입니다.★