본 내용은 "Do it! HTML5 + CSS3 "를 참고로 정리한 내용입니다.
HTML 개요
HTML은 웹페이지의 뼈대를 구성하는 언어를 의미합니다.
HTML(하이퍼 텍스트)뜻
🔥 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능을 의미합니다.
- 하이퍼텍스트 마크업 랭귀지 (HyperText MarkUp Language)의 줄임말입니다.
마크업
🔥 태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것을 의미합니다.
ex) HTML의 태그 = 괄호( < , >), 마크업 = 태그를 붙이는 것입니다.
태그의 특징
태그는 다음과 같은 특징들이 있습니다.
1. 태그는 <와 >를 이용해 구분합니다.
ex) <img> , <p>
2. 태그는 소문자로 씁니다.
3.여는 태그와 닫는 태그를 정확히 입력합니다.
여는태그: <h1> , 닫는 태그: </h1>
4. 들여쓰기를 합니다.
5.태그는 속성과 함께 사용할 수 있습니다.
ex) <태그 속성 = “속성 값” 속성 = “속성값’ >
<img stc = “images/first.jpg” width = “350” height = “290” alt = “시계 이미지”>
6.포함 관계를 명확히 표시합니다.
<u> <i>만약 네가 나를 길들인다면 </i> </u>
정리
HTML언어란 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어를 의미합니다.
HTML 문서 기본 구조
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, inital-scale = 1.0">
<title>HTML 문서</title>
</head>
<body>
<h1>제목</h1>
<p>단락</p>
</body>
</html>
- <!DOCTYPE>: 현재 문서의 HTML 타입을 정의하며 HTML5 의 경우 <!DOCTYPE html>로 명시함
- <html>: HTML 문서의 시작과 끝(</html>을 표시
- <head>: 웹 브라우저에가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분**(화면에 표시되지 않음)**
- <style>, <meta>, <link>, <script>, <base> 태그 등 정의
- <title>: HTML 문서 제목(title) 정의
- <meta> : 문자 세트를 비롯한 문서 정보
- 메타데이터 : 데이터를 위한 데이터
- <meta charset = UTF-8"> = UTF-8이라는 문자세트를 사용한다는 의미
- <body>: 내부에 웹 페이지의 실제적인 내용(content)을 작성
- <h1>~<h6>: 제목(heading) 정의
- <p>: 단락(paragraph) 정의
📒 Reference (참고 자료)
- Do it! HTML5 + CSS3
