---------------------------------------------------------
* 생활코딩 WEBn 정독하기 project *
문서의 구조와 슈퍼스타들
LINK : https://opentutorials.org/course/3084/18409
----------------------------------------------------------
html의 구조
- 문장 모여서 페이지 - 페이지 모여서 책 - 책에는 제목과 저자.
- 정보가 많아짐에 따라 정보를 잘 정리 정돈하기 위한 책-구조가 필요함.
- 책의 제목, 저자 등
- html tag frequency 그래프에서 최상위 권의 태그들 공부할 것.
1. 책(웹)의 제목 짓기
1) 현재의 제목 : 파일명
2) title 태그 : <title>웹의 제목 </title>
- 위의 코드를 이전에 작성한 태그 위에 넣어준다.
-
<title>Game Information-LOL</title>
- 제목을 명시적으로 알려줄 수 있을 뿐 아니라. 검색엔진에서 노출되기 유리함.
2. 책의 방식 알려주기 - 한글 출력하기 (난 이거 없이도 잘 나왔었는데..? )
1) 컴퓨터에서의 정보 저장 방식
- 컴퓨터는 모든 정보를 0, 1로 저장.
- 그것에 관련된 약속이 있는데, 우리는 지금 UTF-8으로 저장된 상태.
- 이것 웹브라우저가 열 때 utf-8으로 열어야 문제가 없음.
- 따라서 브라우저에게 utf-8으로 열라고 말해줘야 함.
2) meta 태그 : <meta charset="인코딩방식">
-
<title>Game Information-LOL</title>
-
<meta charset="utf-8">
3. 전체적인 구조 (head, body, html, doctype)
1) head와 body tag
- 위의 두 태그와 아래의 태그는 차이가 있음.
- 아래 코드 : 본문 -> body로 묶기로 약속함
- 위의 코드 : 본문을 설명함. -> head 태그로 묶기로 약속함.
- title : 본문의 제목
- meta ~ : 본문이 어떤 방식으로 저장되어 있는지.
- 즉, html의 모든 태그는 body 혹은 head 태그 안에 들어가야 함.
2) html 태그와 <!doctype html>
- html : head, body tag를 감싸는 최고위층의 태그. (코드 전체를 감싼다.)
- <!doctype html> : html 태그 위에 관용적으로 써줘야 함. - html이라는 뜻
-
<!doctype html>
-
<html>
-
<head>
-
<title>Game Information-LOL</title>
-
<meta charset="utf-8">
-
</head>
-
<body>
-
<ol>
-
<li>리그 오브 레전드</li>
-
<li>배틀그라운드</li>
-
<li>어몽어스</li>
-
</ol>
-
...
-
<body>
- </html>
* 관련된 게시물 *
'생활코딩 WEBn' 카테고리의 다른 글
| [생활코딩_WEBn] 웹사이트 완성 (0) | 2020.09.03 |
|---|---|
| [생활코딩_WEBn] HTML 태그의 제왕 (0) | 2020.09.03 |
| [생활코딩_WEBn] 부모 자식과 목록 (0) | 2020.09.02 |
| [생활코딩_WEBn] 최후의 문법 속성과 img (0) | 2020.09.02 |
| [생활코딩_WEBn] HTML이 중요한 이유 (0) | 2020.09.02 |