HTML 01

html파일 만들기

메모장을 열어서 텅 빈 상태에서 index.html로 저장해보자. 확장자—파일 형식—를 txt가 아닌, ‘html’로 지정해야 한다. 제대로 저장했다면 익숙한 동그라미 모양 아이콘의 파일이 생성되어 있을 것이다. 이 파일을 실행하면 빈 창이 하나 열린다.

자 이제 첫 발을 내디뎌 보자. 메모장에 다음 내용을 적고 저장한 뒤, 브라우저를 새로고침한다. ‘Hello, World!’는 언어를 막론하고 처음 코딩을 시작할 때 사용하는 꽤나 편리한 문구다.

<!doctype html>
Hello, World!

만약 브라우저 윈도우에 ‘Hello, World!’가 보인다면 성공이다. 꺽쇠로 시작해서 꺽쇠로 끝나는 첫 줄이 이 문서가 html5임을 선언하는 태그(tag)다. html4에 비해 외울 수 있을만큼 엄청나게 간소해졌다. 이러한 인간적인 단순함이 html5의 대표적인 특징이다. html4의 선언부는 너무 복잡하고 그마저도 통일되어있지 않아서 무슨 말인지도 모른 채 항상 포털사이트의 소스보기에서 카피한 뒤 붙여넣어야 했다. 세상 참 좋아졌다.

<!doctype html>
<제목>오늘의 날씨</제목>
<본문>맑고 시원한 바람이 불어옵니다.</본문>

태그에 대해서 좀 더 알아보자. 내용이 어떤 ‘구조, 항목, 형식’에 해당하는지 태그를 사용하여 시작과 끝을 표기(mark up)한 문서가 바로 html파일이다. 인디자인이나 일러스트레이터에서는 이 내용이 어떤 스타일로 지정되어 있는지 알아보기 힘든 반면 html에서는 명쾌하다. 이렇게 표기된 태그마다의 스타일링—글자 크기, 행간, 자간, 색, 여백—을 css에서 지정하는 것이 기본적인 원리다.

<!doctype html>
<h1>오늘의 날씨</h1>
<p>맑고 시원한 바람이 불어옵니다.</p>

이해를 돕기 위해 한글로 적었지만, 실제 사용되는 태그는 제목에 해당하는 ‘h1(heading)’태그와 단락에 해당하는 ‘p(paragraph)’태그다.

구조

통찰이 필요한 순간이다. 이 통찰은 숨쉬는 것처럼 투명하게 일상 곳곳에 들어있다. 대괄호와 중괄호를 통해서, ‘벤 다이어그램’을 통해서, 큰 따옴표와 작은 따옴표를 통해서, 간격과 들여쓰기를 통해서, 윈도 탐색기의 폴더를 통해서, 가방속의 파우치들을 통해서, 스프레드쉬트의 네모들을 통해서 늘상 벌어지는 일들이다.

태그안에 태그가 포함된다.

우주엔 수많은 은하계가 있고 그 중 하나의 은하계 속에 다시 수많은 항성계가 들어있다. 그 중 하나인 태양계는 태양이라는 항성과 그 주위를 공전하는 여덟의 행성으로 구성되는데 이 행성들 가운데 지구가 들어있다. 지구는 다시 여섯의 대륙과 다섯의 바다로 구성되는데 대한민국은 아시아에 속한다. 대한민국은...

구조는 어디에나 있고 매우 흥미로운 주제다. html은 포함관계를 분명하게 정의하고 서로간의 중복을 허용하지 않는 연쇄체와 계열체들로 가지런히 나열된 20세기의 현전이다. 안구를 자극하는 코딩 소스의 현란함—꼬리에 꼬리를 무는 무한 단계의 들여쓰기—은 사실 지극히 질서 정연한 것이다.

<!doctype html>
	<html>
		<head>
			<title>오늘의 날씨</title>
		</head>
		<body>
			<article>
				<h1>오늘의 날씨</h1>
				<p>오전에는 시원한 바람이 불어옵니다.</p>
				<p>오후에는 차차 흐려지겠습니다.</p>
				<p>밤에는 다시 맑아집니다.</p>
			</article>
		</body>
	</html>

친절히 이것을 설명할 수도 있겠지만, 지금은 ‘통찰’이 필요한 순간이다. 시간을 가지고 찬찬히 뜯어보라. 가장 핵심적인 원리다.