❓ HTML
HTML은 HyperText Markup Language의 약자이다.
그럼 HyperText 는 뭐고 Markup 은 뭘까?
HyperText 는 간단히 말하자면 하이퍼 링크를 통해 다른 문서로 접근할 수 있는 텍스트이다.
하이퍼 링크를 클릭하면 해당 링크로 이동할 수 있으며,
이를 통해 웹 페이지는 서로 연결되어 사용자에게 다양한 정보를 제공할 수 있다.
Markup 은 태그 < > 를 이용해서 텍스트의 구조와 의미를 정의하는 방식이다.
HTML 은 이름에서 알 수 있듯이 마크업 방식을 사용해 웹 문서의 구조를 정의한다.
예를 들어, 아래 코드를 보면 <h1> 태그는 제목을, <p> 태그는 문단을, <ul> 과 <li> 태그는 리스트를 나타낸다.
<h1>제목임</h1>
<p>문단임</p>
<ul>
<li>리스트 1</li>
<li>리스트 2</li>
<li>리스트 3</li>
<li>리스트 4</li>
</ul>
<a href="https://www.naver.com">네이버로 이동</a>
❓ HTML 기본 문서 파헤치기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>기본적으로 index.html 파일은 이렇게 생겼다.
<!DOCTYPE html>
첫 줄에 위치한 이 선언은 브라우저가 문서를 렌더링 할 때 "quirks mode" 로 바뀌지 않도록 하기 위한 목적이다.
내가 이해한 바로는 브라우저가 과거에 만들어진 웹과도 호환성을 유지하고, 브라우저가 HTML5 문서로 올바르게 렌더링 될 수 있도록 도와주는 역할인 것 같다.
<html></html>
이 태그는 html 파일 전체를 감싸고 있는 루트(root) 요소이다.
lang 속성을 포함하는데 이것은 문서의 기본 언어를 설정하는 속성이다.
<head></head>
이 태그는 HTML 문서 정보를 정의하는 요소이다.
<meta charset="UTF-8"> - 문자 인코딩 지정, 이 태그가 없으면 한글, 특수문자가 깨져서 나올 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 브라우저에서 웹 컨텐츠를 볼 수 있는 창의 영역 설정
<title>Document</title> - 문서의 타이틀, 말 그대로 웹 페이지 제목
++) 인코딩?
우리가 입력한 코드를 컴퓨터가 이해할 수 있는 언어 이진수(0, 1)로 변환하는 과정이다.
이 과정을 거쳐야 브라우저에 화면이 정상적으로 보인다.
나는 우리가 입력한 코드 "hello" → 유니코드와 같은 문자 인코딩 방식(UTF-8) → 컴퓨터 언어(0, 1) 이 과정이라고 이해했다.
++) viewport?
width 와 height 속성으로 뷰포트의 크기를 제어한다.
여기서 device-width 는 디바이스 즉, 장치의 화면 너비를 따르도록 설정한 것이다.
initial-scale 은 페이지가 처음 로드될 때, 확대 / 축소비율을 제어한다.
++) title?
페이지의 제목은 검색 엔진 최적화(SEO)에 중요하다고 한다.
<body></body>
이 태그는 문서의 본문 요소로, 웹 페이지의 실제 콘텐츠가 들어간다.
📝 정리
1. HTML 은 하이퍼텍스트와 마크업 언어를 사용하여 웹 페이지의 구조를 정의하고 다른 문서로 연결하는 기능을 제공하는 언어이다.
2. <!DOCTYPE html>: 브라우저가 문서를 HTML5 표준으로 렌더링하도록 하는 선언이다.
3. <html>: 문서의 루트 요소, lang 속성으로 문서의 기본 언어를 설정한다.
4. <head>: 문서의 메타정보를 정의하는 부분이다.
5. <body>: 웹 페이지의 실제 콘텐츠가 들어가는 부분이다.
💡 참고 문헌
https://ko.wikipedia.org/wiki/%ED%95%98%EC%9D%B4%ED%8D%BC%ED%85%8D%EC%8A%A4%ED%8A%B8
하이퍼텍스트 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 하이퍼링크로 연결된 문서들. 하이퍼텍스트(hypertext, 문화어: 초본문, 하이퍼본문)는 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수
ko.wikipedia.org
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics
HTML 기본 - Web 개발 학습하기 | MDN
HTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 콘텐츠는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수
developer.mozilla.org
https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%9E%90_%EC%9D%B8%EC%BD%94%EB%94%A9
문자 인코딩 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 두벌식 한글 자판. 문자 인코딩(文字 - , 영어: character encoding) 또는 텍스트 인코딩(text encoding)[1] 또는 줄여서 인코딩은 사용자가 입력한 문자나 기호들을 컴퓨터
ko.wikipedia.org
https://www.w3schools.com/tags/tag_title.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'HTML' 카테고리의 다른 글
| [HTML] 시맨틱 태그가 뭘까 (1) | 2024.09.12 |
|---|
