*본 글은 명품 웹 프로그래밍 책을 참조하였습니다.
HyperText Markup Lanauage
HTML은 웹 문서를 작성하는 마크업 언어다. 프로그래밍 언어가 아니다.
뒤에 5가 붙은 것은 버전이라고 생각하면된다.
1. HTML5 기본구성
<!DOCTYPE html> <!--html5문서임을 브라우저에게 알리는 DTD태그-->
<html>
<head> /* 문서의 제목, 메타태크, 자바스크립트, CSS 스타일 시트를 포함하는 태그 */
<title>제목</title> /* 문서의 제목, 브라우저 왼쪽 상단에 표시되는 부분 */
</head>
<body> <!-- 문서의 본문 -->
본문 내용
</body>
</html>
<!-- HTML5문서를 작성할 때의 가장 기초가 되는 구조다.(주석제외) -->
구성을 보면 <!DOCTYPE html> <html> <head> <title> <body>가 있다. HTML5 문서의 필수 태그다.
(< >로 감싸진 부분을 태그라고 부른다.)
같은 이름이 두 번씩 사용되는 것을 볼 수 있는데, 대부분의 태그들은 시작 태그와 종료 태그로 구성 되어있다.
(</ > ← 종료 태그)
종료 태그를 생략하면 당연히 오류가 일어난다. 물론 몇몇 태그들은 종료 태그가 없어도 된다.
<Head>
/* */는 <head> 태그 안쪽에서 작성하는 주석
</heAd>
<!-- 그 외의 경우에서 작성하는 주석. 태그들은 대소문자를 구별하지 않는다. -->
2. 태그
태그의 종류는 매우 많지만 그 중에서 간단한 태그를 알아보자.
2-1. <h1>, title 속성
<h1 title="툴팁입니다.">h1 태그입니다.</h1>
<h2>h2 태그입니다.</h2>
<h3>h3 태그입니다.</h3>
<h4>h4 태그입니다.</h4>
<h5>h5 태그입니다.</h5>
<h6>h6 태그입니다.</h6>h1 태그입니다.
h2 태그입니다.
h3 태그입니다.
h4 태그입니다.
h5 태그입니다.
h6 태그입니다.
<h1> ~ <h6> 태그는 보통 제목, 소제목이나 구조화할 때 사용한다.
글자 크기는 브라우저가 결정하고, CSS를 이용하여 조절할 수 있다.
h는 heading의 줄임말이다.
<h1> 시작태그의 title은 페이지제목을 뜻하는 것이 아니라, 툴팁역할을 사는 속성이다.
모든 태그는 title 속성을 가진다.
*속성이란? - 시작태그 안쪽에서 사용되는 기능
2-2. <p>, <hr>, <br>, <pre>
<p> : 단락을 나누고 싶을때
<hr> : 수평선을 그을때 ( 종료태그가 없다.)
<br> : 새로운 줄로 넘길때 ( 종료태그가 없다. )
<pre> : 입력한 내용을 그대로 출력하고 싶을때(여러개의 공백을 인식한다.)
<P>단락을 구분 짓습니다.</p>
<hr> <!-- 수평선 -->
<br> <!-- 한줄 띄우기 -->
<pre>입력한 내용을 그 대
로 표시합니다.
현재 태그안에서는 여러 공백을 인식합니다.</pre>단락을 구분 짓습니다.
입력한 내용을 그 대 로 표시합니다. 현재 태그안에서는 여러 공백을 인식합니다.
3. 특수문자 입력
HTML문서를 작성하다보면 특수문자를 표시하고 싶을 때가 있다.
특수문자는 키보드의 한자키를 이용하면 되겠지만, 다른방법으로도 표시할 수 있다.
그리고 '<', '>'를 작성 하고 싶은데, 의도치않게 태그가 되어버린 경우도 있기 때문에 이를 방지하는 방법이 있다.
엔터티표현이나 코드표현으로 대체할 수 있다. 종류는 너무 많아서 몇 가지만 알아보자.
| 문자 | 엔터티표현 | 코드표현 |
| " | " | " |
| ' | ' | ' |
| < | < | < |
| > | > | > |
| & | & | & |
| 빈칸 | |   |
'웹 프로그래밍 > html5' 카테고리의 다른 글
| 리스트 태그 (0) | 2022.05.02 |
|---|---|
| <div>, <span>, <img> (0) | 2022.02.25 |
| 웹 프로그래밍 (0) | 2022.01.21 |
