티스토리 HTML/CSS로 폰트/텍스트 효과 주기

웹디자인 국비 학원을 다니고

취직은 결국 완전 무관한 곳으로 갔지만..

이렇게 티스토리 블로그를 시작했으니까 

퍼블리싱 조금 배운 것이 쓸모 있겠지??

 

 

일단 티스토리는 특성상

글을 적는 플랫폼이기 때문에

심플하게 블로그를 꾸밀 요소엔도

폰트

컬러

글씨 크기

글씨 두께 

이 정도가 있을 것 같다 ㅎㅎ

 

 

이 요소들을 꾸미는 건

많이 어렵지는 않다.

 

 

폰트를 제외하곤

솔직히 정말 간단하다.

 

 

가장 간단하게

블로그 텍스트 스타일들을 변경하려면 

블로그에서 글을 쓸때,

상단 메뉴 중  기본모드 부분을 클릭한 후

 HTML  로 바꿔야 한다,

바로 아래 사진처럼!

 

박스 안에 표시된 곳을 HTML로 눌러서 변경해주면 된다.

 

그럼 글씨가 엄청 빽빽하게

쓰여진 페이지가 등장할 것이다.

 

요렇게 왼쪽에서 오른쪽으로 화면이 변할 것이다.

 

그럼 이제 원하는 효과 대로 변경해주면 된다.

 

 

각각 문장이 바뀔 때마다

다른 효과를 주어 텍스트 효과를 나타내어보자.

제일 간단하게만 변형을 줄 예정! 

 

---

 

1. a로 시작하는 문장은 텍스트 크기만 변경해보자.

이경우에는 aaaa 앞의 <p>안에

간단한 문장을 넣어주면 된다.

모든 문장에 공통적으로

넣어줘야할 부분이 있는데, 

바로 style=" "  이다.

그리고 글씨 크기는 font-size: ;로

;앞에 폰트 크기를 설정해주면 된다. 

나는 그냥 쉽게 30px로 줄 것이다. 

 

 

 

2. b로 시작하는 문장은 텍스트 두께만 변경해보자.

이 경우도

위에 말한 부분만 공통적으로 넣고,

글씨 두께를 나타내는 

font-weight: ;  추가해주면 된다.

속성값으로는 bold를 주겠다.

 

 

 

3. c로 시작하는 문장은 텍스트 컬러를 변경해보자.

텍스트 컬러를 변경하는 속성은

color: ; 이다. 

속성값으로는 #f00, 즉 red를 주겠다.

 

 

 

4. d로 시작하는 문장은 텍스트 크기와 두께를 같이 변경해보자.

이때는 공통으로 들어가는

 style="  " 는 한번만 들어가지만,

여러 속성을 구분하는 건 ";"로 한다.

즉 font-size: 값; font-weight: 값;

을 추가하면 된다.

글씨크기는 50px, 두께는 light을 주겠다.

 

 

 

 

 

 

 

5. e로 시작하는 문장은 위에 효과를 다 줘보도록 하자.

글씨크기는 10px,두께는 600,

컬러는 #0f0, 즉 green을 주겠다.

 

 

 

6. f로 시작하는 문장은... 아 소문자를 대문자로 바꿔보자.

그 속성은 text-transform: ; 이다.

속성값은 uppercase으로 넣어줬다.

 

 

 

7. g로 시작하는 문장은 폰트를 변경해보면 좋을 것 같다.

이게 그나마 여기서는

제일 복잡한 작업일듯 하다!

 

근데 이부분은 google font를 이용해서

응용해야 할 것 같은데,

아래 사이트를 이용하여

원하는 폰트를 골라보자.

(혹시 폰트 바꾸는 다른 방법이 있다면,

추후 찾아봐야겠다)

Google Fonts

 

마음에 드는 구글 폰트를 하나 고르자.

 

마음에 드는 폰트를 하나 골랐다면 

각 폰트의 오른쪽 상단에 있는  + 를 클릭한다.

 

클릭하면 오른쪽 하단에 검정 박스가 생길 것이고,

그걸 클릭하면 아래 그림처럼 생길 것이다.

 

 

여기서 중요한 부분이 왼쪽에

빨간 테두리 친 부분이다.

두 부분 중 상단에 있는

