[03] HTML 기본 문서 만들기

HTML

- Hyper Text Mark up Language

- HT: 웹에서 자유롭게 오갈 수 있는 언어

- M: 텍스트뿐만 아니라 이미지, 영상 등을 표시. 마크업에 사용하는 꼬리표를 '태그(tag)'라고 함

→ 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어

기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>HTML 기본 문서</title>
</head>
<body>
  <h1>프런트엔드 웹 개발</h1>
  <hr>
  <p>HTML</p>
  <p>CSS</p>
  <p>자바스크립트</p>
</body>
</html>

	① <!DOCTYPE html>: 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻
	② <html> ~ </html>: 웹 문서의 시작과 끝을 나타내는 태그. 웹 브라우저가 <html> 태그를 만나면 </html>까지 소스를 읽어 화면에 표시
	③ <head> ~ </head>: 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분
	④ <body> ~ </body>: 실제로 웹 브라우저 화면에 나타나는 내용. (앞으로 공부해야할 HTML 태그는 대부분 <body> 태그 안에 들어있음)

<head> 태그

문서 관련 정보 입력, 웹 브라우저 화면에는 보이지 않음
문서에서 사용할 외부 파일 링크

문자 세트 등 문서 정보가 들어있는 <meta> 태그

→ 한글로 된 내용을 표시하기 위해서 UTF-8 문자 세트를 사용

<meta charset="UTF-8">

이외에도 다양한 문서 정보를 지정

<meta name="keywords" content="html의 구조">	// 웹 문서의 키워드
<meta name="description" content="html의 구조를 알아봅시다">	// 웹 문서의 설명
<meta name="author" content="HongGil Dong">	// 웹 문서의 소유자나 제작자

문서 제목을 나타내는 <title> 태그

<title> HTML 기본 문서 </title>

<body> 태그

실제 브라우저에 표시될 내용 입력
대부분의 태그가 <body> 태그와 </body> 태그 사이에 사용하는 태그들

실전

* 파일 이름 지정 후 .html 을 작성해주기 ex) myDoc.html

- ! 치면 자동 완성으로 나옴 → 엔터를 치게 되면 자동 완성 됨(기본 언어가 en이므로 ko로 바꿈)

<!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>첫 번째 문서 연습</title>
</head>
<body>
    <h1>웹 문서 만들기</h1>
</body>
</html>

Do it! HTML+CSS+자바스크립트 웹 표준의 정석

소스파일: http://www.easyspub.co.kr/30_Menu/DataList/PUB#2

'Study > HTML | CSS' 카테고리의 다른 글

[05] 입력 양식 작성하기 (0)	2023.02.23
[04] 웹 문서에 다향한 내용 입력하기 (0)	2023.02.22
[01/02] 웹 개발 시작 전 (0)	2023.01.16

빵먹는중_ITing_🍞

[03] HTML 기본 문서 만들기

<head> 태그

<body> 태그

'Study > HTML | CSS' 카테고리의 다른 글

티스토리툴바

[03] HTML 기본 문서 만들기

<head> 태그

<body> 태그

'Study > HTML | CSS' 카테고리의 다른 글

'Study/HTML | CSS' Related Articles

티스토리툴바