HTML5+CSS3]1-3 HTML 기본 문서 구조

easyspub

'사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메

www.youtube.com

✔ 태그

👉 태그는 <와>를 이용해 구분합니다.

웹브라우저는 <와> 사이에 있는 문자는 태그로 인식한다.

👉 태그는 소문자로 씁니다.

👉 여는 태그와 닫는 태그를 정확히 입력합니다.

<h1>~</h1> , <p>~</p>와 같이

여는 태그와 닫는 태그가 하나의 쌍으로 이루어지며,

웹 브라우저는 여는 태그에서 닫는 태그까지를 태그의 적용 범위로 인식한다.

👉 가독성을 위해 적당히 들여쓴다.

👉 태그는 속성과 함께 사용할 수 있다.

👉 포함 관계를 명확히 한다.

✔HTML 문서 기본 구조

👉<!doctype> : 문서 유형을 지정하는 선언문

지정하는 문서 유형을 웹 브라우저에게 HTML로 작성된 문서라고 알려줌

<!doctype html> : 현재 문서가 HTML5 언어로 작성된 웹문서라는 뜻

👉<html> : 웹 문서 시작을 알리는 태그

</html> : 웹 문서가 끝났다는 뜻

<html lang="ko"> : 문서가 한국어로 사용 되었다는 뜻

Lang : 언어

코드	de	en	fr	ja	ko	zh
언어	독일어	영어	프랑스어	일본어	한국어	중국어

👉<head> : 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보를 입력한다.

<title> : 탭 부분에 나오는 문서 제목

기본형 : <title>문서제목</title>

👉<meta> : 문자 세트를 비롯한 문서 정보

웹 브라우저 화면에는 보이지 않지만 웹 문서와 관련된 정보들을 지정함

화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할지 지정한다.

웹 서버는 영어를 기본으로 하기 때문에 영어 이외의 문자를 화면에 표시하기 위해 미리 약속된 문자 세트를 사용한다.

👉<body> : 실제 브라우저에 표시될 내용

<body>태그와 </body>태그 사이에 실제 브라우저에 표시될 내용을 입력한다.

👉HTML 문서의 특성상 여러개의 공백을 나타내거나 "따옴표", <꺽쇠괄호>를 화면에 표시할때 특수 기호를 사용한다.

엔티티이름or엔티티기호 : 따옴표나 꺽쇠괄호같은 문자를 입력하면 태그로 인식하므로 태그가 아닐때에 미리 약속한 표기법

엔티티 이름이나 엔티티 코드 위에 오는 세미콜론(;)은 꼭 붙여야 한다.

👉윈도우에서 특수 문자를 입력하려면 : 키보드에서 한글 자음을 누르고 한자 키를 누른다.

코딩 신생아가 새싹을 틔워서 꽃이 될때까지