1. HTML 이해하기 (1)

해당 학습 내용은 부스트캠프 - 웹 UI 개발 강의를 기본으로 정리한 기록입니다.

 

1. HTML 이란?

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어로, 모든 웹의 기초가 되는 언어이다.

브라우저는 HTML 문서를 해석해 화면에 구조화된 콘텐츠를 출력하며, 파일 확장자는 .html을 사용한다.

 

(1) HyperText

HyperText는 문서 간 연결(링크)을 가능하게 하는 텍스트를 의미한다.
책처럼 순차적으로 읽는 선형 구조를 벗어나, 사용자가 원하는 위치로 자유롭게 이동할 수 있도록 하는 비선형적 정보 접근을 지원한다.

웹의 핵심 개념 중 하나이다.

 

(2) Markup Language

Markup Language는 태그를 사용해 문서의 구조와 의미를 표현하는 언어이다.
HTML은 특정 태그로 콘텐츠의 역할을 정의하고(<h1>, <p>, <nav> 등), 이를 통해 브라우저가 문서를 이해하고 구조화된 형태로 렌더링할 수 있도록 한다.

마크업 언어는 프로그래밍 로직을 처리하는 언어는 아니지만, 정보를 계층적으로 표현하고 구조화하는 데 특화되어 있다.

 

 

참고 문서 : mdn-HTML 문서

HTML: Hypertext Markup Language | MDN

 

---

 

2. HTML 문법 - 태그

HTML 문서는 태그(Tag) 라는 구조적 요소들의 조합으로 이루어지며,
태그는 브라우저가 해당 콘텐츠의 의미와 역할을 이해하도록 돕는 가장 기본 단위다.

 

(1) 태그의 기본 구조

<h1> Hello, HTML </h1>

 

태그는 < > 기호 안에 태그 이름을 작성해 사용하며, 대부분의 태그는 시작 태그와 종료 태그로 구성된다.

시작 태그와 종료 태그 사이에 실제 표시될 콘텐츠가 들어가며, 종료 태그는 태그 이름 앞에 '/' 기호가 붙는다.

 

브라우저는 이 시작 태그 → 콘텐츠 → 종료 태그 구조를 해석해 화면에 렌더링한다.

 

 

(2) 단일 태그

<img src="image.png" />
<br />
<input type="text" />

 

이때, 모든 태그가 종료 태그를 필요로 하는 것은 아니다.
이미지, 줄바꿈처럼 자체적으로 역할이 완결되는 태그는 다음과 같이 단일 태그로 작성된다.

 

 

(3) 태그와 요소의 차이

 

• 태그(Tag): <h1>, </h1> 같은 마크업 기호 자체
• 요소(Element): 시작 태그 + 콘텐츠 + 종료 태그 전체 구조

콘텐츠, 즉 내용을 포함한 태그 전체를 요소(Element)라고 한다.

 

<p>Hello</p>

 

위 전체가 “요소(Element)”이며, <p>와 </p>는 “태그”다.

둘을 동일하게 사용하는 경우가 많지만 의미적으로는 구분된다.

 

참고 문서 : mdn-HTLM 요소 참고서 , w3chools-HTML Reference

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

 

W3Schools.com

 

 

(4) 태그의 역할

HTML에는 많은 종류의 태그가 있으며, 각각 고유한 의미를 가진다.
브라우저와 검색 엔진, 보조기기가 문서를 정확히 이해할 수 있도록 적절한 의미의 태그를 선택해 작성하는 것이 HTML의 핵심이다.

 

태그는 HTML뿐 아니라 XML, SGML, XHTML 등 다양한 마크업 언어에서도 사용되지만,
각 언어마다 규칙과 목적이 다르므로 문맥에 맞게 사용해야 한다.

 

---

 

3. HTML 문법 - 속성

속성(Attribute)은 태그에 추가 정보를 제공하거나, 태그의 동작과 표현 방식을 제어하는 설정값이다.
태그만으로 표현하기 어려운 세부 설정을 속성으로 지정해 브라우저가 더 정확하게 렌더링할 수 있도록 한다.

 

(1) 속성 사용 방법

속성은 이름(name) 과 값(value) 으로 구성되며,
시작 태그의 태그 이름 뒤에 공백을 두고 작성한다.

<h1 id="title"> Hello, HTML</h1>

 

속성은 위의 예시와 같이 속성이름 = "속성값" 으로 표현한다. 

 

HTML에서는 속성값을 쌍따옴표(") 또는 홑따옴표(') 로 감싸 표현할 수 있으며,
일반적으로 쌍따옴표를 많이 사용한다.

 

참고 문서 : mdn-HTML 요소 참고서

HTML 특성 참고서 - HTML: Hypertext Markup Language | MDN

 

 

(2) 여러 속성 사용 방법

태그는 여러 개의 속성을 동시에 선언할 수 있으며,
속성들은 공백으로 구분하여 작성한다.

<h1 id="title" class="main">Hello, HTML</h1>

 

속성의 선언 순서는 태그의 동작에 영향을 주지 않는다.
브라우저는 속성 순서와 상관없이 모든 속성을 해석해 적용한다.

 

 

 

 

(2) 속성의 종류

HTML 속성은 크게 글로벌 속성(Global Attributes) 과
특정 태그에서만 사용할 수 있는 속성(Specific Attributes) 으로 나뉜다.

 

글로벌 속성

모든 태그에서 사용할 수 있는 속성으로, HTML 문서 어디서나 공통적으로 적용된다.

 

대표적인 글로벌 속성으로는

• id
• class
• style
• title
• data-* (사용자 정의 데이터 속성)

우의 예시의 id와 class 역시 글로벌 속성이다.

 

특정 태그 전용 속성

태그의 의미나 기능에 따라 특정 태그에서만 사용할 수 있는 속성이다.

예시:

• <img>의 src, alt
• <a>의 href, target
• <input>의 type, placeholder

이처럼 속성은 선택적으로 사용할 수 있는 속성도 있고,
태그의 기능을 위해 반드시 필요한 필수 속성도 존재한다.
(예: <img src="…" />에서 src는 필수)