이번 시리즈에서는 HTML을 간단히 배워보는 글을 써보려고 합니다.
우리가 인터넷을 통해 보는 웹페이지들은 모두 HTML이라는 언어를 통해 뼈대가 만들어진 페이지입니다.
가장 초기의 웹페이지는 정보의 전달만을 위해 일반 문서와 같은 페이지를 HTML로만 만들어 정보를 알리기도 하였습니다.
하지만 오늘날 여러 웹 프로그래밍 언어와 데이터베이스 등을 이용하여 동적인 웹페이지들이 생산되고 이들이 주를 이루고 있습니다.
HTML은 웹페이지를 위한 언어입니다. 제목, 본문, 목록, 도표 등과 같은 문서를 여러 링크, 이미지, 미디어 등을 함께 사용하여 웹 브라우저를 통해 볼 수 있는 페이지의 구조를 만드는 언어입니다. HTML 코드라고 불리는 꺽쇠 괄호안의 명령어(?)를 이용하여 작성하게 됩니다. 간단히 이런 HTML 코드를 이용하여 페이지의 내용의 구조적 정의를 선언하여 웹브라우저가 이를 구조에 맞게 표현하게 됩니다.
HTML 언어 자체는 웹브라우저가 표현하기 때문에 브라우저마다 약간의 다른 모습으로 표현될 수 있으니 웹 표준을 잘 맞추어 코딩한다면 여러 웹브라우저에서 같은 결과를 얻을 수 있을 것입니다.
그럼 지난번에 설치한 Visual Studio Code를 이용하여 간단한 HTML 문서를 만들어 보도록 하겠습니다. 혹시 아직 비주얼 스튜디오 코드를 설치하지 않은 분들은 아래 링크를 통해 설치한 뒤 같이 진행하도록 하겠습니다.
HTML 문서 작성하기
비주얼 스튜디오 코드 프로그램을 실행하여 아래화면과 같이 처음화면에서 새파일을 누르시거나 파일에 새파일을 눌러 새로운 문서를 하나 생성해 주세요.
그리고 오른쪽 아래 일반텍스트를 HTML로 변경해 주시면 HTML 문서 작업준비가 완료되었습니다. 추가로 인코딩 또한 UTF-8로 되어 있는지 확인해 주세요
그럼 기본적인 HTML문서에 모두 들어가는 코드를 작성해 보도록 하겠습니다. 아래의 코드를 비주얼 스튜디오 코드로 작성해 주신 뒤에 HTML문서로 저장해주세요.
|
1
2
3
4
5
6
7
8
9
10 |
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML 기본문서</title>
</head>
<body>
Hello World!!
</body>
</html> |
cs |
저장된 HTML을 브라우저로 열고 아래와 비슷한 화면이 나오면 성공입니다!
코드에 대한 설명
HTML 기본문법
|
<여는태그 속성="값">내용</닫는태그> |
cs |
우선 기본적인 HTML의 문법은 꺽쇠괄호로 이루어진 여는 태그로 시작합니다. 그리고 동일하게 꺽쇠괄호로 되어있지만 명령어(?) 앞에 슬러쉬(/)가 있는 닫는 태그로 마무리 해주어야 합니다. 몇몇의 예외 사항으로 닫는 태그가 없이 단독으로 사용하는 태그도 존재합니다.
<!DOCTYPE html>
|
<!DOCTYPE HTML> |
cs |
제일 첫줄의 <!DOCTYPE HTML> 선언은 웹표준을 위한 HTML문서의 선언입니다. HTML5으로 버전이 바뀌면서 기존 XHTML에서 사용하던 복잡한 문서선언이 위와 같이 간단하게 바뀌었습니다. 그 전에는 웹표준을 지키기 위해 복잡했던 HTML 선언 태그를 외우지는 못하고 기본 문서에서 복사해 사용하기도 했습니다. HTML 문서를 웹표준에 맞추어 만들기 위해 가장먼저 작성해야할 태그입니다. 이 DOCTYPE선언은 닫는 태그없이 단독으로 사용하는 태그입니다.
<html>...</html>
|
<html>...</html> |
cs |
그 다음줄은 <HTML>입니다. 이 태그부터 </HTML>로 닫는 부분까지의 내용이 HTML 태그라는 태그입니다. 추가로 Lang 속성을 통해 이문서가 한글로 작성되었다고 한글에 해당되는 ko값을 주어 작성하였습니다. 보통 우리가 브라우저를 통해 페이지를 보면 lang 속성은 필요가 없을 수도 있습니다. 하지만 이 속성을 사용하는 이유는 브라우저가 이 문서가 무슨 언어로 작성했는지 파악할 수 있도록 이 속성을 사용합니다. 또한 시각장애인들의 음성 서비스 지원을 위해 사용합니다. 만약 브라우저 기본 음성 지원을 사용하면 1,2,3등과 같은 문자로 표현은 하나이지만 각 언어별로 다르게 발음할 경우 HTML 안의 lang 속성을 참고하여 음성 지원이 된다고 합니다.
<head>...</head>
|
<head>...</head> |
cs |
head 태그안의 내용은 문서의 정보와 페이지에 사용된 여러 연결파일을 추가하는 태그가 들어가게 됩니다. 문서의 인코딩정보, 웹페이지 혹은 사이트 제목, 스타일시트, 자바스크립트 등 여러 정보가 들어가게 되며 이정보들은 브라우저 화면에는 나오지 않습니다.
이번 글은 여기까지입니다. 다음은 기본 HTML문서 구조를 만들어 보려고 합니다. 현재 사용되고 있는 HTML5으로 만들어 볼 예정이며 HTML4와 어떻게 다른지도 함께 알아보도록 하겠습니다.
'IT이야기 > HTML／CSS' 카테고리의 다른 글
| HTML#02 - HTML4.01과 HTML5 문서의 구조적 차이 (0) | 2018.08.26 |
|---|---|
| 코드편집기 - 비주얼 스튜디오 코드 설치하기 (0) | 2018.08.26 |
댓글