본문

스타일의 시작, DIV 태그 - HTML 강좌



HTML 에 대해 정말 바닥부터 시원하게 설명을 듣고 싶으시다구요? http://donghoon.me/23 를 확인해 보세요!


이번 시간에는 HTML 에서 <DIV> 태그의 역할에 대해 알아보도록 하겠습니다.


<DIV> 태그


<DIV> 태그는 사이트에서 가장 많이 사용되는 태그라고 해도 과언이 아닙니다. 사이트의 거의 모든 구조는 <DIV> 로 구성되어 있는데요. 사이트에서 요소의 테두리 역할을 하는 것 입니다. 설명이 어려우시다면 아래의 사진을 참고하세요.



<DIV> 태그는 사실, 그 태그 안에 들어있는 모든 요소와, <DIV> 자신에게 스타일 (꾸미기) 을 주기 위해 사용됩니다. 아래와 같이 코드를 작성하고, CSS 를 통해 클래스마다 색상을 주는 것이죠. (색상 외에 다른 스타일 옵션도 가능합니다.)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <!-- 이 곳에는 사이트의 설정 등의 코드가 담기는 부분 입니다. -->
    </head>
    <body>
        <div class="colorRed">
                <p>A: 여기에는 빨간색 글씨만 있어요.</p>
                <p>B: 네, 맞아요.</p>
            </div>
        <div class="colorYellow">
                <p>A: 여기에는 빨간색 글씨만 있어요.</p>
                <p>B: 네, 맞아요.</p>
            </div>
        <div class="colorBlue">
                <p>A: 여기에는 빨간색 글씨만 있어요.</p>
                <p>B: 네, 맞아요.</p>
            </div>
    </body>
</html>
cs


colorRed 와 같은 클래스를 사용한다고 색상이 적용되는 것은 절대 아닙니다. CSS 를 이용해 스타일을 줘야 하는데요, 그 부분에 대해서는 나중에 CSS 강좌를 통해 다뤄보도록 하겠습니다.


공유

댓글 0