web

HTML 기초 01

HTML 기초 01입니다. HyperText와 Markup, 기본 문서 구조, 태그와 속성, 단독 태그, 중첩 규칙과 로컬 서버 확인을 정리했습니다.

devmes

• 조회 182

HTML 기초 01

HTML은 HyperText Markup Language의 약자다. 웹페이지의 본문, 링크, 이미지, 문서 구조를 브라우저가 이해할 수 있게 표시하는 마크업 언어다. HTML은 화면을 예쁘게 꾸미는 언어라기보다 문서의 의미와 구조를 잡는 언어로 보는 편이 정확하다.

HyperText와 Markup

HyperText는 문서 안의 링크를 통해 다른 문서나 위치로 이동할 수 있는 텍스트를 의미한다. Markup은 제목, 문단, 목록, 링크, 이미지처럼 내용의 역할을 태그로 표시하는 방식이다.

<a href="https://devmes.com/">devmes.com으로 이동</a>

기본 문서 구조

새 HTML 파일을 만들 때는 최소한 문서 타입, 언어, 문자셋, 제목, 본문 영역을 갖추는 것이 좋다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML 기초 01</title>
</head>
<body>
  <h1>첫 HTML 문서</h1>
  <p>HTML은 문서의 구조를 표현한다.</p>
</body>
</html>

태그와 속성

대부분의 태그는 여는 태그와 닫는 태그가 한 쌍이다. 속성은 태그에 추가 정보를 제공한다. 예를 들어 링크의 목적지는 href, 이미지의 경로는 src, 대체 텍스트는 alt 속성에 적는다.

<p>문단 태그는 닫는 태그가 필요하다.</p>

<a href="/tags/linux/">Linux 태그 보기</a>

<img src="/content/images/sample.png" alt="예제 이미지">

단독 태그

br, hr, img, meta, input처럼 내용이 없는 void element는 닫는 태그를 따로 쓰지 않는다.

<p>첫 줄<br>두 번째 줄</p>
<hr>
<img src="logo.png" alt="서비스 로고">

중첩 규칙

태그는 먼저 연 태그를 나중에 닫는 방식으로 올바르게 중첩해야 한다. 잘못 중첩된 HTML은 브라우저가 자동 보정할 수 있지만, 원하는 구조와 다르게 해석될 수 있다.

<!-- 올바른 중첩 -->
<p><strong>중요한 문장</strong>입니다.</p>

<!-- 잘못된 중첩 -->
<p><strong>중요한 문장</p></strong>

로컬에서 확인하기

VS Code 같은 편집기로 index.html을 만들고 브라우저에서 바로 열어도 된다. 상대 경로와 파일 로딩을 조금 더 실제 웹 환경처럼 확인하려면 간단한 로컬 서버를 띄운다.

mkdir -p html-basic-01
cd html-basic-01
vi index.html

python3 -m http.server 8000
http://127.0.0.1:8000/

정리

  • HTML은 문서의 의미와 구조를 표현한다.
  • CSS는 표현, JavaScript는 동작을 담당한다.
  • 대부분의 태그는 여는 태그와 닫는 태그가 필요하다.
  • 이미지에는 접근성을 위해 alt를 적는다.
  • 브라우저가 오류를 보정하더라도 올바른 중첩 구조로 작성해야 한다.
BGM EVER