정보 보고갈래?

굳이 변경안해도 되지만 가독성 좋은 글자체로 변경하고 싶지 않으신가요? 이번에는 글자체를 변경해 보도록 해보겠습니다. 글씨크기 변경하는 것보다 정말 쉬우니 잘 따라오시길 바랍니다.

글자체(폰트) 변경

글자체를 변경하기 위해서는 두가지 종류의 사이트가 있습니다

✅첫 번째는 구글폰트  

✅두번재는 눈누폰트입니다. 

저는 눈누폰트에 좋은 글자체들이 많아서 눈누폰트를 사용해 보도록 하겠습니다.

눈누폰트에 들어가서 원하는 폰트를 선택해 줍니다. 눈누폰트를 쓰실 때는 무료로 쓸 수 있는지 저자권 문제가 있기 때문에 꼭 확인해 주셔야 합니다.

✅ 원하는 폰트를 선택해서 아래로 스크롤을 내려보면 허용여부에 동그라미가 다 있는지 확인해주시면 됩니다.

✅폰트에서 웹폰트로 사용에 HTML을 복사해 줍니다.

✅그리고 이제는 다아시죠? 스킨편집 → HTML편집에서 CSS로 들어가 줍니다.

✅그리고 @charset "UTF-8"; 을 찾아주시고 그 아래 눈누폰드에서 복사한 HTML을 넣습니다. 

✅그리고 또 변경해주어야 하는 것이 있는데요. 코드 중에서 font-family: 'NanumSquareNeo-Variable';

에서 NanumSquareNeo-Variable가 폰트 이름입니다. 

CSS에서 Ctrl + f를 눌러서 font-fmaily를 검색하시면 기존의 폰트 이름을 위에 내가 적용하고 싶은 폰트이름으로 다 변경해 주시면 됩니다. 간단하죠? 생각보다 몇 개 되지 않습니다.

다음에는 진짜 아이콘, 파비콘 적용하는 것을 가져오겠습니다. 

티스토리를 운영하면서 목록 사이드바에 내가 원하는 이미지를 넣고 싶지 않으신가요? 차근차근 따라 하시면 티스토리를 들어오지 마자 내가 원하는 이미지를 배너로 만들 수 있습니다.

이미지 만들기

✅ 처음 배너를 만들기 위해서 자신이 원하는 이미지를 먼저 만들어야 합니다. 보통 원하는 이미지를 가져오거나 눌렀으면 하는 이미지를 만들어 줍니다. 저는 미리퍼스에서 이미지를 만들겠습니다.

✅ 설정 → 스킨편집 → html편집 → 파일업로드로 들어가서 추가를 눌러 내가 원하는 이미지를 넣어줍니다.

✅ 그리고 내가 원하는 이미지의 주소를 복사합니다. 원하는 이미지 오른쪽마우스를 클릭하고 링크주소복사를 하시면됩니다.

✅ 그리고 

✅ 그리고 꾸미기에 사이드바를 들어가서 HTML 배너 출력을 추가해 줍니다.

✅  HTML 배너출력에서 내가 원하는 이름을 넣기, 아래 주소를 복사해서 내가 배너를 눌렀을 때 이동했으면 해는 주소와, 아까 이미지주소를 넣어줍니다.  *HTML 배너출력 추가 주소* 를 참고하세

✅ 그러면 목록에 이렇게 이미지가 넣어졌고 저 이미지를 클릭하게 되면 내가 원하는 URL로 이동하게 됩니다.

쉽지? 다음에는 아이콘, 파비콘을 만드는 방법에 대해서 말씀드리겠습니다.

티스토리운영을 하면서 너무 간단하지만 전혀모르고 있던 기능들이 많이 있습니다. 오늘은 간단하게 가로로 이미지를 추가하는 방법과 슬라이드 이미지를 만드는 방법을 설명드리겠습니다.

이미지 추가하기

✅ 티스토리 상단에 사진을 눌러서 내가 원하는 이미지를 추가해 줍니다.  

✅ 이미지를 추가하게 되면 이렇게 세로로 이미지가 길게 추가되어 있는 것을 볼 수 있습니다. 

✅ 가로로 원하는 이미지를 드래그해서 위로 올리면 빨간 네모박스 안에처럼 빨간 줄이 보이게 됩니다. 그 빨간 줄이 생기는 쪽으로 드래그해줍니다. 

