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
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
댓글목록
등록된 댓글이 없습니다.