티스토리 뷰

카테고리 없음

HTML 기본 태그 한눈에 정리: 블록, 인라인, 컨테이너, 이미지까지

퀸도도 2025. 6. 6. 09:10

목차



    반응형

    웹 개발 입문자를 위한 HTML 핵심 태그 요약

    웹 구조를 이해하는 데 필수적인 HTML의 블록 요소와 인라인 요소부터
    컨테이너 태그, 전역 속성, 이미지 태그까지 한눈에 정리해드립니다

     

    HTML 구조를 이해하는 것이 웹의 첫걸음입니다

     

    HTML은 웹 페이지를 구성하는 가장 기본적인 언어입니다.
    그 구성 요소는 크게 블록 요소와 인라인 요소로 나뉘며,
    이 두 가지의 차이를 이해하는 것이 HTML 구조 이해의 출발점이 됩니다.

     

    여기에 콘텐츠를 묶는 컨테이너 태그,
    모든 태그에 공통적으로 적용되는 전역 속성,
    시각적 콘텐츠를 표현하는 이미지 태그까지 익히면
    웹 페이지의 큰 그림이 머릿속에 그려지게 됩니다.

     

    이 글에서는 다음 다섯 가지 핵심 항목을 중심으로
    HTML 기본 태그의 개념과 예시를 알기 쉽게 정리합니다.

     

    1. 블록 요소 vs 인라인 요소
    2. 인라인 텍스트 요소의 종류와 효과
    3. 컨테이너 요소: div와 span
    4. 모든 태그에 적용 가능한 전역 속성
    5. 이미지 태그(img)의 사용법과 속성

    요소구분과 인라인텍스트 코드적용

     

    블록 요소 vs 인라인 요소

     

    블록 요소는 한 줄 전체를 차지하고 줄바꿈이 자동으로 적용되는 구조입니다.
    대표적으로 div, p, h1부터 h6, ul, li 등이 이에 해당합니다.

     

    반면 인라인 요소는 콘텐츠의 너비만큼만 공간을 차지하며
    옆으로 이어지는 구조입니다.
    대표적인 인라인 태그로는 span, a, strong, em 등이 있습니다.

     

    핵심 포인트

    • 블록 요소: 전체 너비 사용, 줄바꿈 포함
    • 인라인 요소: 콘텐츠 너비만 사용, 줄바꿈 없음

    적용한 코드 결과물

     

    인라인 텍스트 요소의 활용

     

    인라인 요소 중에는 텍스트에 스타일을 적용할 수 있는 태그들이 존재합니다.
    이들은 의미 중심의 표현을 위해 자주 사용됩니다.

     

    태그 기능 설명

     

    <mark> 강조 표시
    <strong> 굵은 글씨로 강조
    <em> 기울임 강조
    <q> 짧은 인용문 표시
    <s> 취소선 표시

     

    예시 코드

    html
<mark>강조된 텍스트</mark>
<strong>중요한 텍스트</strong>
<em>기울인 텍스트</em>
<q>인용된 텍스트</q>
<s>취소된 텍스트</s>

     

    컨테이너 요소 div와 span

     

    컨테이너 요소: DIV vs SPAN

     

    <div>는 블록 수준의 컨테이너로, 여러 요소를 그룹화할 때 유용합니다.
    스타일이나 레이아웃을 지정할 때 구조 단위를 나누는 데 많이 사용됩니다.

     

    <span>은 인라인 수준의 컨테이너로, 텍스트 일부에 스타일을 적용할 때 사용됩니다.
    단일 단어나 문장 내 일부 강조에 적합합니다.

     

    예시 코드

    html
<div class="box">전체 콘텐츠를 묶는 컨테이너</div>
<span class="highlight">텍스트 일부 강조</span>

     

    결과물

     

    전역 속성(Global Attributes)

     

    HTML 대부분의 태그에 공통적으로 사용 가능한 속성을 전역 속성이라 합니다.
    이 속성들을 잘 이해하면 CSS, 자바스크립트 등과 연동도 쉬워집니다.

     

    속성 설명

    id 고유 식별자 (스타일, 스크립트 연결용)
    class 공통 스타일 지정용 그룹명
    style 인라인 CSS 적용
    title 마우스 오버 시 툴팁 제공

     

    팁: 더 자세한 속성 설명은 MDN Global Attributes에서 확인할 수 있습니다.

     

    이미지 태그를 적용

     

    이미지 태그(img)의 구조와 활용법

     

    이미지를 삽입할 때 사용하는 <img> 태그는 닫는 태그가 없습니다.
    이미지 경로, 대체 텍스트, 크기 등을 지정할 수 있는 속성이 포함됩니다.

     

    속성 설명

    src 이미지 파일 경로 또는 URL
    alt 이미지 대체 텍스트 (접근성 필수)
    width, height 이미지의 가로/세로 크기 (단위 없이 숫자만 입력)

     

    예시 코드

    html
<img src="example.jpg" alt="예제 이미지" width="300" height="200" >

     

     

    이미지 결과물

     

    HTML 구조의 기초를 이해하면 웹 페이지가 보입니다

     

    블록과 인라인 요소의 차이, 텍스트 강조 태그, 컨테이너 구조,
    전역 속성의 활용, 이미지 표현 방식까지 익히면
    웹 페이지의 구조를 보다 체계적으로 설계할 수 있습니다.

     

    HTML 기본 태그의 구조와 속성은 웹 개발의 기초입니다
    이 구조를 잘 이해하면 더욱 의미 있고
    접근성 높은 웹 페이지를 구성할 수 있습니다.

    반응형