생활코딩과 패스트캠퍼스 "한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online." 과정에서 배운 HTML 기본문법 사항 정리
HTML이란? (vs CSS vs JS)
-
HTML(Hyper Text Markup Language) : 구조(기획자)
페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당 -
CSS(Cascading Style Sheets) : 스타일(디자이너)
셀제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당 -
JS(JavaScript) : 동적처리(개발자)
콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적처리를 담당
HTML의 기본문법
<h1>Hello HTML</h1>
-> <시작태그>내용(contents)<종료태그>
-> 요소(Element)
HTML의 기본구조
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
</body>
</html>
DOCTYPE 선언
[!DOCTYPE html]은 브라우저에 제공하려고 하는 HTML이 현재의 웹표준에 의거해서 실행한다는 일종의 선언문. DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도. 'html'이 버전을 의미함. 즉, [!DOCTYPE html]은 아래 문서가 HTML5 형식으로 작성되었다는 의미.
HTML Tag
- HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할
- HTML tag 영역에 head tag와 body tag가 포함되어 있다.
- [html lang="en"] : 언어지정을 할 수 있다. (한국어 : ko, 영어: en, 중국어: zh, 일본어: ja, 독일: de, 프랑스: fe, 스페인: es, 러시아: ru)
Head Tag
- 문서의 정보를 나태내는 범위 : 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹페이지의 보이지 않는 정보를 작성하는 범위
- Head Tag 영역에 meta charset, title tag가 포함되어 있다.
Body Tag
- 문서의 구조를 나태내는 범위 : 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은 웹페이지의 보여지는 구조를 작성하는 범위.
부모와 자식 관계
♪(^∇^*) 워-후!!（＾∀＾*）ﾉｼ