CSS 실습하기, id와 class의 차이점은 무엇일까?

혼자서 웹 사이트만들기를 제작하면서 CSS에서 굉장히 애를 많이먹었다. 그냥 이쁜 템플릿 구해서 만들껄... 

이미 혼자서 모든 것을 만들기로 한 이상 모르는 것을 찾아보면서 하고 있는데, 제대로 이해하지 못하고 사용하던

id와 class의 차이에 대해서 정리해보려고 한다.

 

id 및 class는 해당 틀(div, input 등..)의 css스타일 변경 등을 css파일에서 작성할 때 불러오는 이름이다.

 

먼저 테스트 페이지를 만들어보았다.

단순히 div블록만 두 개를 생성한 모습

div는 박스형태로 공간을 분리할 때 사용하는 키워드로, 기본 default값이 테두리가 투명한 색이므로 구분하기 쉽도록 테두리에 값을 넣어주었다.

border : 테두리, 1px굵기로 solid형태의 검은색 선을 생성한다.

div 자체 태그를 설정하면 앞으로 본 페이지에서 생성하는 div박스의 기본 값이 좌측의 코드로 설정되는 것이다!

 

위의 설정대로 실행한 모습.

위 실행화면에서, 두 박스가 화면의 끝까지 이어져있고 박스가 서로 겹쳐 가운데 줄이 진하게 표현되었다.

먼저 이 둘을 구분하기 위해 공간을 주어보자.

 

width : 가로줄의 의미이며, 110px의 크기만큼 할당해주었다.

margin : div박스의 겉 테두리 빈 공간을 설정해준다.

10px 5px 이러한 방식으로 두 개로 나누어 입력하면 상하 / 좌우로 나뉘어 인식하며, 1px 2px 3px 4px 이러한 방식으로 네 개로 나누어 입력하면

상 / 우 / 하 / 좌의 형태로 나뉘어 각각을 설정할 수 있다. 굉장히 별거 아닌거 같지만 유용하게 사용하고 있고, 내가 많이 부족해서 그런지 자꾸 상우하좌를 헷갈린다... 언제 외워질까...

 

위의 설정대로 하였을 때 나오는 모습이다. 두 박스가 나뉘어 나옴을 알 수 있다.

html 코드를 살펴보면, 두 div가 각각 test1, test2라는 이름으로 id와 class를 가지고 있는 것을 볼 수 있다. 이제 이 두 식별값을 통해 둘의 디자인을 변경해보려 한다.

 

id로 식별한 test1은 css 설정시 #아이디값 의 형태로 코딩해야하며, class로 식별한 test2는 .클래스명 의 형태로 만들어주어야 한다.

두 개의 div 테두리를 각각 빨강, 파랑으로 바꾸어주었다.

 

 

 

 

변경된 모습이다. 두 div모두 본인이 설정한 대로 빨간색, 파란색 테두리를 가지게 되었다.

 

 

이 때 가지게 되었던 의문은, class와 id의 차이가 무엇일까? 둘 다 설정을 바꿀 수 있으며 동일하게 적용되는데 어떤 때에 따라서 나뉘어서 사용해야되는 걸까?

결론부터 말하자면, 두 개는 우선순위의 차이였다.

 

차이를 실습해보자.

먼저 식별을 쉽게하기 위해서 두 div의 id와 class의 이름을 변경하고 설정해주었다.

 

 

 

이번에는 테두리가 아닌 backgroud-color를 통해 배경색을 변경해보았다. background-color의 기본 default값은 투명이며, id와 class 간의 차이를 알아보기 위해 두 div의 id에는 배경색을 회색으로 변경하는 코드를 작성하였고, class에는 배경색을 하늘색으로 변경하는 코드를 작성하였다.

 

과연 결과는 어떻게 나올까?

 

 

결과 화면이다. 우선순위의 차이를 알겠는가?

해당 배경색은 id값을 통해 설정해준 회색이 나오게 되었다.

 

 

따라서 결론으로, id와 class 식별자 모두 해당 css를 변경해주는 식별값이며, 두 차이는 우선순위의 차이를 가지고 있으며 id의 우선순위가 class보다 높다는 것이다.

추가적으로, 기본 default값을 설정하는 태그(tag)는 위 두 식별자보다 우선순위가 낮다.

최종 우선순위는 태그 < class < id 인 것이다.