반응형
# "HTML"이 무엇인지 알아보고 "Web site"의 구조를 파악하는 방법을 배워보자
# "HTML" 이란?
# "Markup language" 란 무엇인가?
# "HTML" 구조 파악
# 비전공자가 이해한 HTML
1. HTML(HyperText Markup Language)
- HTML은 Web browser에 나타나는 UI(User Interface)들을 보여주는 표준 Markup language 입니다.
- Markup language는 컴퓨터 텍스트 처리 과정에서 태그 등을 이용해 문서나 데이터의 구조를 표현한 언어입니다.
- Markup language는 문서가 처리될 때 Text의 형식을 지정하는 데만 사용됩니다. - HTML은 Web site를 이루는 가장 기본적인 "Building block"입니다.
- HTML elements(요소)는 HTML의 "Building blocks"입니다.
- HTML은 Web site의 Contents의 구조와 의미를 경정합니다.
- filename.html 파일을 실행하면 컴퓨터에서 기본으로 설정된 브라우저가 실행되면서 html의 내용을 표시해줍니다.
Markup language 예시
아래의 코드에서 "<h1> </h1>" , "<p> </p>" 와 같이 "<>"로 된 부분을 태그라고 하며, 이는 구조를 나타냅니다.
"<h1> </h1>" 안에 있는 "Anatidae", "<em> </em>" 안에 있는 "not" 등은 Content 이며, 이는 실제로 사용자들에게 보여지는 부분입니다.
<h1>Anatidae</h1>
<p>
The family <i>Anatidae</i> includes ducks, geese, and swans,
but <em>not</em> the closely related screamers.
</p>2. HTML 구조 파악하기
HTML 전체 구조
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> </body> </html>(1) <!DOCTYPE html> : Document type 은 "html 이다"라는 의미입니다.
(2) <html> </html> : HTML 문서의 root, top-level element, <html>태그 안에는 <head>와 <body>가 들어갑니다.
(3) <head> </head>
# 사용자에게 보여지는 UI 적인 요소는 없습니다.
# 구글에서 검색할 때, bookmark를 설정할 때 나오는 Title이나 부가설명 등이 들어갑니다.
# css 파일 연결 등도 <head> 부분에서 진행됩니다.
# Meta data가 있습니다.
(4) <meta charset="utf-8"> : 이 페이지에서 쓰여지는 글자의 형식을 "UTF-8"을 사용한다는 의미입니다.
(5) <meta name="viewport" content="width=device-width"> : Content의 넓이는 device의 넓이만큼 사용한다는 의미입니다.
(6) <title> </title> : Browser를 검색하거나 Bookmark를 추가하면 보여지는 Title 입니다.
(7) <body> </body> : 이 태그 안에 작성되는 것이 사용자에게 직접적으로 보여지는 부분입니다.
# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
- 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# HTML element 에 대한 내용이 있는 사이트: HTML elements reference
# HTML 관련: MDN Web Docs
# 작성한 HTML의 error를 Check 할 수 있는 사이트: Markup Validation Service
# HTML 작성 연습 사이트: Jsbin.com
반응형
'FrontEnd > HTML' 카테고리의 다른 글
| #4-1. HTML 스타일(style) 속성 (0) | 2021.07.16 |
|---|---|
| #3. HTML 공간 분할 요소:: iframe과 HTML 레이아웃(layout) (0) | 2021.07.15 |
| #2. HTML 공간 분할 요소:: 블록과 인라인(Block, Inline) (0) | 2021.07.15 |
| #1. HTML TEXT(텍스트) 요소 (0) | 2021.07.14 |
| HTML 의 구조와 Tag (0) | 2021.07.14 |
