HTML이란?
제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미
링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공
웹을 이루는 가장 기초적 구성 요소
웹페이지를 만들기 위한 표준 마크 업 언어
각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용
HTML 문서 기본 구조
<!DOCTYPE html>
- 문서 맨 처음에 명시
- 문서 버전(규격) 나타냄
- 필수요소
- DOCTYPE을 지정하지 않을 경우 Internet Explorer 에서 문서를 하위 엔진으로 해석하는 등의 문제가 발생
<html></html>
- 문서가 HTML 로 작성 됨을 브라우저에게 알림
- html문서의 루트 요소 정의
- 문서의 시작과 끝을 알려주는 태그
- lang : 문서의 언어
<head></head>
- 문서의 머리를 나타내는 태그
- 브라우저 화면에 직접적으로 보이지 않으며, 숨은 데이터를 정의하는 태그
- 메타 데이터(기계 식별 문서 정보)와 타이틀 정의
- 메타 데이터 : 직접적으로 보이지 않는 정보
- 페이지 인코딩 방식 / 검색 엔진 정보 / 스크립트 / 스타일 시트 등
<body></body>
- 브라우저 화면에 보이는 내용
- HTML 문서의 이미지, 리스트, 비디오 등과 같은 모든 콘텐츠 나타냄
- 1문서 1Body
HTML 요소 구조
HTML 요소는 시작 태그로 시작해서 종료 태그로 끝남
속성
<태그이름 속성이름="속성값">
- HTML 요소 중에서도 시작 태그 내에서만 정의
- 속성이름은 소문자
- 속성 값은 따옴표 필수
HTML 요소 타입
HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가짐
블록(block) 타입의 요소
- 항상 새로운 라인에서 시작
- 해당 라인의 모든 너비를 차지
- ex) <p>, <div>, <h>, <ul>, <ol>, <form> ...
인라인(inline) 타입의 요소
- 새로운 라인에서 시작하지 않음
- 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지
- ex) <span>, <a>, <img> ...
블록(block) 타입의 요소
- 항상 새로운 라인에서 시작, 해당 라인의 모든 너비를 차지
- ex) <p>, <div>, <h>, <ul>, <ol>, <form> ...
엔티티
HTML 예약어 : HTML에서 미리 예약된 문자
엔티티 : HTML 예약어를 기존 의미대로 사용하기 위매 만든 문자셋
형태
&엔티티이름;
&#엔티티숫자;
- 엔티티의 이름은 대소문자 구문 https://html.spec.whatwg.org/multipage/named-characters.html
문자셋
웹 브라우저가 HTML 문서를 정확하게 나타내기 위해서는 해당 문서가 어떠한 문자셋인지 알아야함
HTML 문서가 저장될 때 사용된 문자셋에 대한 정보를 <head>태그 내의 <meta>태그에 명시