텍스트에 그림자 효과를 주는 기능에 대하여 알아 보도록 하겠습니다. 그림자 효과 CSS를 사용하여 밋밋한 텍스트를 더욱 풍성하고 멋지게 꾸며 볼 수 있습니다.
HTML/CSS 소스
<html>
<head>
<title>텍스트 그림자 효과</title>
</head>
<style type="text/css">
body {
background: #fff;
font-size: 40px;
font-weight: bold;
}
txt {
}
txt1 {
text-shadow: 0px 5px 0px #FFB2F5;
}
txt2 {
text-shadow: 0px 1px #ffffff, 4px 4px 0px #EAEAEA;
}
txt3 {
color: #FFFFB4;
text-shadow: -1px -1px 0px #FFBB00, 3px 3px 0px #FFBB00, 6px 6px 0px #B77300;
}
txt4 {
color: #00D8FF;
text-shadow: -1px -1px 0px #0090B7, 2px 2px 0px #0090B7, 4px 4px 4px #005A81;
}
</style>
<body>
<txt>ERun-Joy</txt>
<br>
<txt1>ERun-Joy</txt1>
<br>
<txt2>ERun-Joy</txt2>
<br>
<txt3>ERun-Joy</txt3>
<br>
<txt4>ERun-Joy</txt4>
</body>
</html>
브라우저 실행 결과
소스설명
- font-weight: bold;
→ font-weight(글자굵기) : bold(진하게)
→ font-weight 의 속성으로는 bold 이외에 100~900까지 100단위로 설정 할 수 있습니다.
→ 400은 normal과 같으며, 700은 bold와 동일합니다. 즉 숫자가 높을 수록 진하게 표시 됩니다.
- text-shadow: 0px 5px 0px #FFB2F5;
→ text-shadow(그림자효과) : 0px(수평그림자) 5px(수직 그림자) 0px(흐림정도) #FFBB00(색상지정)
→ 속성(0px 5px 0px #FFB2F5) 부분은 콤마(,) 구분자를 이용하여 여러번 지정 할 수 있습니다.
ex)text-shadow: -1px -1px 0px #0090B7, 2px 2px 0px #0090B7, 4px 4px 4px #005A81;
마무리
그림자 효과 스타일을 잘 이용하면 더욱 멋진 텍스트를 만들 수 있을 것 입니다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
[자바스크립트] 일정간격으로 배경 색 변경하기- setInterval (2) | 2018.06.20 |
---|---|
[자바스크립트] 현재시간 화면에 표시하기 (4) | 2018.06.20 |
[HTML/CSS] 카테고리 DIV 박스 만들기 (2) | 2018.06.17 |
CSS를 이용한 문자열(제목) 자르기 / white-space, text-overflow (1) | 2018.05.27 |
DIV 배경이미지 변경하기 / CSS 배경설정 자바스크립트로 제어하기 (9) | 2018.05.26 |