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

본문 바로가기
사이트 내 전체검색

기술자료

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

페이지 정보

댓글 0건 조회 788회 작성일 2018-03-21 19:00

본문

css 적용 우선 순위 입니다.

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

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

샘플 : http://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,275건 1 페이지
기술자료 목록
번호 제목
공지 일반   16266  2001-08-31 11:52 ~ 2017-12-05 16:33  
2274 그누보드   41  2018-09-15 08:08  
2273 PHP   63  2018-09-14 05:59  
2272 전자결제   45  2018-09-14 04:57 ~ 2018-09-14 04:58  
2271 전자결제   71  2018-09-12 14:17 ~ 2018-09-13 14:38  
2270 일반   152  2018-08-31 18:10 ~ 2018-09-14 20:50  
2269 HTML   135  2018-08-30 15:47  
2268 그누보드   162  2018-08-30 10:41 ~ 2018-08-30 10:48  
2267 PHP   136  2018-08-29 03:21 ~ 2018-08-29 17:13  
2266 JavaScript   178  2018-08-28 18:49  
2265 HTML   182  2018-08-27 14:33  
2264 HTML   243  2018-08-26 14:07  
2263 일반   155  2018-08-22 13:17  
2262 PHP   158  2018-08-20 15:51  
2261 HTML   164  2018-08-18 05:37  
2260 일반   173  2018-08-17 15:18 ~ 2018-08-17 15:19  
2259 HTML   263  2018-08-17 06:39  
2258 HTML   232  2018-08-15 05:06 ~ 2018-08-15 05:58  
2257 HTML   114  2018-08-13 18:50  
2256 HTML   187  2018-08-09 10:12 ~ 2018-08-09 13:26  
게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
1,373
어제
2,605
최대
3,174
전체
4,264,438

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.