1. 마크업과 태그(tag)
마크업 : 어디가 이미지고 어디가 텍스트인지 표시하는 것
태그(tag) : 마크업 할 때 사용하는 약속된 표기법
- HTML 문서를 만들기 전 기억해야 할 것들
태그는 〈 와 〉를 이용해 구분한다.
이미지를 삽입할 때는 'image'의 약자인 <img>라는 태그를 사용하고, 텍스트 문단을 삽입할 때는 'paragraph'의 약자인 <p>라는 태그를 사용한다.
태그는 소문자로 쓴다.
HTML 태그는 대·소문자를 구별하지 않지만, HTML5 표준 명세에서는 태그와 태그 안에 사용하는 속성들은 모두 소문자로 사용할 것을 권장한다.
<img src="images/first.jpg"> // <!-- 옳은 예 -->
<IMG src="images/first.jpg"> // <!-- 틀린 예 -->여는 태그와 닫는 태그를 정확히 입력한다.
대부분의 태그는 <h1> ~ </h1>이나 <p> ~ </p>처럼 여는 태그와 닫는 태그가 하나의 쌍으로 이루어진다.
* 웹 브라우저는 여는 태그에서 닫는 태그까지를 태그의 적용 범위로 인식한다.
<h1> 시간이란.. </h1> <!-- 옳은 예 -->
<h1> 시간이란.. <!-- 틀린 예 -->형식에 맞춰 들여쓰기를 한다.
HTML 태그는 기본 속성상 여러 번 띄어쓰기를 하더라도 한 칸의 공백으로 인식한다. 소스를 들여 쓸 때는 'Tab' 키를 이용한다.
<ul> <!-- 옳은 예 -->
<li> 메뉴1 </li>
<li> 메뉴2 </li>
<li> 메뉴3 </li>
</ul>
<ul> <!-- 틀린 예 -->
<li> 메뉴1 </li>
<li> 메뉴2 </li>
<li> 메뉴3 </li>
</ul>태그는 속성과 함께 사용할 수 있다.
HTML 태그는 태그에 여러 기능을 추가하는 속성과도 함께 사용된다.
<img src="images/first.jpg" width="350" height="290" alt="시계 이미지">포함 관계를 명확히 한다.
HTML 태그는 한 태그 안에 다른 태그를 포함시킬 수 있다. 이때 여는 태그와 닫는 태그 쌍을 정확히 맞추어 사용한다.
<u><i>만약 네가 나를 길들인다면</i></u>- prev.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<img src="images/first.jpg" width="100">
<img src="images/petit.jpg" title="어린왕자">
<!--
alt + 화살표 : 이동
alt + shift + 화살표 : 복사
alt + ctrl + 화살표 : 커서확장
ctrl + x : 잘라내기(선택영역이 없을 때는 행 삭제)
-->
</body>
</html>
2. HTML 문서 기본 구조 살펴보기
<!doctype> : 문서 유형을 지정하는 선언문
<!doctype html> >> 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻
<html> 태그 : 웹 문서 시작을 알리는 태그
언어 표기는 ko처럼 두 자리를 사용할 수도 있고, en-KR처럼 네 자리를 사용할 수 있다.
<head> 태그 : 브라우저에게 정보를 주는 태그
<title> 태그 : 문서 제목. <head> 태그 안에서 가장 중요한 태그 ★
<body> 태그 : 실제 브라우저에 표시될 내용
<meta> 태그 : 문자 세트를 비롯한 문서 정보
웹 브라우저 화면에는 보이지 않지만 웹 문서와 관련된 정보들을 지정한다.
<!-- 문자 세트 지정하기 -->
<meta charset="UTF-8">
<!-- 모바일 기기 고려하기 -->
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- 인터넷 익스플로러 브러우저 고려하기 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 검색 엔진 고려하기 -->
<meta name="keywords" content= "html5, 웹표준">
<meta name="description" content= "html5를 통해 웹 표준 공부하기">
<meta name="author" content= "Kyunghee Ko">3. 간단한 HTML 문서 만들기
- first-result.html
시간이란...
내일 죽을 것처럼 오늘을 살고
영원히 살 것처럼 내일을 꿈꾸어라시간이란... 내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라
<h1>시간이란...</h1>
<p>내일 죽을 것처럼 오늘을 살고
영원히 살 것처럼 내일을 꿈꾸어라</p>시간이란...
내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
<h1>시간이란...</h1>
<p>내일 죽을 것처럼 오늘을 살고
영원히 살 것처럼 내일을 꿈꾸어라</p>
<img src="images/first.jpg" alt="">
</body>
</html>
참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