이전 포스팅을 참조하여 HTML의 기본 문서 작성을 실습해보자.
https://udangtangtang-cording-oldcast1e.tistory.com/131?category=1064943
#2-1. HTML의 기본 구조
이번 HTML 포스팅은 "HTML5+CSS3 웹 표준의 정석"이라는 책의 레포지터리를 참고한다. https://github.com/oldcast1e/HTML5-CSS3 GitHub - oldcast1e/HTML5-CSS3: (2020년판) "HTML5+CSS3 웹 표준의 정석" 에서 사..
udangtangtang-cording-oldcast1e.tistory.com
에밋 기능 활용하기
에밋(Emmet) 기능이란 HTML 소스 코드를 빠르게 입력할 수 있도록 해주는 플러그인 코드이다. 미리 약속한 코드를 입력하고 Tab을 누르면 자동으로 원하는 코드를 작성할 수 있다.
에밋(Emmet): HTML 소스에 빠르게 접근 가능한 단축어
문서의 첫 번째 줄을 클릭한 후 "!"를 입력하고 Tab을 누르게 되면 HTML의 문서 기본 구조가 자동으로 만들어지게 된다.
HTML의 기본 문서 구조는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
</body>
</html>- 2번 줄의 <html lang="en"> 부분을 <html lang="ko">로 변경한다. 이는 현재 문서가 영어에서 한국어로 바꾼다는 것을 의미한다.
<html lang=" --">
-- 부분의 HTML 문서의 언어 설정을 담당한다.
- 7번 줄의 <title>Document</title> 부분에서 <title>과 </title> 사이의 문장을 수정할 수 있다. 이는 문서의 제목을 의미한다.
<title> 문서의 제목 </title>
문서의 제목 부분에 원하는 문서의 제목을 작성할 수 있다.
HTML 문서의 기본 구조
HTML 언어는 일반 문서와 달리 정해진 형식에 맞추어 내용을 입력해야 한다.
예시를 통해 문서의 형식을 알아보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
<h1>시간이란...</h1>
<p>내일 죽을 것처럼 오늘을 살고<br>
영원히 살 것처럼 내일을 꿈꾸어라. </p>
<img src="images/first.jpg">
</body>
</html>HTML의 태그
<! DOCTYPE html> - 문서 유형을 지정하는 선언문
웹 문서의 시작을 알려주는 <head>보다 만자 사용하는 것이 문서 유형을 지정하는 <!DOCTYPE>이다.
문서 유형: 웹 브라우저에 대한 처리할 문서의 종류
웹 브라우저는 <! DOCTYPE html> 코드를 확인하고 유형 선언이 완료된다.
<html> 태그 - 웹 문서 시작을 알리는 태그
문서 유형을 선언한 후 실제 문서 정보와 내용이 시작되고 끝나는 것을 표기한다. 즉, </html> 태그가 나온 순간 웹 문서가 끝이 났다고 생각하면 된다.
| <html> | 웹 문서가 시작된다. |
| </html> | 웹 문서가 끝난다. |
웹 문서란 웹을 만들기 위한 전반적인 코드를 의미한다고 생각하면 된다.
<html lang=" --">
- 부분의 HTML 문서의 언어 설정을 담당한다.
| 코드 | de | en | fr | ja | ko | zh |
| 언어 | 독일어 | 영어 | 프랑스어 | 일본어 | 한국어 | 중국어 |
이때, 언어를 규정하는 이유는 특정 언어로 제한하여 검색하는 경우 검색 대상이 제한하도록 하기 위함이다. 즉, 한국어로 검색할 경우 한국어로 된 문서가 나올 수 있도록 도와준다.
<head> 태그 - 브라우저에게 정보를 주는 태그
웹 브라우저에 나오는 정보는 모두 <head> 태그 안에 입력한다. 문서에서 사용할 외부 파일도 이 곳에 링크한다.
<title> 문서의 제목 </title>
- 문서의 제목 부분에 원하는 문서의 제목을 작성할 수 있다.
<meta> 태그 - 문자 세트를 비록한 문서 정보
웹 브라우저 화면에는 보이지 않지만 웹 문서와 관련한 정보들을 지정한다. 이때 웹 사이트의 키워드나 설명과 같은 정보를 지정할 수 있다.
메타 태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할 지 지정하는 것이다. 웹 서버는 기본적으로 영어를 사용하기 때문에 미리 약속된 문자 세트를 사용해야하고, 이때 메타 태그를 이용하여 UTF-8이라는 문자 세트를 사용한다고 웹 브라우저에게 알려주게 된다.
<meta charset="UTF-8">
- UTF-8 이라는 문자 세트를 사용한다고 웹 브라우저에게 알려주는 메서드
[고려 대상]
| 모바일 기기 고려 | 웹 문서를 작성할 때도 <meta> 태그를 이용하여 모바일 기기에서도 웹 문서를 제대로 표시할 수 있도록 해야한다. 이때 뷰포트를 이용한다. <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 인터넷 익스플러러 고려 | 인터넷 익스플로러는 최신 웹 문서를 제대로 해석하지 못하기에, 인터넷 익스플러러를 고려한 메타 태그를 이용해야한다. 이를 통해 현재 웹 문서를 최신 표준 모드로 해석하라고 알려준다. <meta http-equiv="X-UA-Compatible" content="ie=edge"> |
| 검색 엔진 고려 | 메타 태그를 이용한 정보 지정은 검색 엔진에 따라 달라질 수 있으므로, 이를 해결하기 위한 메서드를 작성한다. <meta name = "keyword" content="html5 문서 작성">
<meta name = "description" content="html5를 통해 웹 표준 공부하기">
|
<body> 태그 - 실제 브라우저에 표시될 내용
<body>와 </body> 태그 사이에 실제 브라우저에 표시될 내용을 입력한다.
예시에 사용된 <body> 태그 내의 태그의 설명은 다음과 같다.
| <h1> | 제목을 표시하는 태그. 다른 텍스트보다 진하게 표시된다. |
| <p> | 텍스크 단락을 표시한다. |
| <br> | 줄 바꿈 |
이때까지의 자주 사용하는 태그를 정리하면 다음과 같다.
웹 문서를 작성하는 프로그램을 웹 편집기라고 하고 웹 문서를 보는 프로그램을 웹 브라우저라고 한다.
HTML은 웹 문서의 시작과 끝을 알리는 <html> 메서드와 웹 브라우저의 정보를 저장하는 <head> 메서드, 실제로 웹 브라우저에 나타날 정보를 저장하는 <body> 메서드로 이루어진다.
| <!DOCTYPE html> | 현재 문서가 HTML5 언어임을 알려주는 메서드. |
| <html> ~ </html> | 웹 문서의 시작과 끝을 알려주는 메서드. <html>부터 ~ </html> 까지가 소스이다. |
| <head> ~ </head> | 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보를 입력하는 부분. 여기있는 정보는 실제 정보가 아니기 때문에 웹 화면에 뜨지않는다. 웹 브라우저와 웹 문서의 차이는 아래의 주석을 확인한다. |
| <body> ~ </body> | 실제로 웹 브라우저 화면에 나타날 정보를 입력하는 코드 스페이스를 구분한다. |
특수 문자 및 특수 기호의 사용
특수 기호의 사용
HTML 소스에서 공백이나 괄호같은 문자들은 특수 기호를 이용한다.
즉, 다시 말해 HTML 문서의 특성상 여러 개의 공백 문자를 입력하더라도 한 칸만 인식하기 때문에 여러 개의 공백을 나타내기 위해서는 특수 기호를 여러개 입력해야한다.
이러한 문제점을 해결한 표기법을 엔티티 이름 또는 엔티티 기호라고 한다.
다음 사이트에서 엔티티 코드를 확인 할 수 있다. 해당 사이트에는 웹 문서에서 사용할 수 있는 특수 기호나 특수 문자에 간단하게 엔티티 이름이 표시되어 있는 것을 확인 할 수 있다.
이때, 엔티티 이름이나 엔티티 코드 뒤에 오는 세미콜론은 반드시 붙이도록 한다.
https://html.spec.whatwg.org/multipage/named-characters.html
HTML Standard
HTMLLiving Standard — Last Updated 14 September 2022 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character references 13.5 Named character references This table lists the character reference names that are s
html.spec.whatwg.org
'HTML5&CSS > [1] HTML5의 기본' 카테고리의 다른 글
| #3. 웹 문서 작성 및 업로드 (0) | 2022.09.16 |
|---|---|
| #2-1. HTML의 기본 구조 (0) | 2022.08.28 |
| #1. HTML이란 무엇인가? (0) | 2022.08.28 |
