[티스토리] html 편집을 이용한 한줄에 여러 크기의 글자 쓰기 (한 줄에 서로 다른 크기의 텍스트)

안녕하세요?

코딩하는 모주부입니다!

 

지난 시간에 폰트 크기를 조절하는 것에 이어

오늘은 티스토리에서 HTML 편집을 통해

한 줄에 서로 다른 크기의 글자를 적어보려고 해요!

formicae.tistory.com/19?category=815537

티스토리 글쓰기 중 글자(폰트) 크기 조절하기

먼저 예시를 보고 시작할까요?

가 나 다 라 마 바 사

위와 같이 글자 크기를 바꿀 수 있으면

글을 쓸 때 유용하겠죠?

하는 방법은 정말 간단하답니다!

티스토리 글쓰기에서 

"기본모드"로 되어있는 설정을

"HTML"로 일단 바꿔주세요!

HTML을 클릭

그러면 까만색 화면에 코드가 많이 나타날 텐데요,

너무 걱정 안하셔도 됩니다 ㅎㅎ

코드가 복잡해보이지만,

기본모드에서 작성했던 글들이 그대로 있기 때문에

크기가 다른 글을 넣고싶은 위치를

Ctrl + F 로 검색해서 찾을 수 있어요!

HTML 편집 화면

이렇게 찾기 기능을 사용하면,

노란색으로 표시가 되기 때문에 몇 번째 줄에

크기가 다른 글을 넣을지 알 수 있답니다!

 

자 이제 넣고 싶은 위치를 결정하셨다면,

아래의 코드를 복사해서 붙여 넣어봅시다!

<p><span style="font-size: 200%;">가</span>
<span style="font-size: 100%;">나</span>
<span style="font-size: 150%;">다</span>
<span style="font-size: 50%;">라</span>
<span style="font-size: 100%;">마</span>
<span style="font-size: 300%;">바</span>
<span style="font-size: 400%;">사</span></p>

여러가지 크기를 표현하느라 코드가 좀 길어졌네요.

<p> tag안에 있기만 한다면, <span> .... </span> 구문을

몇개 삭제해도 상관없답니다!

눈치 채셨겠지만, <span> tag를 이용하면

한 줄에 여러 글자를 적을 수 있어요.

되게 간단하죠?

코딩을 모르시는 분들도 잘 따라하셨으면

좋겠다는 마음에서 포스팅을 하게 되었습니다.

 

그럼 다음에도 유익한 정보를 가져오도록 할게요

오늘도 재미있는 코딩 하세요 :)