회색 박스를 적용해보자.

 

먼저 블로그 관리 >

왼쪽 메뉴 중 꾸미기 >

스킨 편집

으로 이동해서 클릭해야한다.

 

 

그러면 아래의 화면이 나온다. 

 

 

그후 위 사진에서 오른쪽

빨간 테두리 안 html 편집을 누르면 

아래와 같은 화면이 뜰 것이다.

 

그럼 여기에 google font의

검은 박스를 클릭했을 때 나왔던

첫번째 회색박스,

즉 아래 부분을 빨간 테두리 박스

아래 쪽에 복사해주면 된다.

 

<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">

 

잘 모르겠으면 대충

/>이렇게 끝나는 부분에서 enter 치고 

그 다음 문장에 붙여넣는다.

 

그 후 두번째 회색박스인

font-family: 'Kaushan Script', cursive;

이 부분을 복사해서 

g로 시작하는 문장 앞의

<p> 안에 style=" "와 함께 넣어 줄 것이다.

 

이미 위에 써있지만,

폰트 종류를 바꾸는 것은  font-family: ; 이다. 

 

폰트가 다른 효과를 제대로 보기 위해

이부분 역시 font-size로 크기를 조정했다.

 

 

 

8. h로 시작하는 문장은 그냥 다른 문장들과 비교를 위해 아무 효과도 넣지 않겠다!

 

즉 HTML를 아래와 같이 작성했다

(혹시 몰라서 코드블럭으로 적어놓았다.)

 

<p style="font-size:30px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p style="font-weight:bold;">bbbbbbbbbbbbbbbbbbbbbbbbb</p>
<p style="color:#f00;">ccccccccccccccccccccccccccccccc</p>
<p style="font-size:50px;font-weight:light;">dddddddddddddddddddddddd</p>
<p style="font-size:10px; font-weight:600; color:#0f0;">eeeeeeeeeeeeeeeeeeeeeeeeee</p>
<p style="text-transform:uppercase;">fffffffffffffffffffffffffffffffffffffffffff</p>
<p style="font-family: 'Kaushan Script', cursive;font-size:50px;">gggggggggggggggggggggg</p>
<p>hhhhhhhhhhhhhhhhhhhhhh</p>

 

이렇게 하게되면, 

결과는 이렇게 나온다.

 

HTML 효과를 변경해서 나온 결과

 

대충 이런식으로 결과가 나온다.

아무 효과를 주지 않은 h와 비교해서 

다른 문장들은 어떤 효과가 나오는지

대략적으로 알 수 있을 것이다!

 

 

물론 위의 특성은

거의 다 기본모드에서도

간단하게 변경이 가능하지만

이것도 알아두면

나중에 활용할 부분이 많을 것이다!

 

 

*참고로 이렇게 <p> 안에

직접 스타일을 변경하는 방법

즉, inline으로 요소에

스타일을 직접 주는 것은

효율적인 코드가 아니라고 배웠다.

 

 

하지만 CSS 깊이 공부를 하지 않고

티스토리에 텍스트 효과를 주기에는

이게 제일 간단하다.

 

 

**원래는 스킨 편집>

오른쪽 칼럼에 HTML 편집을 누른 후,

CSS에서 스타일을 주는 것이

효율적인 코드일 것이다.

근데 그렇게 하려면

class와 id라는 개념 역시

대충은 알아야한다.

 

무엇보다 인라인으로

바로 이렇게 스타일을 주면

가장 우선순위로

스타일이 적용되기 때문에, 

스킨 편집에서 다르게 설정이 되어있어도

여기서 준 효과대로 폰트가 적용될 것이다.

 

 

아마 그럴것이다..^^

(아니면 누군가가 정정해주시길 ㅜㅜ)

 

 

하 이렇게 사진도 많이 넣고, 

포토샵으로 쪼금씩 크기 조정하고, 

글도 아예 이렇게 쌩으로 길게 쓴느 건 처음이다.

약간 기빨리고 피곤하군.. 

길이 너무 길어지다보니, 

뭔가 제대로 설명이 됬는지

누가 봐도 이해는 할런지 좀 걱정이 되긴 한다..

브런치 글 보면 정말 긴 글들 많은데

대단하신분들 너무 많다 리스펙!!!