'CLASS'에 해당되는 글 1건

id, class 차이점

컴퓨터/HTML 2017. 5. 27. 10:29


일반적인 웹에서 이야기 하는 차이점 : 
class 는 여러개를 사용할 수 있지만, id는 고유성을 가지므로 한 문서에 한번만 사용할 수 있다.

(그냥 모든걸 class 로 정의한고 정의된 class 에 따라서 한번만 사용하던지 여러번 사용하던지 하면 안되나? 뭘 귀찬게 시리 id를 따로 정의해서 한번만 사용해야 하나?)



정의 방법에 따른 차이 : 


id = #을 이용해서 정의 한다.


<style type="text/css">

#content_id

{

color : blue;

border : 1px solid red;

font-size : 50pt;

}

</style>


class = .을 이해용서 정의 한다.


<style type="text/css">

.content_class

{

color : red;

font-size : 30pt;

}

</style>


우선 순위에 따른 차이 :

id 와 class 를 동시에 사용시 id가 우선 적용되고 class 는 무시된다. - 중복 속성이 있을 경우


<head>

</head>

<body>

<style type="text/css">

#content_id

{

color : blue;

border : 1px solid red;

font-size : 50pt;

}

.content_class

{

color : red;

font-size : 30pt;

}

</style>

<span id="content_id" class="content_class">차이점</span>

</body>





출력해서 보면 붉은색 테두리, 파란색, 50폰트의 크기를 가진 "차이점" 이라는 글자가 출력 된다. (중복되는 class 속성은 무시됨)



그외로..

하나의 요소에 여러개의 class 를 적용할 수 있다.

<span class="abc def ghi">foo</span>

class 3개 적용 abc, def, ghi



결론

class 는 공통적인 성격을 가지는 요소에 적용 - 가령 폰트, 폰트 크기, 폰트 색갈 등등

id 는 개별적인 성격을 가지는 요소에 적용 - 메뉴창의 크기, 위치 등등


블로그 이미지

mathslove

여러가지 잡다한 이야기

,