[HTML5]HTML 공간 분할 태그 span과 div 태그

728x90

SMALL

웹 페이지의 레이아웃을 구성하고 내용을 그룹화하는 데는 HTML의 span 태그와 div 태그가 사용됩니다. span과 div 태그의 활용법과 차이점에 대해 자세히 알아보겠습니다.

≣ 목차

span 태그🎁
div 태그📦
span과 div 태그의 차이점💕
핵심 내용👀

span 태그와 div 태그의 주요 특징인 인라인 속성과 블록 속성에 관한 내용은 아래 포스팅을 참고해 주세요👀

[CSS3]CSS 박스 모델 마스터하기: 기초부터 실전까지

CSS 박스 모델은 가장 기본적이면서도 중요한 개념 중 하나입니다. HTML 요소는 모두 하나의 박스로 표현되며, 이 박스는 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성됩니다. 이

creativevista.tistory.com

span 태그🎁

span 태그란?

span 태그는 HTML에서 인라인 요소로 사용됩니다. 이 태그는 주로 텍스트의 특정 부분을 스타일링하거나, 특정 동작을 부여하는 데 사용됩니다. span 태그 자체적으로 아무런 의미나 스타일을 가지고 있지 않으며, 스타일링 및 스크립팅을 위해 사용됩니다.

span 태그 용도

텍스트 강조, 스타일 적용, 이벤트 핸들링

span 태그 주요 특징

인라인 요소: span 태그는 다른 텍스트나 인라인 요소와 같은 줄에 배치됩니다.
스타일 적용: CSS를 사용하여 텍스트의 일부분에 스타일을 적용할 수 있습니다.
스크립트 적용: 자바스크립트를 사용하여 특정 동작이나 이벤트를 적용할 수 있습니다.

span 태그 사용 예제

다음은 span 태그를 사용하여 텍스트의 일부를 스타일링하는 예제입니다.

예제1: 텍스트 강조

위 예제에서 span 태그는 텍스트 "이 부분"을 빨간색으로 스타일링하는 데 사용되었습니다.

<p>이 문장에서 <span style="color: red;">이 부분</span>만 빨간색으로 표시됩니다.</p>

예제2: 클래스 사용

이 예제에서는 span 태그에 class 속성을 사용하여 CSS 클래스를 적용했습니다. "강조된 텍스트"는 노란색 배경과 굵은 글씨로 표시됩니다.

<style>
.highlight {
    background-color: yellow;
    font-weight: bold;
}
</style>

<p>여기서 <span class="highlight">강조된 텍스트</span>는 배경색이 노란색이고, 굵게 표시됩니다.</p>

예제 3: 자바스크립트와 연계

위 예제에서는 span 태그에 id 속성을 사용하여 자바스크립트 이벤트 리스너를 추가했습니다. "클릭 가능한 텍스트"를 클릭하면 알림 창이 표시됩니다.

<p>이 문장에서 <span id="clickable">클릭 가능한 텍스트</span>는 클릭할 수 있습니다.</p>

<script>
document.getElementById("clickable").addEventListener("click", function() {
    alert("텍스트가 클릭되었습니다!");
});
</script>

스타일링 및 자바스크립트 적용

span 태그는 주로 스타일링과 자바스크립트를 적용하는 데 사용됩니다. CSS를 사용하여 다양한 스타일을 적용할 수 있으며, 자바스크립트를 통해 동적인 동작을 부여할 수 있습니다.

css 예제

.red-text {
    color: red;
    font-size: 14px;
}

.underline {
    text-decoration: underline;
}

HTML 예제

<p>여기서 <span class="red-text">빨간색 텍스트</span>와 <span class="underline">밑줄 텍스트</span>를 볼 수 있습니다.</p>

위 예제에서는 span 태그를 사용하여 텍스트의 색상과 밑줄 스타일을 적용했습니다.

span 태그는 HTML에서 인라인 요소로, 텍스트의 특정 부분을 스타일링하거나 스크립트를 적용하는 데 매우 유용합니다. span 태그를 올바르게 사용하면 더 나은 사용자 경험과 효율적인 코드 관리를 할 수 있습니다.

