HTML5

HTML5는 웹 애플리케이션 1.0이라고 불리던 언어로 차세대 HTML 언어이다. 이 언어를 배워야하는 이유는 무한 경쟁 속에서 살아남을 수 있는 빠른 변화를 감지하고 숙지하여 자신의 것으로 만들어야 하기 때문이다. 이런 실력을 만들기 위해 또는 웹 페이지를 배우고 싶은 사람을 위해 이 강의는 제작되었다.

HTML5 HTML5는 웹 애플리케이션 1.0이라고 불리던 언어로 차세대 HTML 언어이다. 이 언어를 배워야하는 이유는 무한 경쟁 속에서 살아남을 수 있는 빠른 변화를 감지하고 숙지하여 자신의 것으로 만들어야 하기 때문이다. 이런 실력을 만들기 위해 또는 웹 페이지를 배우고 싶은 사람을 위해 이 강의는 제작되었다.

DTD와 기본틀

HTML5를 작성하기 전에 DTD라는 것을 해주어야 한다.

DTD란 문서 형식 정의(Document Type Definition)라는 뜻으로 이 문서의 형식이 어떤 형식인지 정의하는 DTD 확장자의 파일에 연결함으로서 이 문서의 형식을 정의하는 것이다. XML에서 주로 사용되던 부분인데 XML의 경우 무한정 개인이 소스를 만들어 사용할 수 있어 이 부분이 반드시 필요했다. HTML의 경우 버전에 맞는 브라우저 상의 구현을 위해서 이전 버전들부터 해오던 규칙이다.

html5의 DTD는 다음과 같다.

<!DOCTYPE html>

위와 같이 쓰면 독타입에 대한 선언이 끝난다. 차후 정식 권고안이 나올 경우 바뀔 수는 있지만 현제는 위와 같이 써주면 된다.

 

위처럼 선언을 해주었다면 이제 기본적인 HTML의 틀을 짜보도록 하자!

기본적인 틀은 다음과 같다.

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>
        
    </body>
</html>

자 그럼 기본적인 틀에 대해서 하나하나 살펴보도록 하자!

<html></html>

은 html의 시작과 끝을 나타내는 테그이다. 여기서 테그란 HTML에서 사용하는 코드를 말한다. 추후 JS등을 배우면 테그라는 말보다는 엘리먼트라고 부르겠지만, 일단 테그라고 이야기 하도록 하겠다. 아무튼 html의 시작과 끝을 html이라는 테그로 나타내고 그 안에 다음과 같은 코드를 넣어준 것을 볼 수 있을 것이다.

<head></head>

<body></body>

head라는 테그는 사람으로 따지자면 뇌라고 이해하면 쉽다. 바로 다음에 나오는 body 테그의 안에 들어올 내용이 우리 눈에 보이는 실질적인 문서, 즉 몸이라면 head는 그 몸이 어떤 옷을 입을지, 어떤 움직임을 보여줄지를 정하는 내용을 가진 부분이다.

이제 위로 강의내용을 약간 올려 기본틀을 직접 메모장에 적고 저장을 해보자! 그리고 웹 브라우저를 통해 그 문서를 실행해보자! 어떤가? 무슨 내용이라도 어떤 글자라도 출력되는가? 만약 출력되었다면 자신이 적은 문서가 오타가 있거나 확장자를 .html로 두지 않았을 것이다. 기본틀인 만큼 한번쯤 확인해 보도록하자!

참고로 위의 기본틀은 추후 다시 아주 자세히 다룰 예정이다.

댓글

댓글 본문
버전 관리
Seon Hong Kim
현재 버전
선택 버전
graphittie 자세히 보기