[Web UI 기초 #부록] 용어 집중 설명: HTML 입문자가 꼭 알아야 할 핵심 용어 정리

gobugi306 2025. 5. 30. 16:01

웹 개발을 시작하는 초심자들이 가장 처음 마주치는 벽은 '낯선 용어'입니다. 이 글에서는 HTML 문서를 이해하고 작성하는 데 필수적인 기본 개념들을 쉽고 명확하게 설명합니다. 복잡한 이론보다는 실제 문서를 만들며 마주치는 용어 위주로 정리했습니다.

✅ 문서 구조와 관련된 기본 용어

📌 태그 (Tag)

예시: <p>, <h1>, <img>

태그는 HTML에서 정보를 표현하기 위한 기본 단위입니다. 꺾쇠괄호(< >)로 감싸며, 어떤 정보인지 브라우저에게 알려줍니다.

📌 여는 태그 / 닫는 태그 (Opening / Closing Tag)

<h1> / </h1>

태그는 대부분 시작과 끝이 있으며, /가 있는 것이 닫는 태그입니다. 이 구조가 HTML 문서를 정확하게 구성합니다.

📌 자체 닫는 태그 (Self-Closing Tag)

예시: <img>, <br>, <hr>, <input>

내용이 없어서 닫는 태그가 필요 없는 태그들입니다. 이미지나 줄바꿈처럼 그 자체로 완성되는 요소들이 해당됩니다.

📌 요소 (Element)

예시: <p>안녕하세요</p>

하나의 태그 전체 구조를 요소라고 합니다. 보통 여는 태그 + 내용 + 닫는 태그로 이루어져 있습니다.

📌 속성 / 속성 값 (Attribute / Attribute Value)

예시: <img src="logo.png" alt="로고">

속성은 태그에 추가 정보를 부여하는 키워드이며, 속성명="값" 형식으로 작성합니다. 이때 "값"에 해당하는 부분을 속성값이라고 합니다.

📌 내용 (Content)

태그 안에 들어가는 실제 텍스트나 이미지 등, 화면에 나타날 실질적인 정보입니다.

✅ 문법과 작성 개념

📌 HTML 문서 vs 웹페이지

HTML 문서: 메모장에서 작성한 `.html` 파일 (코드 상태)
웹페이지: 브라우저가 HTML 문서를 해석해서 보여주는 화면

같은 내용이지만 코드 형태냐 화면 형태냐의 차이입니다.

📌 마크업 (Markup)

📖 비유: 책에 스티커를 붙여 강조하거나, 형광펜으로 표시하는 행위

단순한 텍스트에 구조와 의미를 부여하는 행위입니다. HTML은 마크업 언어입니다.

📌 중첩 / 부모-자식 요소 (Nesting / Parent-Child Element)

예시:

<div> <!-- 부모 -->
  <p>문장 <strong>강조</strong></p> <!-- 자식들 -->
</div>

태그 안에 또 다른 태그가 들어가는 구조를 중첩이라고 하며, 이때 감싸는 쪽을 부모 요소, 감싸인 쪽을 자식 요소라고 합니다.

📌 루트 요소 (Root Element)

예시: <html>

HTML 문서의 가장 바깥을 감싸는 태그입니다. 모든 내용은 이 태그 안에 있어야 합니다.

✅ 웹페이지 작동 방식 관련

📌 브라우저 (Browser)

크롬, 사파리, 엣지 등 HTML 문서를 화면에 보여주는 프로그램입니다.

📌 렌더링 (Rendering)

HTML 등의 코드를 실제 웹페이지처럼 화면에 그리는 과정입니다.

📌 DOM (Document Object Model)

브라우저가 HTML 문서를 이해하고 다루기 위해 트리 구조로 해석한 문서 모델입니다.

✅ 접근성과 시맨틱 관련

📌 시맨틱 태그 (Semantic Tag)

예시: <header>, <nav>, <article>, <footer>

단순히 모양이 아니라 의미를 가진 태그입니다. 웹의 구조를 더 명확하게 표현하고, 접근성과 SEO에 도움을 줍니다.

📌 접근성 (Accessibility)

모든 사용자가 웹을 불편 없이 사용할 수 있게 만드는 기술과 기준입니다. 예: 시각장애인을 위한 대체 텍스트 등

📌 SEO (Search Engine Optimization)

검색엔진이 사이트를 잘 찾고 분석할 수 있도록 만드는 검색 최적화 전략입니다. 구조가 명확할수록 유리합니다.

✍️ 마무리

이 용어들은 앞으로 HTML이나 웹 UI 관련 내용을 배울 때 수시로 등장합니다. 생소해 보여도 차근히 이해하면 점점 자연스럽게 받아들일 수 있을 것입니다. 이 시리즈에서는 필요할 때마다 다시 돌아와 참고할 수 있도록 이 글을 ‘용어집’처럼 사용할 수 있습니다.

다음 글에서는 HTML 태그의 실제 사용 예시를 중심으로 핵심 태그들을 정리할 예정입니다.