div 태그📦

div 태그란?

div 태그는 HTML에서 블록 요소로 사용됩니다. 이 태그는 웹 페이지의 큰 섹션을 나누거나 그룹화하는 데 사용됩니다. div 태그는 자체적으로 아무런 의미나 스타일을 가지고 있지 않으며, 주로 스타일링과 레이아웃을 정의하기 위해 사용됩니다.

div 태그 용도

레이아웃 구성, 스타일링을 위해 CSS와 함께 자주 사용

div 태그 주요 특징

블록 요소: div 태그는 항상 새로운 줄에서 시작하며, 기본적으로 부모 요소의 전체 너비를 차지합니다.
구조화: 여러 요소를 그룹화하여 페이지의 구조를 정의하는 데 사용됩니다..
스타일 적용: CSS를 사용하여 레이아웃과 스타일을 지정할 수 있습니다..
스크립트 적용: 자바스크립트를 사용하여 특정 동작이나 이벤트를 적용할 수 있습니다.

div 태그 사용 예제

다음은 div 태그를 사용하여 웹 페이지의 구조를 구성하는 예제입니다.

예제 1: 간단한 레이아웃

아래 예제에서 div 태그는 웹 페이지의 헤더와 콘텐츠 영역을 나누고, 각각 스타일을 적용하는 데 사용되었습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div 태그 예제</title>
    <style>
        .header {
            background-color: #f1f1f1;
            text-align: center;
            padding: 20px;
        }
        .content {
            display: flex;
            justify-content: space-around;
            padding: 20px;
        }
        .sidebar, .main {
            background-color: #e2e2e2;
            padding: 20px;
            width: 45%;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>웹 페이지 제목</h1>
        <p>웹 페이지 설명</p>
    </div>
    <div class="content">
        <div class="sidebar">
            <h2>사이드바</h2>
            <p>여기는 사이드바 내용입니다.</p>
        </div>
        <div class="main">
            <h2>메인 콘텐츠</h2>
            <p>여기는 메인 콘텐츠입니다.</p>
        </div>
    </div>
</body>
</html>

예제 2: 섹션 그룹화

이 예제에서는 div 태그를 사용하여 여러 섹션을 그룹화했습니다. 각 섹션은 개별적으로 스타일링할 수 있습니다.

<div class="container">
    <div class="section">
        <h2>섹션 1</h2>
        <p>이곳은 첫 번째 섹션입니다.</p>
    </div>
    <div class="section">
        <h2>섹션 2</h2>
        <p>이곳은 두 번째 섹션입니다.</p>
    </div>
</div>

스타일링 및 자바스크립트 적용

div 태그는 주로 CSS와 함께 사용되어 레이아웃을 구성하고 스타일을 지정합니다. 또한, 자바스크립트를 사용하여 동적 동작을 추가할 수 있습니다.

CSS 예제

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box {
    background-color: lightblue;
    width: 100px;
    height: 100px;
    margin: 10px;
    text-align: center;
    line-height: 100px;
}

HTML 예제

위 예제에서는 div 태그를 사용하여 여러 박스를 그룹화하고, Flexbox 레이아웃을 사용하여 중앙에 배치했습니다.

<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>

자바스크립트 예제

<div id="clickableDiv" style="background-color: lightgreen; padding: 20px;">
    클릭하세요
</div>

<script>
document.getElementById("clickableDiv").addEventListener("click", function() {
    alert("div가 클릭되었습니다!");
});
</script>

이 예제에서는 div 태그에 id 속성을 사용하여 자바스크립트 이벤트 리스너를 추가했습니다. "클릭하세요"라고 표시된 div를 클릭하면 알림 창이 표시됩니다.

div 태그는 HTML에서 블록 요소로, 웹 페이지의 큰 구조를 나누고 그룹화하는 데 매우 유용합니다. 스타일링과 자바스크립트를 적용하여 다양한 레이아웃과 동작을 구현할 수 있습니다. div 태그를 올바르게 사용하면 더 구조적이고 관리하기 쉬운 HTML 코드를 작성할 수 있습니다.

span과 div 태그의 차이점💕

1. 요소의 종류

span 태그	div 태그
인라인 요소 인라인 요소는 텍스트의 일부분이나 다른 인라인 요소와 같은 줄에 배치	블록 요소 블록 요소는 항상 새로운 줄에서 시작하며, 기본적으로 부모 요소의 전체 너비를 차지
기본적으로 너비와 높이를 가지지 않으며, 컨텐츠의 크기에 따라 크기가 결정	기본적으로 전체 너비를 차지하며, 다른 블록 요소와 같은 줄을 차지하지 않고, 위나 아래로 쌓이게 됨

2. 사용 목적

span 태그	div 태그
주로 텍스트의 특정 부분을 스타일링하거나 특정 동작을 부여하는 데 사용	웹 페이지의 큰 구조를 나누고 레이아웃을 구성하는 데 사용
인라인 스타일이나 자바스크립트를 적용할 때 유용	여러 요소를 그룹화하여 스타일을 적용하거나 자바스크립트로 조작할 때 유용
의미 없는 요소로, 주로 스타일링 및 스크립팅 목적으로 사용	의미 없는 요소로, 주로 레이아웃 및 그룹화 목적으로 사용

3. 레이아웃 및 스타일링

span 태그	div 태그
인라인 요소로서, 너비와 높이를 지정 불가	블록 요소로서, 너비와 높이를 지정 가능
다른 인라인 요소들과 함께 같은 줄에 배치	항상 새로운 줄에서 시작하고, 다른 블록 요소들과 함께 쌓임
주로 텍스트를 꾸미거나 특정 부분에만 스타일 적용할 때 사용	페이지의 레이아웃을 만들거나 큰 섹션을 나눌 때 사용

4. 브라우저 기본 스타일

span 태그	div 태그
브라우저의 기본 스타일에서 특별한 여백이나 패딩이 없음	블록 요소로서 기본적으로 상하 여백(margin)이 있음
다른 인라인 요소들과 동일한 기본 스타일을 가짐	부모 요소의 너비를 기본적으로 차지하며, 독립적인 블록으로 표시

이 두 태그의 차이점을 이해하고 올바르게 사용하면 더 구조적이고 유지보수가 쉬운 HTML 코드를 작성할 수 있습니다. span 태그는 주로 텍스트의 부분적인 스타일링과 스크립팅에, div 태그는 페이지의 레이아웃과 큰 섹션의 그룹화에 적합합니다.

핵심 내용👀

728x90

저작자표시 비영리 변경금지

'Mark Up > HTML' 카테고리의 다른 글

[HTML5]HTML form 완벽 가이드: form 관련 태그, 필수 속성부터 고급 활용까지 (0)	2024.05.22
[HTML5]HTML 목록 태그 ol, ul, dl 태그 (0)	2024.05.21
[HTML5]HTML A 태그와 이미지 태그 (0)	2024.05.17
[HTML5]HTML 텍스트 관련 태그 (0)	2024.05.15
[HTML5]HTML: 웹 페이지의 기반을 이루는 핵심 (0)	2024.05.13

[HTML5]HTML 공간 분할 태그 span과 div 태그

span 태그🎁

span 태그란?

span 태그 용도

span 태그 주요 특징

span 태그 사용 예제

예제1: 텍스트 강조

예제2: 클래스 사용

예제 3: 자바스크립트와 연계

스타일링 및 자바스크립트 적용

css 예제

HTML 예제

div 태그📦

div 태그란?

div 태그 용도

div 태그 주요 특징

div 태그 사용 예제

예제 1: 간단한 레이아웃

예제 2: 섹션 그룹화

스타일링 및 자바스크립트 적용

CSS 예제

HTML 예제

자바스크립트 예제

span과 div 태그의 차이점💕

1. 요소의 종류

2. 사용 목적

3. 레이아웃 및 스타일링

4. 브라우저 기본 스타일

핵심 내용👀

'Mark Up > HTML' 카테고리의 다른 글

관련글

티스토리툴바