[css] css를 이용해서 텍스트를 디자인 해보자(웹 폰트 사용, 폰트 꾸미기,text-shadow, text-decoration)

FrontEnd/css

[css] css를 이용해서 텍스트를 디자인 해보자(웹 폰트 사용, 폰트 꾸미기,text-shadow, text-decoration)

김평범님 2020. 12. 29. 17:26

🔠 타이포그래피

웹 상에서 타이포그래피의 중요성은 항상 언급이 되고 있다.

(타이포그래피는 활자 서체의 배열을 뜻함)

감각적인 타이포그래피를 홈페이지에 사용하기 위해서 이미지로 만들어서 올릴 수도 있으나,

이런 이미지로 만든 텍스트는 사용자의 요구사항에 대응하기 어렵다.

문구가 바뀔 때마다 디자이너의 재 작업이 필요하며, 반응형에도 대응하기 어렵기 때문이다.

오늘은 아래의 폰트를 css를 이용해서 Text를 감각적으로 꾸며보고자 한다.

오늘 이용할 기본 코드를 먼저 복사해서 실행해보자.

텍스트는 본인 입맛에 바꿔도 좋다.

기본 코드

<html>
<head>
</head>
<body>
<div class="text-box">
    <div class="text-wrap">
        <div class="heart"></div>
        <h1>ORDINARY CODE</h1>
        <h4>https://ordinary-code.tistory.com/</h4>
    </div>
</div>
</body>
</html>

🐣 웹 폰트 준비하기

웹 폰트를 활용하면 홈페이지 상에서 내가 원하는 폰트를 이용할 수 있다.

물론 시스템 폰트를 사용할 수도 있지만, 모든 사용자가 내가 원하는 폰트를 컴퓨터에 가지고 있는 건 아니다.

그렇기 때문에 우린 사용자에게 예쁜 폰트를 보여주기 위해서는 우리는 코드에서 사용할 폰트를 준비하고 있어야 한다.

우리가 웹에서 사용할 수 있는 폰트가 어떤 게 있는지 확인할 수 있는 곳이 구글 폰트 사이트이다.

fonts.google.com/

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

다양한 폰트들을 누구나 쉽게 웹 폰트 형식으로 적용할 수 있게 코드까지 함께 제공해준다.

특이한 영문 폰트를 찾는다면 구글 폰트 사이트를 이용하길 추천한다.👍

반면, 내가 이용해야 하는 사이트의 주 폰트가 한글일 경우는 눈누라는 사이트를 추천한다.

noonnu.cc/

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

폰트를 예쁘면 무조건 다 사용하면 좋긴 하겠지만, 폰트에도 저작권이 존재한다.

내가 만든 사이트의 특성에 따라 불특정 다수가 들어오는 사이트가 될 경우에 저작권이 있는 폰트를 구매 없이 사용하게 된다면,

이후 문제가 생길 소지가 있다.

눈누는 이런 저작권 걱정이 없는 한글 폰트들을 모아서 보여준다.

웹 폰트 연결해보기

나는 오늘 구글 폰트 사이트를 이용하여, 폰트를 연결하겠다.

Staatliches 폰트가 눈에 들어온다. 먼저 라이선스를 확인한다.

라이선스 정책상 Open Font License. 일 경우 무료로 자유롭게 사용 가능한 라이선스다.

라이선스상 문제가 없으면 해당 웹 폰트를 연결할 수 있는 코드를 받는다.

Select styles 탭에 Select this style을 클릭한 뒤

우측 상단 view your selected families를 클릭하면 import 코드를 확인할 수 있다.

위의 방법으로 얻은 코드를 style 쪽에 적용하면, 웹 폰트가 적용된 것을 확인할 수 있다.

<html>
<head>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
        .text-box h1 {
            font-family: 'Staatliches', cursive;
        }
        .text-box h4 {
            font-family: 'Montserrat', sans-serif;
        }
    </style>
</head>
<body>
<div class="text-box">
    <div class="text-wrap">
        <div class="heart"></div>
        <h1>ORDINARY CODE</h1>
        <h4>https://ordinary-code.tistory.com/</h4>
    </div>
