HTML이란
HTML은 Hypertext Markup Language의 약자로 프로그래밍 언어가 아니라 마크업 언어다.
Markup은 원래 출판 업계에서 쓰는 용어인데,
에디터가 출판물 원고에 표시(마크)를 남기면서 “여기는 제목”, “여기는 본문” 하던걸 Markup이라고 한다.
HTML이 하는게 이런 일이다. HTML에서는 마크 대신 태그라는걸 사용하는데
텍스트나 사진 같은 내용을 태그로 감싸면서 “이 부분은 제목”, “이 부분은 본문” 하는거다.
HTML의 목적
문서의 내용들을 태그로 구분하는 것은 문서를 구조화하는 것이라고 이해할 수 있다.
문서의 어떤 부분이 제목인지, 어떤 부분이 본문인지, 어떤 부분이 웹페이지 상에서 버튼인지 등을 정의하는 것이다.
브라우저는 이러한 구조 정보를 기반으로 웹페이지를 렌더링해서 화면에 그려준다.
그러니까 html 파일은 웹페이지의 온라인 발행을 위해 브라우저에 보낼 디지털 출판물이라고 볼 수 있다.
HTML의 구조
디지털 출판물을 작성하기 위해서는 HTML의 기본 구조와 태그 사용법을 알아야 한다.
먼저 기본적인 HTML 파일의 구조를 살펴보자.
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title of Document</title> <link href="example.css" rel="stylesheet"></head><body>
</body></html>태그 읽는 법
<html>, <head> 이런 녀석들이 아까 말한 태그다.
아무개 태그라는게 있다고 치자.
<아무개>로 열고 </아무개>로 닫는다고 표현하는데, “여기서부터 여기까지는 아무개임”이라고 구분하는거다.
각 코드의 의미
<!DOCTYPE html> <!-- HTML5 표준 모드로 렌더링해주세요 -->이걸 안쓰면 예전 방식으로 렌더링되니까 항상 맨 처음에 써줘야 한다.
<html> <!-- 여기서부터 --> ...</html> <!-- 여기까지가 HTML로 구조화한 내용임 -->브라우저가 렌더링해줄 전체 영역을 명시하는거다.
<head> <meta charset="UTF-8"> <!-- UTF-8로 인코딩해줘 --> <title>Title of Document</title> <!-- 브라우저 탭에 표시할 제목 --> <link href="example.css" rel="stylesheet"> <!-- 링크된 css 파일로 스타일링해줘 --></head><head> 태그로 감싼 부분은 문서의 메타 데이터 영역이다.
브라우저가 이 문서를 처리하기 전에 알아야 할 사전 정보들이다.
<body> <!-- 여기서부터 --> ...</body> <!-- 여기까지가 실제로 렌더링할 내용 -->마지막으로 <body> 태그로 감싼 부분이 사용자한테 보여줄 내용들이다.
결국 HTML 코딩의 핵심은 <body> 안을 잘 구조화하는 것인데, 그러려면 어떤 태그가 있는지 알아야 한다.
기본 태그
<!-- 텍스트 --><h1>제목</h1> <!-- h1 ~ h6까지 있음 --><p>본문 문단</p><a href="링크 주소">링크 텍스트</a><strong>굵게</strong><span>텍스트 일부 구분</span>
<!-- 미디어 --><img src="이미지 경로" alt="이미지 설명">
<!-- 구조/레이아웃 --><div>영역 구분의 기본 단위</div><ul><li>순서 없는 리스트</li></ul><ol><li>순서 있는 리스트</li></ol><button>버튼</button>미디어의 <img> 태그 같은 경우는 닫는 태그 없이 쓴다.
<a>와 <img> 태그의 경우 href와 src라는 녀석을 추가로 기입하는데, 이걸 태그의 속성이라고 한다.
속성(Attribute)
속성은 태그에 추가 정보를 넣는 방법이다. 문법은 <태그 속성명="값"> 이다.
| 속성 | 쓰는 태그 | 역할 |
|---|---|---|
href | <a> | 링크 주소 |
src | <img> | 이미지 경로 |
alt | <img> | 이미지 로드 실패 시 대체 텍스트, 스크린 리더용 |
style | 거의 모든 태그 | 인라인으로 직접 스타일 지정 |
class | 거의 모든 태그 | CSS/JS에서 요소를 선택할 때 쓰는 식별자 (중복 가능) |
id | 거의 모든 태그 | class와 같지만 문서 내 고유값, 중복 불가 |
style, class, id는 웹페이지 스타일링에 쓰이는 속성으로, 구체적인 사용법은 CSS 포스팅에서 다룬다.
코딩애플 프론트엔드 강의를 참고해 정리한 내용입니다