본문 바로가기
Front-End/HTML

HTML이란?

by project100 2023. 1. 19.

Hypertext Markup Language의 줄임말

웹 페이지 표시를 위해 개발된 지배적인 마크업 언어

 

 💡 Markup Language이란?

마크업은 그 파일이 프린터로 출력되거나 화면에서 어떻게 보여야 할 것 인지를 나타내기 위해, 또는 그 문서의 논리적인 구조를 묘사하기 위해서, 텍스트나 워드프로세싱 파일의 특정 위치에 삽입되는 일련의 문자들이나 기호들을 말한다.

 

  • HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.
  • <> 꺾쇠 괄호에 둘러싸인 "tag"로 되어있는 HTML 요소 형태로 작성한다.
  • HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 JavaScript , 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다.

 

HTML 기초

  • HTML은 크게 head와 body로 구성된다.
  • head안에는 페이지의 속성 정보가, body안에는 페이지의 내용이 들어있다.
    • head 안에 들어가는 대표적인 요소들: meta, script, link, title 등
    • body 안에 들어가는 대표적인 요소들: div, p, img 등 

 

HTML의 구조

  • "어떤 요소 안에 어떤 요소가 있느냐"를 이해하는 것이 가장 중요하다.
  • 가계도 같다고 해서 부모-자식 구조, 뿌리-줄기- 잎 같다고 해서 tree 구조라고 한다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다

 

태그<tag>

  • 대부분의 요소들은 시작 태그 <>와 종료 태그 </>로 작성되며 그 사이에 내용이 들어간다.
  • 주석 처리 <!— 주석 처리 내용—> 주석은 문서 어디든 올 수 있으며, doctype 선언 이전에도 올 수 있다.
  • 주석은 화면상에 나타나지 않는다.
  • 태그 종류가 수십 가지가 넘어 사용 빈도가 높은 일부 태그만 암기하고, 나머지는 '태그 사전(또는 레퍼런스)'이라고 하는 도움말 파일을 참고한다.

태그 사용 예시>

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        Hello, world!
    </body>
</html>

💡 크롬에서 HTML 요소 확인하기

크롬 브라우저에서 화면에서 우클릭 > 검사를 누르면

개발자 도구에서 Elements 탭하여 확인할 수 있다.

F12 또는 Cmd+Option+I(맥), Ctrl+Shift+I(윈도우) 단축키를 이용할 수도 있다.

 

'Front-End > HTML' 카테고리의 다른 글

HTML - Favicon이란?  (0) 2023.02.08
HTML 태그 - 서식에 사용되는 태그들  (0) 2023.02.06
HTML 요소 - inline-element, block-element  (0) 2023.02.05
HTML 태그 보충 설명  (0) 2023.02.01
HTML 태그 - img, a href  (0) 2023.02.01