HTML 소개

Computer/Web

HTML 소개

choideu 2022. 7. 16. 08:34

HTML(HyperText Markup Language): 웹을 이루는 가장 기초적인 구성 요소, 웹 콘텐츠의 의미와 구조 정의

Not programming lauguage!, 컨텐츠 구조를 정의하는 마크업 언어
컨텐츠의 서로 다른 부분들을 씌우거나(wrap), 감싸서(enclose) 다른 형식으로 보이게 하거나 특정한 방식으로 동작하도록 하는 일련의 요소로 이루어져 있음

HTML 요소 분석

여는 태그(opening tag): 요소의 이름으로 구성되고 <>으로 감싸짐
닫는 태그(closing tag): 여는 태그와 같지만 요소의 이름 앞에 전방향 슬래시가 포함됨 ex) </p>
컨텐츠(content): 요소의 내용
요소(element): 여는 태그 + 닫는 태그 + 컨텐츠

HTML 속성

실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보

요소 이름
속성 이름 뒤에는 등호(=)가 위치
속상 값의 앞 뒤에 열고 닫는 인용부호 (" or ')가 있어야 함

HTML 요소 중첩

요소를 다른 요소 안에 놓을 수 있음 -> 중첩(nesting)이라고 함

*empty content

<img src="~", alt="~"> 처럼 어떤 요소들은 내용을 갖지 않는 것도 존재함

HTML 공백

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

코드에 많은 공백이 포함되어 있더라도 HTML parser는 가독성을 위해 코드를 렌더링할 때 공백의 각 시퀀스를 단일 공백으로 줄임

HTML 특수 문자

<	<
>	>
"	"
'	'
&	&

왼쪽은 HTML 구문 자체의 일부이기 때문에 텍스트에 사용하려면 오른쪽으로 사용해야함

HTML 문서 해부

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

<!DOCTYP html>: 모든 것이 올바르게 동작하기 위해 포함되어야 할 역사적인 유물정도로 알고 있으면 됨

<html></html>: 페이지 전체의 컨텐츠를 감싸며, root 요소라고도 함

다음과 같은 요소들은 <head> 요소에 포함되어야 함

- <title>

- <style>

- <base>

- <link>

- <meta>

- <script>

- <noscript>

<head></head>: HTML 페이지에 포함되어 있는 모든 것들의 컨테이너 역할로 페이지를 조회하는 사람들에게 보여주지 않을 컨텐츠임, keywords와 검색 결과에 표시되길 원하는 페이지 설명, 컨텐츠를 꾸미기 위한 CSS, 문자 집합 선언등이 포함됨

<body></body>: 페이지에 방문한 웹 사용자들에게 보여주길 원하는 모든 컨텐츠를 담고 있음

<title></title>: 페이지의 제목

참고글: https://developer.mozilla.org/ko/

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org