03. 티스토리 블로그 스킨 HTML & CSS 수정

미나'S
Blog/Tistory
2022. 9. 17.

Contents

안녕하세요. 미나캣입니다.

오늘은 티스토리 블로그의 스킨을 수정하는 방법에 대해 알아볼게요.

다른 대부분의 블로그와 마찬가지로 티스토리 역시 완성된 형태의 블로그 플랫폼을 제공합니다.

누구나 정해진 규칙에 따라, 그것을 벗어나지 않는 범위내에서 활용할 수 있다는 것이죠.

코딩밥 드시는 분이시거나, 은둔 능력자 분이시라면

웹호스팅 서버를 이용하여 홈페이지나 블로그를 직접 원하는대로 꾸며가며 만드시겠지만,

저와 같은 분들은 모두 대기업 플랫폼의 노예가 될 수 밖에 없습니다.

그래도 남들와 구분될 수 있도록 자신만의 감성을 뽐내볼 수 있게 노력해봅니다.

티스토리 블로그 스킨 수정

"블로그관리 홈 - 꾸미기 - 스킨 편집" 메뉴로 이동합니다.

이동 후, 오른쪽 상단의 "HTML 편집" 메뉴를 누르면, 현재 스킨의 HTML 및 CSS 를 편집하실 수 있습니다.

HTML & CSS 란 무엇인가?

그러면, HTML(Hyper Text Markup Language)와 CSS(Cascading Style Sheets)는 무엇일까요?

HTML이 텍스트나 이미지, 표와 같은 구성 요소를 웹 문서에 넣어 뼈대를 만드는 구조적 설계(Structure Design)라면,

CSS는 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 비주얼 디자인(Visual Design)입니다.

HTML에서 이미지와 텍스트 등과 같은 구성 요소들을 정의하고, CSS에서 그 요소들을 꾸민다고 생각하면 쉽겠습니다.

HTML(Hyper Text Markup Language)

HTML 문서는 보통 아래와 같이 구성되어 있습니다.

항상 < > 으로 시작해서 </> 으로 끝납니다. 모든 HTML 문서는 <html> 로 시작해서 </html> 로 끝나요.

<html></html> 사이에는 <head>와 <body>가 위치하고, <head></head>안에는 사이트의 제목인 <title>, 페이지 정보인 <meta> 그리고 CSS를 연결해서 사용할 수 있는 <link>가 있습니다.

<body>에는 홈페이지/블로그에서 눈으로 보여지는 모든 요소들이 나열되어 있습니다.

<!doctype html>
<html lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/service_name.css">
</head>
<body>

</body>
</html>

티스토리 북 클럽 스킨의 HTML을 살펴보면, 위의 기본틀에서 벗어나지 않는 것을 볼 수 있습니다.

line 7 을 보시면, <link> 를 통해 Style Sheet인 CSS를 참조하는 것을 확인할 수 있습니다.

HTML을 상세히 공부하면 좋겠지만...

우리는 단순히 뭔가를 < > 으로 시작했다면, </> 으로 반드시 끝내야 한다는 사실만 명심합시다!

CSS(Cascading Style Sheets)

CSS는 아래와 같은 코드의 집합입니다.

Selectors(선택자)를 정의하고, 그 안에 속성(Properties)의 값(Values)를 서술합니다.

Selector1 {
	Property1: Value1;
	Property2: Value2;
	...
}
Selector2 {
	Property1: Value1;
	Property2: Value2;
	...
}
...

티스토리 북 클럽 스킨의 CSS를 살펴보면, 위의 기본틀에서 벗어나지 않는 것을 볼 수 있습니다.

마무리

HTML & CSS를 아주 간단히 알아봤습니다. HTML과 CSS를 상세히 공부하게 된다면 좋겠지만...

HTML에서는 < > 으로 시작했다면, </> 으로 반드시 끝내야 한다는 사실과,

CSS에서는 " { " 가 나왔다면 " } " 가, " ( "가 나왔다면 " ) "가 반드시 쌍으로 존재해야 하며, "세미콜론( ;)" 의 존재를 절대 잊어서는 안된다는 사실만 기억하세요.

'Blog > Tistory' 카테고리의 다른 글

05. 티스토리 블로그 글 하단 관련글 썸네일 크기 변경 (0)	2022.09.20
04. 티스토리 블로그 북클럽 뉴북 썸네일 크기 변경 (0)	2022.09.19
02. 티스토리 블로그 검색엔진 등록(네이버, 다음, 구글, 줌, 빙, 야후) (0)	2022.09.16
01. 티스토리 블로그 기본 설정 (0)	2022.09.16
티스토리 본문 자동 목차 만들기 (0)	2022.09.14

CSS, HTML, HTML&CSS 수정, 꾸미기, 스킨 수정, 티스토리 스킨