HTML이란 — 웹 페이지의 뼈대
웹 페이지를 처음 만들어보려고 하면 세 가지 파일이 등장한다. HTML, CSS, JavaScript. 이 셋은 각자 역할이 다르다.
- HTML — 내용과 구조 ("여기에 제목이 있고, 그 아래 문단이 있다")
- CSS — 디자인 ("제목은 파란색, 글자 크기는 24px")
- JavaScript — 동작 ("버튼을 누르면 팝업이 뜬다")
HTML은 그중에서 가장 먼저 배워야 하는 뼈대다.
HTML이란
HTML(HyperText Markup Language)은 웹 페이지의 구조와 내용을 정의하는 마크업 언어다. 프로그래밍 언어가 아니라 마크업 언어라는 점이 중요하다. 조건문이나 반복문 같은 로직 없이, 태그(tag)로 콘텐츠의 의미와 구조를 표현한다.
기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지 제목</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>첫 번째 웹 페이지입니다.</p>
</body>
</html>각 부분이 하는 일을 하나씩 보면 이렇다.
<!DOCTYPE html>— 이 파일이 HTML5 문서임을 브라우저에 알림<html lang="ko">— 문서 전체를 감싸는 루트 태그.lang은 언어 설정<head>— 브라우저에게 전달하는 정보 (화면에는 표시되지 않음)<meta charset="UTF-8">— 한글 등 다양한 문자를 깨지지 않게 표시<meta name="viewport" ...>— 모바일 화면 대응을 위한 설정<title>— 브라우저 탭에 표시되는 제목<body>— 실제 화면에 보이는 모든 내용이 여기에 들어감
태그의 구조
HTML은 태그(tag) 로 이루어진다. 대부분의 태그는 여는 태그와 닫는 태그 쌍으로 구성된다.
<p>이것은 문단입니다.</p><p>— 여는 태그</p>— 닫는 태그 (슬래시가 붙음)- 그 사이 내용이 해당 태그의 콘텐츠
일부 태그는 닫는 태그 없이 단독으로 쓰인다. 이를 빈 요소(void element) 라고 한다.
<br> <!-- 줄바꿈 -->
<hr> <!-- 수평선 -->
<img src="photo.jpg" alt="사진"> <!-- 이미지 -->
<input type="text"> <!-- 입력 필드 -->속성(Attribute)
태그에 추가 정보를 넣을 때 속성을 사용한다. 여는 태그 안에 속성명="값" 형식으로 작성한다.
<a href="https://example.com" target="_blank">링크 텍스트</a>
<img src="photo.jpg" alt="사진 설명" width="300">href— 링크 주소target="_blank"— 새 탭에서 열기src— 이미지 파일 경로alt— 이미지를 불러오지 못했을 때 표시할 대체 텍스트
주석
코드에 설명을 남길 때 주석을 쓴다. 브라우저는 주석을 무시하고 화면에 표시하지 않는다.
<!-- 이것은 주석입니다 -->
<p>이 문단은 화면에 보입니다.</p>HTML은 내용이 어떤 의미를 갖는지 태그로 표현하는 것이 전부다. 제목은 <h1>, 문단은 <p>, 링크는 <a>. 이 기본 감각을 잡고 나면 나머지 태그들도 같은 방식으로 읽힌다.
<- 개발 공부하는 나