티스토리 꾸미는 방법을 소개하겠습니다. 이 글을 읽어주시면 티스토리 꾸미는 방법을 이해하게 되실 것입니다. 티스토리 꾸미는 방법의 정보가 필요하면 모두 읽어주세요. 이제 아래에서 모두 알려드리겠습니다.
목 차
티스토리 꾸미는 방법
티스토리 꾸미는 방법에는 편집기를 이용하여 HTML, CSS를 활용하면서 디자인을 완성하는 것입니다. 폰트만 바꿔도 자신의 티스토리가 다르게 보인다는 사실 알고 있나요? 예시로 이 글에서 알려드릴게요!
편집기 이용하기
티스토리 꾸미기 방법은 바로 편집기 이용하기입니다. 다행히도 티스토리는 스킨 편집에서 꾸밀 수 있는 공간이 있습니다.
블로그 관리에서 꾸미기 안에 스킨 편집을 누르면 됩니다. 그리고 나서 html 편집을 눌러주세요.
위 사진이 바로 편집기입니다. 이제 이곳에서 티스토리 꾸미기를 할 수 있습니다.
폰트 적용하기
티스토리 꾸미는 방법은 티스토리 편집기를 이용하면 됩니다. 하지만 막상 그곳에 들어갔지만, 어디를 고쳐야 하는지 모르는 상황이겠죠?
HTML, CSS를 이해한다면 간단하게 티스토리 꾸밀 수 있습니다. 일단 이해하기 위해 폰트 변경 해볼게요!
먼저 구글 폰트에서 자신이 원하는 폰트를 선택해주세요. Language에서 한국어로 바꿔주고 선택하면 쉽게 고를 수 있습니다.
폰트를 고르면 styles에서 굵기를 선택해야 하니다. 오른쪽에 Select this style을 클릭하면 Selected family에서 Use on the web에 있는 link 또는 import를 선택한 후 티스토리 편집기에 넣어야 합니다. 이 글에서는 link로 적용하겠습니다.
HTML 탭에서 head 부분에 link를 넣습니다. 위 사진처럼 말이죠.
CSS 탭에서 font-family 부분을 복사 후 body{} 안에 붙여넣기 해보세요. 위 사진을 참고하세요.
HTML, CSS 기초 지식
HTML은 웹 페이지에서 뼈대를 담당합니다. 그중 head는 웹 페이지의 정보를 입력하는 코드로 수익형 블로그를 운영하는 사람이라면 알고 있는 SEO에 큰 영향을 끼칩니다. 물론 콘텐츠가 더 중요하지만 말이죠.
웹 페이지의 정보에는 구글 폰트와 같이 외부에서 가져올 수 있는 link, script 및 제목, 설명 등이 올 수 있습니다.
CSS는 웹 페이지의 디자인을 담당합니다.
body{
font-family: 'Nanum Gothic', 'sans-serif';
}폰트 적용하기에서 했던 font-family는 글꼴을 정하는 속성입니다. 위 코드를 설명하자면 나눔 고딕을 사용하고 획의 삐침이 없는 글씨체를 적용한다는 뜻입니다.
그렇다고 font-family 위에 있는 body는 무엇을 뜻할까요? 위 사진을 보면 body라고 보이나요? 보인다면 맨 밑에 </body>가 있습니다. body에는 수많은 '<>'들이 있는데 이것을 태그 또는 요소라고 부릅니다. 실질적으로 티스토리 뼈대를 맞출 때 사용합니다.
<body>부터 </body>까지가 body 태그의 영역이 됩니다. 즉, 자신의 블로그에 보이는 화면이 body 태그입니다. 따라서, 위 코드의 뜻은 body 태그에 대해서 font-family를 적용한다는 뜻입니다.
결론
티스토리 꾸미는 방법은 기본적으로 HTML, CSS를 알아야 합니다. 기초적으로 위의 내용을 이해한다면 검색을 통해 충분히 예쁜 디자인을 완성할 수 있습니다.
HTML, CSS 공부에 도움이 되는 사이트
티스토리 꾸미는 방법을 알려드렸습니다. 모두 읽어주셔서 감사합니다. 다른 정보도 필요하시다면 상단의 글들을 참고하시면 도움이 될 것입니다.