</div>
</body>
</html>

웹 폰트 주의사항

속도 이슈

웹 폰트는 기본적으로 서버에서 폰트를 다운로드하는 형식으로 이용되기 때문에 하나의 사이트에 많은 폰트가 연결될 경우

화면 로딩 속도가 느려질 수 있다.

한 사이트 내 폰트는 2개에서 최대 3개 정도까지 사용하길 권장한다.

오프라인 이슈

방금 전 import 형식으로 가져온 코드의 경우 인터넷을 통해 서버에 접속하여 웹 폰트를 다운로드하는 방식이다.

만약 오프라인 환경에서 본인 사이트가 운영된다면 구글 폰트에서 제공하는 import 방식으로는 웹 폰트를 이용할 수 없다.

이럴 경우 시스템 폰트를 사용하거나 오프라인으로 font를 다운로드한 뒤 적용시켜야 한다.

(@font-face로 검색해보길 바란다!)

🎨 Font 디자인 적용하기

사실 웹 폰트만으로도 훌륭한 예쁜 폰트가 되었지만,

오늘은 몇 가지 CSS 기능을 이용해서 텍스트를 예쁘게 꾸며 보겠다.

일단 간단히 css flex 기능을 이용해서 폰트를 가운데에 정렬했다.

모를 경우 아래 코드를 그대로 붙여 넣으시면 되고,

flex 사용법이 궁금할 경우 아래 링크를 확인하길 추천한다.

ordinary-code.tistory.com/15?category=962547

[css/layout] CSS Layout 방법 - 1️⃣ flexbox

💜 2020 State of CSS Survey 2020년 State of CSS Survey 결과가 발표되었다. 개발자의 고충은 내가 만들긴 했는데 이 방법을 써도 되는 걸까?라는 의문을 항상 갖게 된다. 이럴 때 도움이 되는 것은 Survey! 201.

ordinary-code.tistory.com

body {
  width: 100%;
  height: 100%;
  background: #16345A;
  padding:0;
  margin:0;
}

.text-box {
  width: 100%;
  height: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
}

text를 꾸밀 CSS 기능 살펴보기

아래의 기능을 이용할 경우 텍스트에 넣을 수 있는 기본적인 효과는 모두 만들 수 있다.

text-align: 텍스트의 위치를 설정한다 (left, center, right 사용 가능)
font-size: 텍스트의 크기를 지정한다.(px, pt, em, rem 등의 단위 사용 가능, 잘 모르겠으면 px을 쓰자)
font-style: italic을 사용할 경우 text의 기울기를 줄 수 있다.
color: font의 색상을 결정할 수 있다.
text-decortaion : 취소선, text 위·아래쪽에 선을 넣는 것이 가능하다.
letter-spacing : 텍스트 사이 간격을 설정할 수 있다.
text-shadow : 텍스트의 그림자 효과를 줄 수 있다.

아래 예시를 적용해보자

font-size로 폰트 위계를 주었으며, color를 이용해 폰트 색을 변경했다.

특히 h1에는 text-shadow 효과로 입체감 있는 font를 만들어보았다.

.text-box h1 {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
  text-align: center;
  color: #F1C164;
  text-shadow: 5px 5px #2D63A7;
  margin: 0;
}
.text-box h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  color: #f1f1f1;
  letter-spacing: 5px;
  text-align: center;
}

폰트의 위계가 생기고, 색상으로 포인트를 주었으며 text-shadow효과로 입체감 있는

타이포 그래피가 완성되었다.

text-shadow 응용하기

text-shadow는 총 4가지의 속성을 가지고 있다.

offset-x : x축을 기준으로 얼마나 멀리 떨어질지
offset-y : y축을 기준으로 얼마나 멀리 떨어질지
blur-radius : 해당 쉐도우의 blur 효과를 얼마나 세게 줄지
color : 어떤 색의 쉐도우를 만들지

이러한 속성 조합은 아래와 같이 축약해서 사용할 수 있다.

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

텍스트 쉐도우 효과는 한 번이 아니라 여러 번 주는 것도 가능하다.

