본문 바로가기

JavaScript/[1] HTML5의 기본

#2-2. HTML 문서 실습하기

728x90
반응형

이전 포스팅을 참조하여 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

 

728x90
반응형

'JavaScript > [1] HTML5의 기본' 카테고리의 다른 글

#3. 웹 문서 작성 및 업로드  (0) 2022.09.16
#2-1. HTML의 기본 구조  (0) 2022.08.28
#1. HTML이란 무엇인가?  (0) 2022.08.28
댓글