*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.
HTML이란?
웹 페이지에 사용되는 표준 기술을 세가지로 구분할 수 있다.
HTML, CSS, JavaScript이다.
HTML은 웹 페이지를 구성하는 역할을 하고, CSS를 통하여 문서의 스타일을 추가한다.
그리고 JavaScript를 이용하여 페이지의 동적인 처리 기능을 추가할 수 있다.
HTML 작성 방법
- 새로운 html파일을 생성한 후 !를 누르면 아래 사진과 같이 뜬다.
- 이 상태에서 Tab 또는 Enter키를 누르면 html 문서의 기본 구조가 자동으로 작성된다.
HTML의 구조
HTML의 대부분 문장은 다음의 문법을 따른다.
<Tag 명 속성명="속성값">데이터</Tag명>
이 문법만 알면 HTML 문서를 해석하는 것은 크게 어렵지 않다.
먼저, 처음 HTML파일을 만들면 나오는 가장 기본적인 구조를 차례대로 살펴보자.
html 문서는 크게 head영역과 body영역으로 나눌 수 있는데,
body영역에 대한 내용은 매우 많기 때문에 이번 게시물에서는 head영역까지만 다룰 것이다.
<!DOCTYPE html>
: 브라우저에게 아래 내용들을 HTML5로 파싱하라고 알려준다.
<html lang="en"></html>
: 문서의 기본 언어를 영어('en')으로 설정한다.
<head></head>
: head 태그 사이에 메타 데이터를 표시한다.
<body></body>
: 웹 페이지에 보여지는 영역이다.
Head 영역
<meta charset = "UTF-8">
: 문서가 UTF-8 인코딩을 사용하여 언어의 문자를 해석한다는 뜻인데, UTF-8은 한글도 해석할 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
: 뷰포트의 너비를 디바이스의 너비, 초기 확대 비율을 1.0으로 설정한다.
<title>타이틀명</title>
: 웹 페이지의 제목을 설정한다. 브라우저의 제목 표시줄이나 탭에 표시된다.
<link rel=참조타입 href=참조소스>
: 외부 리소스를 연결할 때 사용한다. 주로 CSS파일, 아이콘파일, 폰트 등을 연결한다.
<style> CSS 문장 </style>
: 문서 내에서 CSS 스타일을 정의할 때 사용된다.
<script> JavaScript문장 </script>
: 문서 내에서 JavaScript를 정의할 때사용된다.
<script src="script.js></script>
: 외부 JavaScript 문서를 연결한다.
그 외에도 head 영역에는 <base>, <noscript> 등의 다양한 태그가 있지만, 많이 사용하지 않기도 하고 필요할 때 찾아서 쓰면 되기 때문에 외워둘 필요는 없다.
'FE > HTML' 카테고리의 다른 글
| [HTML] 미디어태그-이미지(Image), 오디오(Audio), 비디오(Video), 유튜브(Youtube) (1) | 2024.06.02 |
|---|---|
| [HTML] 테이블(Table) 태그 (0) | 2024.06.01 |
| [HTML] 목록 태그 (0) | 2024.06.01 |
| [HTML] 글자 관련 기본 태그 (0) | 2024.06.01 |
| VS Code(Visual Studio Code) 설치 (0) | 2024.06.01 |
