[HTML] div class와 div id 사용방법

이번 글에서는 html을 사용함에 있어서 꾸며주는 역할을 하는 css를 사용하고자 할 때 사용하는 태그인 div 태그에 대해서 다루겠으며 그 중에서 class와 id 속성의 차이점에 대해 중점적으로 다루도록 하겠습니다.

 

 

# CSS 파일

HTML 1

이 HTML문서는 CSS 파일입니다. 이 CSS 파일은 우리들 티스토리 블로그의 블로그 메뉴를 꾸며주고 있습니다. 각 요소들이 그저 문자와 링크의 집합인 HTML 정보를 아래와 같은 블로그 메뉴로 바꾸어주고 있는 것입니다.

HTML 2

 

# div id 와 div class의 차이점

  div id와 class의 차이는 중복 가능성입니다. id는 html 문서 내에서 오직 단 한번만 사용이 가능합니다. 만약에, <div id= "a">와 같이 사용하였다면 다른 위치에서 a 를 id로서 정의할 수 없어집니다. 하지만, <div class="a">고 사용했을 때에는 다른 곳에서도 a를 class로서 정의하여 사용할 수 있습니다.

 

  따라서, 블로그 메뉴나 카테고리와 같이 단 하나만 존재해야 하는 부분에 대해서는 id를 사용하고 그 외의 경우에는 class를 사용하고는 합니다. 사실상, 우리가 블로그의 구조적인 꾸밈을 수행할 때에는 대체적으로 div id를 사용합니다.

 

 

# div id와 div class 사용방법

(1) 먼저, 위의 블로그 메뉴바와 유사한 웹페이지를 만들어보며 div id의 사용방법을 다루고, 이후에 div class에 대하여 다루겠습니다.

 

(2) 아래 사진과 같은 html 파일을 구현하였습니다. 이는, 우리가 보는 블로그 메뉴바와 커다란 차이점을 가지고 있지 않은 파일입니다. 하지만, div id에 대한 정의가 이루어지지 않았기 때문에 정보만을 담고 있는 웹페이지가 되었습니다.

html 3

 

(3) css 서식을 적용하고자 하는 부분에 div id 태그를 씌워주었습니다. 그렇기 때문에 아래 사진의 우측과 같이 우리가 사용하는 블로그 메뉴바와 같은 형식이 출력되고 있습니다. 

html 4

 

여기서 id와 class의 사용방법의 차이점은 가장 앞에서 본 사진에 있습니다. 저 gnb의 앞에써져 있는 #이 . 로 바뀌면 class를 사용하는 css 문서임을 나타냅니다.

 

 

# 본문과 관련된 다른 글

[HTML] 태그 소개 <template>, <link>

https://studyforlicense.tistory.com/entry/HTML-태그-소개-template-link

[HTML] 태그 소개 <template>, <link>