반응형
1) HTML 문서의 기본 구조
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목</title>
</head>
<body>
내용
</body>
</html>
- <!DOCTYPE HTML>
- html5 문서임을 브라우저에게 알리는 문서 유형 선언(document type Definition Declaration ,DTD 선언).
브라우저가 문서를 분석 또는 번역하여 표시할 때 올바른 버전에 맞게 보여주기 위한 선언문. - <html lang="ko">
- html 문서의 루트 요소, 휴먼 랭귀지 선언.
lang 속성은 문서의 언어를 지정. en = 영어 | ko = 한국어
웹 서버 검색 시 문서 안에 내용이 우선 검색되도록 하기 위해 선언.
ai를 통해 소프트웨어가 내용을 정확하게 이해하고 보여줄 수 있도로함. - <head>
- 문서의 메타 데이터를 포함하는 부분. - <meta charset="UTF-8">
- 문서의 문자 인코딩 지정 태그.
UTF-8 = 유니코드의 인코딩 방식 중 하나로 웹에서 가장 널리 사용되는 방식.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 뷰포트 설정을 지정하는 태그.
모바일 기기에서 화면 크기와 확대/ 축소 기능을 조절. - <title>제목</title>
- 문서의 제목을 지정하는 태그.
브라우저 탭에 표시되는 제목을 의미. - <body>
- 실제 웹 페이지의 내용을 담는 부분
2) 제목 태그 (TITLE TAG)
html 문서에서 제목을 작성하고자 할 때 사용하는 태그는 h1~h6까지 총 6가지가 있으며, heading의 약자인 'h'를 사용
h1 제목태그입니다.
h2 제목태그입니다.
h3 제목태그입니다.
h4 제목태그입니다.
h5 제목태그입니다.
h6 제목태그입니다.
3) 문단 태그
- p - paratraph(문단)의 약자.
더보기<p>This is a paragraph/</p>
- hr - horzantal의 약자. 일종의 수평선
더보기<hr>
- blockquote - 인용문 표현
더보기<blockquote>This is a quoted text.</blockquote>
- br - line break의 약자. 강제 줄바꿈
더보기<br>
- pre - preformatted text의 약자. 태그 안 공백 또는 문구를 모두 그대로 반영
더보기<p>인 경우 결과값 -> aabcdef g<pre> abcdef g</pre>
<pre>인 경우 결과값 -> abcdef g
반응형
'HTML5' 카테고리의 다른 글
| 06) 멀티미디어 태그 (0) | 2023.07.20 |
|---|---|
| 05. 테이블 태그 (0) | 2023.07.20 |
| 04. 하이퍼링크 태그 (0) | 2023.07.20 |
| 03. 이미지, 이미지 맵 태그 (0) | 2023.07.20 |
| 02. 글자, 목록 태그 (0) | 2023.07.20 |