01-3 HTML 기본 문서 구조
태그, 이건 꼭 알아두세요!
어디가 이미지고 어디가 텍스트인지 표시하는 것을 마크업,
마크업할 때 사용하는 약속된 표기법을 '태그(tag)'라고 한다.
HTML문서를 만들기 전에 기억해야 할 몇 가지 사항
- 태그는 <와 >를 이용해 구분한다.
- 태그는 소문자로 쓴다. ex) <img src="images/first.jpg">
- 여는 태그 <태그>와 닫는 태그 </태그>를 정확히 입력한다. - <img>태그나 <br>태그처럼 닫는 태그가 없는 경우도 있다.
- 적당히 들여 쓴다. - 가독성을 위해
- 태그는 속성과 함께 사용할 수 있다. - <태그 속성="속성값" 속성="속성값" ...>
- 한 태그 안에 다른 태그를 포함시킬 시, 포함 관계를 명확히 한다. - 여는 태그, 닫는 태그 쌍을 잘 맞추면 된다.
5번 예시)
<img src="images/first.jpg" width="350" height="290" alt="시계 이미지">
<img>태그에 있는 여러 가지 속성들 중
- src 속성 - 이미지 파일의 경로를 알려줌
- width 속성, height 속성 - 이미지의 크기를 알려줌
- alt 속성 - 이미지에 보조 설명을 붙여줌
을 사용하였다.
6번 예시)
<u><i>만약 네가 나를 길들인다면</i></u>
- <u></u> 밑줄(underline)
- <i></i> 기울림(italic)
HTML 문서 기본 구조 살펴보기
<!doctype html>
<!-- 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻 -->
<html>
<!-- 웹 문서의 시작과 끝을 나타내는 태그 -->
<head>
<!-- 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분 -->
<!-- title태그만 브라우저 창에 표시되고 나머지는 웹 브라우저 화면에 표시되지 않는다. -->
<meta charset="utf-8">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
<!-- 실제로 웹 브라우저 화면에 나타나는 내용 -->
<h1>시간이란...</h1>
<p>내일 죽을 것처럼 오늘을 살고
영원히 살 것처럼 내일을 꿈꾸어라. </p>
<img src="images/first.jpg">
</body>
</html>
가독성 좋게 들여쓰기가 매우 잘 되어있다.
<!doctype> - 문서 유형을 지정하는 선언문
<html> 태그 - 웹 문서 시작을 알리는 태그
- lang 속성 - 문서에서 사용할 언어 지정 (속성값은 ko(한국어), en(영어), zh(중국어), fr(프랑스어) 등이 올 수 있다)
<!doctype html>
<html lang="ko">
<head>
</head>
<body>
</body>
</html>
<head> 태그 - 브라우저에게 정보를 주는 태그
- <title> 태그
- <meta> 태그
- <style> 태그
- <link> 태그
등이 사용된다.
<meta> 태그 - 문자 인코딩 및 문서 키워드, 요약 정보
<meta> 태그에서 가장 중요한 부분은 문자 인코딩을 지정하는 것이다.
<head>
<meta charset="utf-8">
<!-- 한글과 영문을 비롯해 모든 언어를 표시할 수 있는 방식 -->
<meta name="description" content="여기에 사이트에 대한 짧은 설명을 입력합니다">
<!-- 문서에 대한 간단한 설명 -->
<!-- 검색 결과에 사이트 설명으로 표시된다. -->
</head>
<body> 태그 - 실제 브라우저에 표시될 내용
- <h1> 태그 - heading1
- <p> 태그 - paragraph
- <br> 태그 - line break
웹 문서에서 특수 문자 및 특수 기호 사용하기
한자 키를 이용해 특수 문자를 입력할 수 있으며,
따옴표(" ")나 꺽쇠 괄호(< >)같이 소스 기호로 인식되지 않는 것을 그대로 화면에 표시하려고 할 때, 특수 기호를 사용한다.
각각의 특수 기호는 책 참조.