Chapter 1-1. 티스토리 시작하기 <HTML / CSS 1편>
티스토리 시작하기
티스토리를 시작하시는 대부분의 사람들은 처음 접해보는 HTML이란 프로그램에 매우 당황하셨을테고 무엇을 어떻게 건들어야 할지 몰라서 우왕좌왕하다가 포기하는 경우가 태반일 겁니다. 특히나 티스토리라는 블로그는 초대장이라는 시스템에 의해 가입이 가능하기에 어려운 초대장을 얻어 진입하였음에도 불구하고 많은 블로그들이 폐쇄 또는 방치되어 버리는 경우가 허다합니다.
저 역시 티스토리라는 매체를 처음 접하게 된 것은 1년전 "하루 2시간 블로그로 1000달러 벌기"라는 책을 통해 접하였고 네이버 블로그만을 만져왔던 저는 티스토리라는 매체를 얕보고 덤볐다가 큰 코를 다쳤습니다. 당연 하루 2시간만 투자하기 위해 덤볐던 티스토리에 어언 1년이란 세월을 투자하고서야 감이 잡히기 시작하니 처음 접하시는 분들의 고난을 이해하고도 남음이 있습니다.
앞으로의 Chapter 1의 포스팅은 HTML 5 / CSS를 중점적으로 다룰 것이며 기초부터 고급과정까지 천천히 다룰 예정입니다. 물론 티스토리에 기반한 HTML 작업이며 세세한 부분까지 설명할 생각입니다. 포스팅을 보시다가 모르는 부분이 있으시면 덧글 환영합니다. 또한 다같이 만들어가는 하나의 과정을 만들고자 함이기에 혹여 관심이 있어 보시는 분이 계시면 틀린부분이나 제대로 적용되지 않는 부분은 덧글로 지적해 주시면 감사드리겠습니다.
Html 5의 기초는 제가 강사가 아닌 관계로 차근차근 초보자들이 이해하기 쉽게 설명하기 위하여 www.w3schools.com의 내용을 활용할 것이며 이해가 안되시면 해당 사이트를 활용하시면 문제없이 이해가 될 줄로 압니다. 하지만 영문사이트인 관계로 도움이 필요하시면 덧글로 남겨주세요.
|
1. HTML 5 기초다지기 |
우선 HTML 포스팅을 시작하기에 앞서 HTML 전용 편집기를 준비해 주세요.
|
▼ HTML 전용 편집기 - Edit Plus ▼
|
epp370.exe준비가 되셨으면 시작합니다.
<!DOCTYPE html> <HTML5 시작 선언>
<html> <HTML5 코딩 시작>
<head> <Header 시작 선언>
<meta charset="utf-8"> <utf-8은 언어 지원 코드 입니다. 전세계 언어 지원>
<title>Page Title</title> <홈페이지 제목>
</head> <Header 종결>
<body> <Body 시작 선언>
<h1>My First Heading</h1> <본문에 나올 제목>
<p>My first paragraph.</p> <본문에 나올 텍스트>
</body> <Body 종결>
</html> <Html 종결>
<http://www.w3schools.com/html/default.asp 내용>
<!DOCTYPE html>
Html 5에서는 웹문서의 시작을 알려주는 문서의 유형을 지정하는 <!DOCTYPE html>을 사용하여 시작을 선언합니다. 과거 Html 4에서는 3가지 모드로 나누어 매우 복잡한 선언을 하였으나 HTML 5에서는 위 선언으로 통일하였습니다. 해서 위의 <!DOCTYPE html>을 확인하셨으면 "HTML 5로 선언된 문서구나!"라고 판단하셔도 되며 HTML 5에 기초하여 문서를 해석해 나가시면 됩니다. 여기서는 반응형 블로그가 제작 가능한 HTML 5만을 다루기로 하겠습니다.
<head>
<meta charset="uft-8">
<title>Page Title</title>
</head>
Html문서는 크게 head와 body로 나뉘며 글에 비유하면 head는 제목, body는 본문 글에 해당됩니다. head의 첫번째 구절인 <meta>태그를 보시면 charset="utf-8"이라고 선언된 문장을 보실 수 있으실 겁니다. 이는 전세계 언어를 지원하는 문자 인코딩으로써 대부분의 티스토리 사이트는 charset="utf-8"를 활용합니다. 만약 이 meta 태그에 "한국어"만을 입력하고 싶으시면 <meta lang="ko">라 선언하면 한국어만이 지원되고 타 언어는 지원되지 않습니다.
|
코 드 |
de |
en |
fr |
ja |
ko |
zh |
|
언 어 |
독일어 |
영어 |
프랑스어 |
일본어 |
한국어 |
중국어 |
위의 코드로 특정 언어만을 지정하여 웹 문서를 만드는 것이 가능합니다. 하지만 티스토리를 운영하는 여러분께서는 분명 전세계의 모든 사용자가 이용하길 원하실테니 charset="utf-8"로 지정하여 meta를 선언합니다.
다음은 Head에서 가장 중요한 태그인 <title>태그 입니다. 말 그대로 홈페이지에 들어가는 제목입니다. 이는 제목 표시줄에 지정이 되고 방문자들 또는 검색 봇은 이 Title에서 해당 홈페이지의 내용이 어떠한 것인지 대략적으로 알 수 있습니다. 그렇기 때문에 제목을 아무렇게나 짓는 것보다는 홈페이지 내용을 요약할만한 정보를 넣게 되면 사용자와 검색봇이 해당 사이트를 스캔하는데에 많은 도움이 됩니다.
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
이제 head가 종료되고 body가 시작되었습니다. 그럼 body의 첫번째 선언된 <h1>태그를 보시지요. <h1>는 제목 태그로 h1부터 n까지 사용이 가능하며 1~n까지 연속으로 사용했을 때 1은 대단원의 제목이 되며 그 뒤로 2~n까지는 이 1의 부제목으로 홈페이지에서 출력되는 그 강조도 달라집니다. 닫기 위해선 반드시 </h1>태그를 활용해야 합니다.
<w3school의 코딩 편집기를 활용한 결과물>
<p>태그는 텍스트 출력을 도와주는 태그로 홈페이지에서 가장 많이 사용되는 태그입니다. 포스팅을 하시다가 쓰신 글들을 html로 확인해 보시면 <p>태그가 얼마나 많이 쓰이는 것인가를 확인해 보실 수 있습니다. 모두 작성하신 후 </p>로 글을 마무리 합니다.
우선 기본적인 Html 5의 구조를 살펴보았습니다. 어느정도 이해가 가시는지요? 
하지만 전달해 드릴 것들이 아주 많은데 기초를 모르면 못따라오실까 저어되어 위의 내용은 기초 중의 기초만을 다루었습니다. 아무래도 Chapter 1은 아주~~ 길어질 것 같네요. 하지만 차근차근 해나가시다보면 티스토리 블로그 하나는 뚝딱 만들어 낼 실력은 되실 겁니다. 겁먹지 말고 같이 끝까지 가보시자구요 
'블로그 > 블로그 노하우' 카테고리의 다른 글
| 내 블로그 순위는 몇등일까요? - 블로그 차트 (0) | 2016.11.02 |
|---|---|
| 티스토리 치환자 모음링크 및 구현방법 (0) | 2016.11.02 |
| Chapter 1-2. 티스토리 치환자 <HTML / CSS 2-1편> (1) | 2015.02.21 |
| 티스토리 블로거가 가장 궁금해 하는 점 (0) | 2015.02.20 |
| 티스토리 블로그에 네이버 이웃 커넥트 추가하기 (0) | 2015.02.15 |