개발나라 스용공주

[HTML/CSS] 글씨 그림자 레이어 만들기 / css로 글씨 꾸미기 본문

WEB/HTML & CSS

[HTML/CSS] 글씨 그림자 레이어 만들기 / css로 글씨 꾸미기

스용공주 2024. 10. 22. 22:14
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
'WEB/HTML & CSS' Related Articles more
Comments