티스토리 뷰

Programming/HTML

HTML #9 : <div>태그 & <span>태그

copotter 2019. 5. 1. 20:03

190424


<div>태그와 <span>태그에 대해서 알아보겠습니다.

div, span 태그

- 통용 컨테이너 태그(=엘리먼트)

- css로 꾸미기 전에는 컨텐츠나 레이아웃에 어떤 영향도 주지 않는다.


- div 태그

- 블록 엘리먼트이다.

- div나  다른 블록 엘리먼트, 인라인 엘리먼트들을 컨텐츠로 가진다.

- 여러 엘리먼트(태그)를 묶어서 스타일의 지정을 쉽도록 돕는 용도로 사용된다.

- 여러 엘리먼트(태그)를 묶어서 특정 영역으로 구분하는 용도로 사용된다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #news-section > p {color: red;}
        #weather-section p {color: green;}
        #footer-section {
            background-color: #444;
            color: white;
            padding: 14px;
        }
    </style>
</head>
<body>
    <h1>div 태그 사용하기</h1>
    
    <div id="content-section">
        <div id="news-section">
            <h2>뉴스 속보</h2>
            <p>이벤트 응모에 당첨되었습니다.</p>
            <p>이벤트에 아쉽게 탈락했습니다.</p>
            <div>
                <p>p태그안에있는 p</p>
            </div>
        </div>
 
        <div id="weather-section">
            <h2>날씨 정보</h2>
            <p>비가 오겠습니다.</p>
            <p>기온이 많이 떨어지겠습니다.</p>
        </div>
    </div>
    
    <div id="footer-section">
        <h3>중앙HTA 방송국</h3>
        <p>주소 : 서울특별시 종로구</p>
        <p>전화 : 02-1234-5678</p>
    </div>
</body>
</html>
cs



>> 실행결과에서 보듯이, 여러 태그를 크게 묶어서 같은 style등을 주거나 영역을 묶고 싶을때 사용된다. 

- span 태그

- 인라인 엘리먼트이다.

- 텍스트 컨텐츠를 묶어서 스타일의 지정을 돕는 용도로 사용된다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .up {color: red;}
        .down {color: blue;}
    </style>
</head>
<body>
    <h1 id="" class="">span태그 사용하기</h1>
    
    <h2 id="">주식 현황</h2>
    <p class="" id="">셀트리온 <span class="up">+0.45%</span></p>
    <p>아시아나 공항 <span class="down">-5.97%</span></p>
    <p>에프로젠 KIC <span class="up">+12.52%</span></p>
</body>
</html>
cs


>> <span>태그는 한 태그를 style를 주거나 표현을 달리하고 싶을 때, 위와 같이 사용된다.



 div와 span태그 모두 id나 class속성을 줘서 별칭을 부여하고 style 등에서 사용할 수 있습니다.

 다음 포스팅에서 id와 class속성에 대해 다뤄보겠습니다.

저작자표시 (새창열림)

'Programming > HTML' 카테고리의 다른 글

HTML #11 : <form> 태그 & 예제  (0) 2019.05.01
HTML #10 : id & class 속성  (0) 2019.05.01
HTML #8 : Element ( 엘리먼트 )  (0) 2019.05.01
HTML #7 : 텍스트 강조 태그 (<strong>, <em>, <i>, <b> 태그)  (0) 2019.05.01
HTML #6 : <link> 태그  (0) 2019.05.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/10   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함