아래의 예시를 보자. h1 css text-shadow에 총 4개의 그림자를 추가해보았다.

.text-box h1 {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
  text-align: center;
  color: #F1C164;
  text-shadow: 5px 5px #16345A, 8px 8px #284D8E, 11px 11px #4D8CBF, 14px 14px #5FA9D9;
  margin: 0;
}

text-decortaion 응용하기

text-decoraton는 총 4가지 속성을 가지고 있다.

text-decoration-line : 라인의 형태 지정 (underline, line-through, overline 등을 제공)
text-decoration-color : 선의 색상 지정
text-decortaion-style : 라인의 형태를 지정 (solid, wavy, dotted, dashed 등을 제공)
text-decoration-thickness : 선의 두께를 지정

우린 text-decoration을 이용하여 텍스트에 선을 넣는 것이 가능하다는 것을 알았다.

text-decoration: underline;을 추가해보았다.

underline을 이용하면 밑줄이 추가되며, 해당 밑줄은 아까 추가한 text-shadow효과가 같이 적용된다.

.text-box h1 {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
  text-align: center;
  color: #F1C164;
  text-shadow: 5px 5px #2D63A7;
  margin: 0;
  text-decoration: underline;
}

text-decoration-color를 이용하면 밑줄 선 컬러만을 다른 컬러로 지정도 가능하다.

text-decortation:line-through;로 취소선을 지정한 뒤 컬러를 변경해보았다.

.text-box h1 {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
  text-align: center;
  color: #F1C164;
  text-shadow: 5px 5px #2D63A7;
  margin: 0;
  text-decoration: line-through;
  text-decoration-color: #EE5152;
}

마지막으로 overline을 이용하여 선을 위에 추가하고

해당 선을 웨이브 효과를 줘보기로 한다.

.text-box h1 {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
  text-align: center;
  color: #F1C164;
  text-shadow: 5px 5px #2D63A7;
  margin: 0;
  text-decoration: overline;
  text-decoration-style: wavy;
}

마지막으로 위아래 선을 모두 추가하고

dotted 스타일을 적용해주며 해당 dotted 크기를 5px로 조정해보겠다

.text-box h1 {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
  text-align: center;
  color: #F1C164;
  text-shadow: 5px 5px #2D63A7;
  margin: 0;
  text-decoration: overline underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 5px;
}

이렇게 간단한 CSS속성만으로 느낌 있는 타이포그래피를 만들어보았다.

디자인으로 만든 것보다 화려하거나 특별한 것은 없지만

기본적으로 css에서도 이 정도는 가능하다.

Reference

Color 참고사이트

blog.adobe.com/en/2019/12/04/pantone-color-of-the-year-2020.html#gs.oni1j3

CSS 참고 사이트

developer.mozilla.org/ko/docs/Web/CSS/text-shadow

developer.mozilla.org/ko/docs/Web/CSS/text-decoration

'FrontEnd > css' 카테고리의 다른 글

css로 만드는 체크박스 ON/OFF 스위치 버튼 디자인 예제(라이트모드/다크모드) (2)	2021.03.04
[css/svg] css와 svg, ::after&::before를 활용한 버튼 hover효과를 만들기 (0)	2021.01.06
[css/svg]css animation과 svg를 활용해 글자가 그려지는 효과 만들기 (2)	2021.01.01
[css/layout] css layout 방법 - 2️⃣ grid (0)	2020.12.18
[css/layout] CSS Layout 방법 - 1️⃣ flexbox (0)	2020.12.12

현재글[css] css를 이용해서 텍스트를 디자인 해보자(웹 폰트 사용, 폰트 꾸미기,text-shadow, text-decoration)

Vue, 노션사용법, 노션유용한템플릿, 노션가이드, NUXT, 노션무료템플릿, Notion템플릿공유, 노션, 노션활용법, 노션템플릿, react, 노션표, 리액트, CSS, 노션가계부, 노션수식, JavaScript, notion, 노션템플릿공유, 노션데이터베이스,

김평범's OrdinaryCode