✅ 드래그를 해주면 이렇게 가로로 2개의 이미지가 겹쳐서 한줄에 보이게 됩니다. 이런 식으로 계속 이미지를 추가해 주시면 됩니다. 

이미지 슬라이드

이미지 슬라이드란 내가 이미지를 선택해서 이미지를 볼 수 있도록 티스토리에서 적용하는 기능을 말합니다. 아래 이미지를 보시면 회색 네모칸이 보이시죠? 그 회색 네모칸을 누르면 다른 이미지로 넘어가게 됩니다.

✅ 이미지 추가와 동일하게 티스토리 상단에 사진에서 슬라이드쇼를 선택합니다.

✅ 원하는 이미지를 넣고싶은 만큼 추가해 주고 확인을 누릅니다. 

✅ 그러면 빨간 네모칸 처럼 슬라이드 이미지가 추가를 해서 회색 칸을 선택하게 되면 다른 이미지로 넘어가게 됩니다.  

간단하죠? 이렇게 이미지를 깔끔하게 한 장만 보이게 함으로써 블로그 자체가 지저분하지 않게 됩니다. 

다음에는 배너추가하는 방법으로 돌아오겠습니다. 

오늘은 티스토리에서 블로그 내에서 썸네일을 하지 않고도 대표 썸네일을 지정하는 방법에 대해서 알려드리겠습니다.

대표 썸네일

 대표 썸내일은 이렇게 블로그 글 앞쪽에 내가 원하는 썸네일을 지정하는 것을 말합니다.  보통, 다음, 구글, 네이버에서 글의 제목과 함께 표시가 되어서 클릭을 더 자유도 할 수 있도록 도와줍니다. 

그래서 보통 이렇게 글안에 썸네일을 만들어서 대표로 지정해 주거나, 대표로 지정하지 않는다면 첫 번째 사진이 보통 대표이미지로 지정되게 됩니다. 

✅ 글 안에 이렇게 썸네일이미지를 넣어놓게 되면 광고나 목록이 겹치게 되서 별로 보기가 싫어집니다. 

대표 썸네일 이미지 설정

블로그 글을 완료를 누르시면 아래 발행에서 빨간 네모칸에 대표이미지 추가를 선택해서 내가 원하는 썸네일 이미지를 넣게 되면 블로그 내에 썸네일을 넣지 않아도 설정할 수 있습니다.  

다음에도 티스토리 운영관련해서 계속 포스팅하도록 하겠습니다!

조코딩 유튜브를 통해서 HTML과 CSS에 대해서 공부했지만, 블로그를 하면서 다시 코딩을 할 줄이야. 하나하나 차근차근 블로그에 HTML과 CSS를 적용해서 내가 직접 스킨을 만들 날을 위해서, HTML을 공부하겠습니다.

글자크기 변경

일단, 기본적인 것은 알고가야 합니다. 티스토리에서는 HTML과 CSS를 변경할 수 있는 자유도가 있습니다.  그래서 HTML모드를 들어가면 글자 크기를 변경할 수 있습니다. 실제 본문에서 HTML로 들어가서 SIZE숫자를 변경하면 변경되지 않습니다. 현재 H태그 본문의 사이즈를 확인만 할 수 있습니다.

고래스킨

● 고래스킨의 경우 환경설정 →  스킨편집 →  HTML편집 →  CSS 로 들어갑니다. 

● CSS에서 컨트롤 +F 찾기에서 ( .e-content.post-content p )를 검색합니다. 

● 그러면 아래 항목이 검색되며, font-size에 자신이 원하는 px를 넣습니다. 

● 적용을 누르고 확인합니다.

나머지 스킨

스킨마다 CSS 코드설정이 다르기 때문에 글자크기에 대한 코드를 찾는 방법을 알아보겠습니다. 

● 본문에서 F12키를 누르거나, 오른쪽 마우스를 클릭하고 검사를 클릭합니다.  그러면 아래 화면이 나오며 빨간색 네모칸을 클릭합니다. 

● 그리고 내가 바꾸고 싶은 글자에 드래그 하면 아래 사진처럼 블록 처리가 됩니다. 그리고 빨간색 네모 부분에 글자가 해당하는 CSS 코드 부분이 나옵니다.  고래 스킨이기 때문에. e-content.post-content p이 나오져? 동일하게 font-size에 가서 px를 조절하시면 됩니다. 

간단하게 글자크기를 변경하는 방법에 대해서 배워봤습니다. HTML, CSS 잘하고싶습니다.