함번보고 두번보고
[HTML] Web 기초, HTML? 개념 잡고 가자! 본문
1. HTML
Wikipedia에서 살펴본 HTML이란..
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.
즉, HTML은 웹 브라우저(Chrome, Safari, Firefox 등..)에서 나타나도록? 디자인된 문서의 표준 '마크업 언어'이다.
2. Markup language
그럼.. '마크업 언어'는 뭔데..? 라는 질문이 꼬리를 물고 생길 터인데..
위 링크를 타고 들어가서 살펴보면..
In computer text processing, a markup language is a system for annotating a document in a way that is syntactically distinguishable from the text, meaning when the document is processed for display, the markup language is not shown, and is only used to format the text.
이말인 즉슨..일반적인 텍스트와 문법적으로 구분하기 위해 문서에 주석을 다는 것을 말하는데, 이는 컴퓨터가 문서를 읽을 때 마크업 언어는 보여지지 않고, 텍스트 서식을 지정하는 용도로만 사용된다는 것을 말한다.
예시를 하나 보자.
위 그림에서 파란색 부분이 앞서 언급하였던 주석 즉, Annotating을 의미하고 보통 이것을 '태그(tag)'라고 부른다.
보다시피 우리는 위의 문장를 빠르게 파악할 수 있는데, 그 이유는 각각의 태그를 통해 이 글의 구조를 파악할 수 있기 때문이다.
다시 정리하자면, 마크업 언어라는 것은 단순한 텍스트가 아닌! 태그들을 이용하여 어느정도 구조적으로 작성된 것 말한다.
3. HTML Structure
그럼 이제 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>
html 구조는 크게 html 문서임 알려주는 첫 문단'<!COCTYPE html>'을 제외하고
크게 <head></head>와 <body></body> 두 가지로 나뉘어 진다.
<head>태그는 사용자에게 보여지는 UI적인 요소가 전혀 없고, 구글에서 검색할 때 나오는 타이틀이나 부가설명 그리고 북마크 추가할 때 나오는 제목이나 아이콘이 정의되어 있다. 또한 CSS파일과 연결하는 부분도 <head> 태그 안에 작성한다. 즉, <head>태그는 사용자에게 보여지는 정보는 없고, meta 데이타(상세정보)만 있다.
<body>태그는 사용자에게 보여지는 가장 중요한 최상위의 컨테이너다. <body> 태그 안에 작성하는 내용들이 바로 사용자들에게 보여진다.
4. HTML elements
<head>태그와 <body>태그 안에 무엇을 집어야 우리가 원하는 것들을 등록하고 표현할 수 있을까?
그것은 바로 Web 백과사전이라고 볼 수 있는 MDN이라는 사이트에서 확인할 수 있다.
HTML elements reference - HTML: HyperText Markup Language | MDN
HTML elements reference This page lists all the HTML elements, which are created using tags. They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's pag
developer.mozilla.org
아 그리고 HTML Element와 tag가 헷갈릴 수 있는데 차이점은 아래 그림과 같다.
만약 아직 개발 환경이 구축되지 않았다면, jsbin 또는 repl 에서 간단한 연습을 할 수 있다.
JS Bin
Sample of the bin:
jsbin.com
The collaborative browser based IDE
Repl.it is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages.
repl.it
그리고 내가 의도한 방식으로 실행이 안되었을 때, 아래 사이트에서 손쉽게 디버그를 할 수 있다.
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
5. Document and website structure
Website를 구축할 때, MDN에서는 문서 <body>에 어느정도 구조를 나누어서 작성하는 것을 권장하고 있는데,
Document and website structure - Learn web development | MDN
Document and website structure In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu",
developer.mozilla.org
header:
navigation bar:
main content:
sidebar:
footer:
이렇게 5가지로 나누어저 있지만 반드시 저렇게 할 필요는 없다.
6. Practice
이 부분은 아직 나도 미흡한 부분이지만, 나의 롤모델인 엘리님께서 연습하시라고 하셨다...
어느 웹사이트를 보고 위에서 배운 웹사이트 구조를 파악하는 연습을 꾸준히 하면 내공이 쌓인다고하니 꼭 해보길 권한다..
'Front-End > HTML' 카테고리의 다른 글
| [HTML] Web 기초2, HTML Tag에도 유형이 있다?! (0) | 2021.03.11 |
|---|
