안녕하세요.
HTML의 기본구조와 태그를 알아보겠습니다.
일단 HTML의 기본구조를 알아보기에 앞서.
태그가 무엇인지 알아보겠습니다.
태그는 HTML에 어떤 데이터를 넣고 싶을때 사용하는 방식을 말합니다
태그의 사용법은 <> 안에 형식에 맞는 글씨를 넣어주고 </>로 태그를 닫아주시면 됩니다.
예를들면 글을 적는 태그는 <p> </p>, 제목을 적고싶으면 <title> </title> 등 다양한 태그를 사용하실수 있습니다.
실제로 태그들을 사용하며 HTML 구조를 보겠습니다.
HTML 기본구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>여기에는 문서의 제목을 입력해주세요</title>
</head>
<body>
여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요
</body>
</html>문서 형식 선언 (!DOCTYPE html)
- 문서의 내용이 시작되기 전에 해당 문서가 어떤 마크업 형식으로 작성이 되어있는지 명시
- DOCTYPE 뒤에 html이라고 쓰여져 있는 것은 '이 문서가 HTML5로 작성되었다' 라는 뜻
- 문서 형식을 선언 이후에 실제 문서의 내용을 표시하는 태그가 태그
- 태그에는 선택적으로 lang라는 속성을 추가할 수 있는데 lang = "kr" 은 '한국어를 사용'이라는 뜻
Ex) 영어 en, 일본어 ja
- head와 boby라는 두개의 하위 태그,
- head의 역할은 브라우저에게 문서을 정보를 전달 (웹페이지의 품질에 영향을 주는 정보)
- 다양한 설정 태그를 추가 입력 가능
- meta 태그는 문서의 키워드 또는 설정 들 문서와 관련된 여러가지 항목들을 지정할 때 사용하는 태그 (문자셋 - 인코딩방식)설정
- utf-8로 설정 시 한국어 지원가능
문서의 제목 (title)
- 문서의 제목을 입력하는 태그
- 웹페이지의 제목을 결정
- ''태그는 웹 브라우저 화면에 표시될 콘텐츠를 입력하는 태그
- 텍스트, 이미지, 미디어 요소 등 다양한 콘텐츠들을 포함
간단하게 윗글을 요약하자면 문서의 형식을 설정해주고
<head> </head> 태그 안에 웹페이지의 품질에 영향을 주는 정보를 입력하고
<body> </body> 태그 안에 만들고자 하는 기능을 작성해주는 겁니다.
이상으로 태그와 HTML 기본구조를 알아보았습니다.
감사합니다.
'HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] 개발자 도구 (0) | 2024.08.20 |
|---|---|
| [CSS] position 속성 absolute, relative (0) | 2024.07.16 |
| [CSS] display 속성 : inline, inline-block (0) | 2024.07.15 |
| [CSS] display 속성 : block (0) | 2024.07.15 |
| HTML, CSS란 무엇인가? (0) | 2024.06.19 |
