HTML 페이지 기본
HTML*은 웹 문서를 작성하는
태그 언어이다.
* Hyper Text Markup Language
HTML 태그로 만든 문서를
HTML 문서라고 부르며,
이는 여러 페이지로 구성되는데
각 페이지를
웹 페이지 혹은 HTML 페이지라고
부른다.
웹 브라우저는 한 번에 하나의
HTML 페이지를 화면에 출력한다.
HTML5에서 HTML 페이지는
다음과 같이
<!DOCTYPE> 선언과 주석문,
그리고 헤드 부분과 바디 부분으로
구성된다.
<!DOCTYPE html>
<!--주석문 부분, 웹 브라우저는 주석을 화면에 출력하지 않는다.-->
<html>
<head>
문서 제목, 자바스크립트, CSS 스타일 정의, 메타 데이터 정의
</head>
<body>
문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등
</body>
</html>
<html>, <head>, <title>, <body>
태그는 HTML5 문서의 필수 태그들이다.
<!DOCTYPE html>
<!DOCTYPE html>은 HTML5 문서임을
브라우저에 알리는 지시어로,
반드시 첫 줄에 위치해야 한다.
이것은 HTML 태그가 아니며,
소문자 doctype으로 써도 된다.
헤드 부분
<head></head>로 둘러싼 부분으로
문서의 제목, 본문을 설명하는 메타
태그들, 자바스크립트 코드와
CSS 스타일 시트 등을 포함하며
문서의 본문은 포함되지 않는다.
바디 부분
문서의 본문으로 <body></body>로
둘러싼다.
이곳은 자바스크립트 코드를
포함할 수 있다.
헤드와 바디 사이에는 아무 것도
들어갈 수 없다.
HTML 태그
HTML 문서의 구성 원소는
태그들이다.
태그는 <html>, <head>, <title>,
<h1>, <img>, <figure> 등
100여 개가 있으며, 목적에 따라
적합한 태그로 문서를 작성한다.
태그 구성
태그는 다음과 같이, 태그 이름과
여러 속성*들로 구성되며,
* attribute
하나의 속성은 속성 이름과
값으로 구성된다.
다음 그림은 hear.jpg 이미지를
100X50 크기로 문서에 포함하도록
<img> 태그를 사용하는 사례이다.
시작 태그와 종료 태그
태그에 따라서는 <img> 태그처럼
종료 태그가 없는 경우도 있지만,
대부분의 경우 다음과 같이
시작 태그와 종료 태그로 구성된다.
<html> ... </html>
<title>문서의 제목입니다</title>
<body> ... </body>
이 경우 종료 태그가 생략되면
오류로 처리되어
정상적으로 화면에 출력되지
않는다.
종료 태그가 없어도 출력되는
경우가 종종 있지만
종료 태그를 붙이는 습관을
들이는 것이 좋다.
태그와 속성은 대소문자 구분이 없음
태그와 속성은 대소문자를
구분하지 않는다.
다음 예는 정상적인 코드이다.
<HTML> ... </HTML>
<img Src="heart.jpg" width="100" height="50" alt="심장">
속성 값에 불필요한 공백 문자가 들어가면 HTML5 표준에 어긋남
속성 값에 불필요한 빈칸을
작성하는 오류를 범할 경우,
예를 들어 다음 코드에서 100 앞에
빈칸이 있는 경우가 이에 해당한다.
<img Src="heart.jpg" width=" 100" height="50" alt="심장">이런 경우 HTML5 표준에 어긋나며,
브라우저에 따라서는 오류로
처리된다.
속성 값은 반드시 이중 인용 부호 ("")로 묶어야 하는가?
HTML5에서 속성 값은 반드시 이중 인용 부호로 묶을 필요는 없다. 다음과 같이 단일 인용 부호를 사용해도 되고, 인용 부호를 사용하지 않아도 된다.
<img src=heart.jpg>
<img src='heart.jpg'>
<img src="heart.jpg">
단일 인용 부호를 사용하든 이중 인용 부호를 사용하든 일관성이 중요하다. 이 책의 저자는 이중 인용 부호를 사용할 것을 강력하게 권한다. 참고로 XHTML과 XML에서는 이중 인용 부호를 사용한다.
참고 및 출처
 |
|
