HTML(Hyper Text Markup Language)는 웹 페이지를 구축하기 위한 마크업 언어, 즉 태그(HTML을 사용하기 위한 명령어의 집합) 등을 이용하여 데이터의 구조나 문서를 작성하는 언어이다. <!DOCTYPE html> HTML5 문서임을 브라우저에 알리는 선언문(<!doctype html>도 가능), head부분 그리고 body부분으로 구성된다.
HTML 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1> </h1>
<p> </p>
<!-- 주석 -->
</body>
</html>
<!DOCTYPE html>
- <html lang="en"> : <html>은 문서 형태를 선언한다. lang의 경우 이 문서의 기본 언어를 지정한다. 기본 언어의 경우 웹 접근성에 영향을 끼치며, 소리내어 읽어주는 기능을 보다 정확하게 사용할 수 있도록 돕는다. 한국어의 언어코드는 "ko"이다.
<head>
: HTML 페이지에 대한 메타(meta)정보, 즉 제목, 핵심 키워드, 환경설정 등에 대한 내용이 담겨 있다. 여기서 메타(meta)정보란 데이터를 설명하는 구조화된 데이터를 의미한다.
- <meta charset="UTF-8"> : 문자 인코딩 방법 및 문서의 키워드와 요약정보를 지정한다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 모바일 호환 설정과 관련된 부분으로, 사용자에게 보여지는 영역의 width를 디바이스에 맞추겠다는 내용이다.
- <title> : 브라우저의 제목 표시줄 또는 페이지 탭에 표시되는 제목(HTML 페이지의 제목)을 지정한다.
<Body>
: 웹 페이지에서 실제로 보여지는 부분들을 작성하는 곳이다.
- <h1> : 제목에 사용되는 태그로 일반 텍스트보다 크기가 크고 진하게 표시된다. <h1>부터 <h6>까지 태그가 있다.
- <p> : 문단을 정의하여 구분하는 기능을 한다.
- <!-- 주석 --> : 내용을 쉽게 이해할 수 있도록 덧붙이는 설명글을 작성할 때 사용한다. 브라우저에 의해 출력되지 않으며, 주석은 페이지 내 모든 곳에서 사용이 가능하다.
HTML 태그
: HTML 문서의 구성 원소는 태그들이다. 태그는 태그 이름과 여러 속성들로 구성되어 있다. 대부분의 경우 시작태그와 종료태그로 구성되지만, <img>태그나 <br>태그처럼 종료 태그가 없는 경우도 있다. 태그와 속성은 대소문자를 구분하지않기때문에 소문자로 작성되는 것이 보통이다.
- "<시작태그 속성="속성값"> 컨텐츠 내용 </종태그>
HTML 기본 구조 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML의 기본</title>
</head>
<body>
<!-- 주석은 VScode에서 ctrl + / 를 사용해 추가할 수 있다. -->
<!-- h${〈h$의 크기〉}*6 을 작성을 하고 VScode에서 ctrl + space로 emmet을 활성화 할 수 있다. -->
<h1>〈h1의 크기〉</h1>
<p>〈p〉태그는 문단(paragraph)을 나타냅니다. </p>
<p>VScode에서 임의의 장문 작성은 'lorem + 엔터'을 작성하면 된다. 아래와 같이 임의의 문단이 만들어 진다.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum aliquid nesciunt molestiae totam veniam ad iure accusamus, quasi ut culpa obcaecati reiciendis deleniti? Illo ad tempore optio? Possimus, velit iusto. </p>
<h2>〈h2의 크기〉</h2>
<h3>〈h3의 크기〉</h3>
<h4>〈h4의 크기〉</h4>
<h5>〈h5의 크기〉</h5>
<h6>〈h6의 크기〉</h6>
</body>
</html>
위와 같은 웹페이지를 구축했을 때의 웹페이지의 모습은 다음과 같다. 페이지 탭에 표시되는 제목이 <title> 태그에 적은 바와 같이 'HTML의 기본'이고, <p>태그의 경우 입력 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진 모습을 볼 수 있다. <h1> 부터 <h6>태그의 경우 <h1>이 제일 크기가 크고, 숫자가 커질수록 크기가 줄어드는 모습을 볼 수 있다.
이 문서에 작성되어 있는 주석은 웹 브라우저에서 해석하지 않기 때문에 HTML소스 내용을 쉽게 이해할 수 있도록 붙이는 설명글이다. 여러 줄의 주석도 가능하다.
'Frontend > HTML' 카테고리의 다른 글
| HTML의 폼 요소를 사용해보자 (0) | 2024.06.30 |
|---|---|
| HTML 웹 페이지를 통해 사용자 입력을 받는 폼을 만들어 보자 (0) | 2024.06.29 |
| HTML 페이지 내에 다른 HTML을 출력해보자 (<iframe>태그) (0) | 2024.06.28 |
| HTML에서 표(table)를 만들어보자 (0) | 2024.06.27 |
| HTML의 <a>태그에 대해 알아보자 (0) | 2024.06.27 |
| HTML 이미지 삽입을 할 수 있는 <img>태그에 대해 알아보자 (0) | 2024.06.27 |
| HTML의 목록 태그 (0) | 2024.06.27 |
| HTML의 텍스트 관련 태그 (0) | 2024.06.26 |