본문 바로가기

Tech-tips/Skin how

스킨 만들기 강좌 - 1. HTML 기초

저도 그렇게 웹에 대해서 뛰어난 편은 아닌 초보 웹개발자입니다. 기껏해야 만들줄 아는 것은 위젯같은 간단한 웹앱이나 고작 티스토리 스킨 만드는 것 입니다. 그래서 부족한 부분이 있다면 지적해주시면 겸허히 받아 드리도록 하겠습니다.


티스토리로 이주 해 오신 분들은 여러가지 이유가 있어서 오셨을 겁니다. 무제한 저장 용량일수도 있고, 자신만의 도매인을 쓸수도 있는 자유로운 환경이거나, 수많은 플러그인의 다양한 기능, 여러 포털 블로그와는 차별화된 자유도, 또는 자유로운 스킨 제작일수도 있을겁니다.


저 같은 경우에는 오로지 스킨을 자유롭게 쓰고 싶다는 일념으로 티스토리에 이주 해왔습니다. 그러다 보니 하라는 블로그 관리나 포스팅은 안하고 허구한 날 스킨이나 뜯어 고치고 있습니다. -_-;;;;


어쨌든 서론은 여기까지 하고 제가 약 4개월 남짓 되는 기간 동안 터득한 티스토리 스킨 제작 노하우(라고 말하니까 얼굴이 다 빨개지내요)를 알려드리겠습니다.


1.기본 html 구조

html의 가장 기초가 되는 부분 부터 알아보도록 하겠습니다.

<!DOCTYPE html>
<html> <body>
<h1>제목</h1> <p>내용.</p>
</body> </html>

이게 기본 구조입니다.

!doctype으로 이 문서가 어떤 유형인지를 선언하게 됩니다. <!DOCTYPE html>은 html5를 선언하는 문장입니다.

html과 /html 사이에 있는 것들이 웹 페이지가 나타나는 부분입니다.

body 와 /body 사이가 페이지가 나오는 부분입니다.

h1과 /h1은 제목을 나타냅니다. 이 글위 에 1. 기본 html 구조도 h1 태그로 둘러 싸여 있습니다. 브라우저에서 소스보기를 해서 확인해보세요

p와 /p 사이에는 내용이 나타나게 됩니다. 여기 적어지고 있는 모든 택스트는 p태그에 둘러 싸여 있습니다.


HTML은 무엇인가?

간단한 용어 설명입니다.

HTML은 Hyper Text Markup Language 입니다. 그러므로 HTML을 작성 할때는 Markup 한다는 말을 씁니다. Markup 언어는 일련의 Markup Tag로 구성되어 있습니다. Tag는 문서 내용을 정의 하게 됩니다. HTML 문서는 HTML Tag와 일반 문서를 함께 포함합니다. HTML 문서는 달리말하면 웹 페이지라고 부릅니다.