그동안 HTML, CSS, 자바스크립트, PHP 등등 여러 가지 언어들을 독학으로 그때 그때 필요한 부분만 주먹구구식으로 대충 익혀서 써먹어 왔었는데요.
체계적으로 공부한 것이 아니라서 그런지 이것도 어느 정도 지나니 한계에 부닥치게 되네요.
그래서, 올해는 기본기부터 탄탄하게 다진다는 목표를 갖고서 정말 기본부터 하나씩 차근차근 공부해 보기로 했어요.
헤헤.. 벌써부터 작심삼일로 끝나게 되지는 않을지 걱정이 되기도 하지만 일단은 무리하지 않는 범위 내에서 긴 시간을 두고 조금씩 부담없는 분량 정도로 느긋하게 강좌 겸 개인 공부 겸 겸사 겸사 해보기로 했습니다. (^.^)
HTML 소개
웹 공부의 그 첫 번째 시작은 HTML 강좌부터 하기로 했어요. 그 다음은 CSS, javascript 등의 순서대로 해나갈 계획이에요. 기본기부터 다진다고는 했지만 역시나 독학으로 하는 것이기에 각 용어나 개념 등에 있어서 주관적인 해석으로 설명이 진행될 수도 있으니 참고하세요. (^.^)
HTML이란 무엇이지?
HTML은 ‘Hyper Text Markup Language‘의 영문 첫글자를 따서 줄인 용어로서 웹 페이지를 만들기 위한 표준 마크업 언어를 말합니다.
우리가 흔히 태그(tag)라고 부르는 것들을 ‘HTML element‘라고 하는데요. 우리들이 브라우저를 통해 접하고 있는 HTML 페이지들은 이런 HTML element들로 이루어져 있습니다.
인터넷 익스플로러, 크롬, 파이어폭스 같은 브라우저들은 HTML tag를 코드 그대로 보여주는 게 아니라 이들을 이용해 그 내용을 웹 페이지에 구현하여 보여줍니다.
HTML document 구조
<title>헤드 태그 사이에 페이지 타이틀이 위치합니다.</title>
</head>
<h1>본문 내용을 입력합니다.</h1>
<p>바디 태그 사이에 브라우저를 통해 보여질 내용을 작성합니다.</p>
</body>
</html>
<!DOCTYPE html> 선언을 통해 이 문서(docment)의 type이 ‘HTML5‘라는 것을 알 수 있습니다.
<html> element는 HTML 페이지의 root element에 해당하고요. 그 속에 <head> element와 <body> element를 품고 있습니다.
<head> element에는 그 문서에 대한 각종 정보(<meta>, <title>, <javascript>, <style>, <link> 등)가 포함될 수 있고요.
<body> element에는 브라우저를 통해 보여지게 될 내용들이 포함됩니다.
HTML Tags
앞에서도 보아왔듯이 각각의 element 이름들이 꺾쇠 괄호(angle brackets)로 감싸여 있는 것을 볼 수 있는데요.
이렇게 되어 있는 것을 가리켜 우리는 흔히 ‘HTML tag‘라고 부르며, 아래와 같은 형식으로 구성되어 있는 것을 볼 수 있습니다.
모든 경우는 아니지만 일반적으로 HTML tag는 ‘<p>와 </p>’처럼 둘이 짝을 이루는 형태로 되어 있는데요.
<p>와 </p>의 경우를 예로 들어 설명하자면 첫 번째 태그(<p>)를 ‘start tag‘ 혹은 ‘opening tag‘라고 하고요.
그리고, 두 번째 태그(</p>)는 ‘end tag‘ 혹은 ‘closing tag‘라고 부르며, 태그 이름 앞에 forword slash(/)를 넣어야 합니다.
<!DOCTYPE> 선언
<!DOCTYPE> 선언을 통해 document type이 정의되면 브라우저는 선언된 doctype에 따라 웹 페이지를 나타내게 됩니다. (흐.. 설명이 더 어려운 것 같네.. ㅎㅎ; 음.. 쉽게 말해 HTML5에 새롭게 추가된 기능들을 적용해 문서를 작성해 놓고 doctype 선언을 HTML4로 하게 된다면 웹 페이지에 올바르게 구현되지 않는다는 거에요.)
<!DOCTYPE> 선언은 대소문자를 구별하지 않으며, 어떠한 HTML tag들보다도 앞에 위치하되 페이지의 상단에 단 한 번만 나와야 합니다. Document type이 HTML5의 경우라면 다음과 같이 선언하면 됩니다.
휴~, 오늘은 여기까지…
무리하지 않을 거라고 했는데 막상 강좌 형태로 정리하면서 하려니 손이 많이 가고 시간이 많이 걸리네요. (흑흑..ㅠㅠ) 이러다가 지쳐서 중도 포기하면 안 되는데… 이왕 시작한 거 하는데까지 이를 악물고 해볼랍니다. 으라차차 힘내자! 아자! 아자!!