일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- UnrealEngine
- c++
- C언어
- 개발블로그
- ANIMATION
- C
- iclone
- 3dmodeling
- ue5
- js
- 애니메이팅
- character
- 3d
- 마야
- JavaScript
- 프로그래밍
- unreal
- reallusion
- modeling
- Costume
- 티스토리챌린지
- autodesk
- visualstudio
- 언리얼엔진
- HTML
- charactercreator
- animating
- 오블완
- 개발
- cc4
Archives
- Today
- Total
개발나라 스용공주
[HTML/CSS] 글씨 그림자 레이어 만들기 / css로 글씨 꾸미기 본문
728x90
728x90
이번 글은 css를 사용하여 텍스트 요소에 그림자 효과를 줘서 꾸며볼 것이다.
아래 사진과 같이 텍스트 그림자를 두겹 만들어 그림자 레이어가 쌓인 효과를 만드는 실습이다.

[ 텍스트 꾸미기 실습 ]
먼저 글씨에 폰트를 적용하고 색상을 입혀주었다.
@font-face를 사용하여 폰트를 적용하는 방법은 이 글의 맨 아래에 첨부한 블로그 글 링크를 참고하여 만들면 된다.
[ html ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 서식꾸미기</title>
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div>안녕하세요</div>
</body>
</html>
[ css ]
@font-face{
font-family:'bitbit';
src:url('//cdn.df.nexon.com/img/common/font/DNFBitBit-Regular.woff'),url('//cdn.df.nexon.com/img/common/font/DNFBitBit-Regular.woff2') ;
}
div {
padding : 100px 0 100px 0;
border : 1px solid cornflowerblue;
width : 300px;
height : 300px;
text-align: center;
font-family : bitbit;
background-color: cornflowerblue;
font-size: 50px;
color : salmon;
box-sizing: border-box;
}
[ 실행결과 ]

그리고 텍스트의 그림자를 만들어주는 속성인 text-shadow를 아래 코드와 같이 두번 사용해서 겹쳐지는 그림자를 만들어주면 완성된다.
먼저 생성된 그림자일수록 가장 위에 배치된다.
text-shadow 속성의 경우, 그림자의 가로와 세로 면적을 지정하고 색상을 지정하는 방식이다.
[ css ]
@font-face{
font-family:'bitbit';
src:url('//cdn.df.nexon.com/img/common/font/DNFBitBit-Regular.woff'),url('//cdn.df.nexon.com/img/common/font/DNFBitBit-Regular.woff2') ;
}
div {
padding : 100px 0 100px 0;
border : 1px solid cornflowerblue;
width : 300px;
height : 300px;
text-align: center;
font-family : bitbit;
background-color: cornflowerblue;
font-size: 50px;
color : salmon;
text-shadow: 3px 3px lightgreen, 6px 6px white;
box-sizing: border-box;
}
[ 실행결과 ]

[ 참고 내용 - @font-face 적용하기 ]
폰트를 적용하는 방법은 아래 링크에 있는 글을 참고하여 적용하면 된다.
https://hwangseoyoung.tistory.com/155
[CSS] @font-face 적용하는 법 / 웹 폰트 사용하는 방법 - 웹페이지에 원하는 폰트 적용하기
이번 글은 @font-face를 적용하는 방법에 대한 글을 작성할 것이다. [ 1. 웹폰트 가져오기 ]우선 웹폰트는 아래 사진과 같이 '눈누' 사이트에서 원하는 폰트를 선택하고 사진과 같이 '웹폰트로
hwangseoyoung.tistory.com

728x90
728x90
'WEB > HTML & CSS' 카테고리의 다른 글
[HTML/CSS] 애니메이션이 들어간 버튼 만들기 - 가상클래스 hover와 transition (0) | 2024.10.26 |
---|---|
[HTML/CSS] float 속성의 이론 상세 설명 - inline, block, overflow, clear (0) | 2024.10.23 |
[HTML/CSS] 자식선택자와 자손선택자 차이점 이론 설명 / 부모요소와 자식요소 (0) | 2024.10.22 |
[HTML] html 기본 구문 단축키 / <!DOCTYPE html> 한번에 불러오기 (0) | 2024.10.20 |
[CSS] @font-face 적용하는 법 / 웹 폰트 사용하는 방법 - 웹페이지에 원하는 폰트 적용하기 (0) | 2024.10.09 |