CSS에서 id 와 class 는 어떻게 구분해서 사용하나 > 기술자료 | 해피정닷컴

CSS에서 id 와 class 는 어떻게 구분해서 사용하나 > 기술자료

본문 바로가기

사이트 내 전체검색

CSS에서 id 와 class 는 어떻게 구분해서 사용하나 > 기술자료

HTML CSS에서 id 와 class 는 어떻게 구분해서 사용하나

페이지 정보


본문

css 적용 우선 순위 입니다.

style 과 id 와 class 가 동시에 적혀있다면 
1순위 style=""
2순위 id=""
3순위 class=""

id 가 class 보다 우선적으로 작동합니다.

샘플 : https://www.happyjung.com/demo/css/id.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ID vs. CLASS vs. style</title>
<style type="text/css">
#tid
{
    color            : blue;
    border            : 1px solid red;
    font-size:15px;
    font-weight:normal;
}
.tclass
{
    color            : red;
    font-size        : 30pt;
    font-weight:bold;
}
#tid2
{
    color            : green;
    border            : 1px solid red;
    font-size:15px;
}
</style>
</head>

<body>

<span style="color:violet; font-size:40px;" id="tid" class="tclass">style (violet 40px), id(blue 15px), class(red 30px)  동시 사용</span><br>
<br>

<span id="tid" class="tclass">id(blue 15px), class(red 30px)</span><br>
<br>

<span id="tid2" class="tclass">class(red 30px), id(green 15px)</span><br>
<br>

<div id="tid">
    <div class="tclass">aaaaaaaa</div>
</div>

</body>
</html>


참고자료
https://kldp.org/node/59511

댓글목록

등록된 댓글이 없습니다.


Total 2,634건 23 페이지
  • RSS
기술자료 목록
2194
영카트   8172  2018-04-11 03:20 ~ 2018-04-12 18:21  
2193
영카트   10928  2018-03-31 04:23 ~ 2018-04-02 14:02  
2192
그누보드   10432  2018-03-31 00:40 ~ 2023-11-22 23:11  
2191
영카트   9372  2018-03-30 01:42  
2190
HTML   10980  2018-03-28 20:58 ~ 2018-12-01 22:56  
2189
ClassicASP   9368  2018-03-28 18:12 ~ 2018-03-28 20:59  
2188
그누보드   10121  2018-03-24 06:53 ~ 2021-12-08 23:50  
열람
HTML   9582  2018-03-21 19:00  
2186
전자결제   10810  2018-03-16 05:51 ~ 2021-11-19 11:30  
2185
ClassicASP   9287  2018-03-16 04:51 ~ 2018-03-16 04:56  
2184
JavaScript   11952  2018-03-15 04:15  
2183
그누보드   9824  2018-03-14 02:20 ~ 2022-04-21 02:48  
2182
전자결제   23192  2018-03-12 09:45 ~ 2018-03-16 04:57  
2181
ClassicASP   11223  2018-03-12 05:29  
2180
HTML   43104  2018-03-08 19:40 ~ 2018-03-11 23:33  
2179
그누보드   9719  2018-03-02 01:45 ~ 2018-03-02 09:32  
2178
HTML   12794  2018-02-27 05:31 ~ 2018-03-16 04:39  
2177
일반   17124  2018-02-25 03:32 ~ 2018-02-25 03:34  
2176
호스팅   9664  2018-02-23 14:37  
2175
ClassicASP   9115  2018-02-23 14:08  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.