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

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

기술자료

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

페이지 정보

댓글 0건 조회 339회 작성일 18-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,204건 1 페이지
기술자료 목록
번호 제목
공지 일반
온라인 강좌를 소개합니다. ( update. 2017-12-05 16:33 ) Hit.15831
2203 그누보드
2202 그누보드
2201 영카트
2200 영카트
2199 영카트
영카트 5.3 에서 삭제된 영카트 4.x 필드 ( update. 2018-04-02 14:02 ) Hit.260
2198 그누보드
그누보드 5.3 에서 삭제된 그누보드 4.x 필드 ( update. 2018-04-03 15:22 ) Hit.263
2197 영카트
2196 HTML
웹브라우저 언어설정 코드 ( write. 2018-03-28 ) Hit.312
2195 ClassicASP
2194 그누보드
열람중 HTML
2192 전자결제
[LG유플러스] [ASP] utf-8 사용하기 ( update. 2018-03-16 06:06 ) Hit.434
2191 ClassicASP
한글 깨짐 변환 ( update. 2018-03-16 04:56 ) Hit.415
2190 JavaScript
새로고침(F5) 금지 ( write. 2018-03-15 ) Hit.432
2189 그누보드
[G4] 스팸게시글 한방에 삭제하기 ( update. 2018-03-23 15:54 ) Hit.464
2188 전자결제
[LG유플러스] [ASP] 오류 해결하기 ( update. 2018-03-16 04:57 ) Hit.507
2187 ClassicASP
2186 HTML
2185 그누보드
[G4/G5] 현재 접속자 환경설정과 연동하기 ( update. 2018-03-02 09:32 ) Hit.632
2184 HTML
2183 일반
FileZilla 마스터 비밀번호 설정하기 ( update. 2018-02-25 03:34 ) Hit.775
2182 호스팅
[트리포드] 호스팅 연장하기 ( write. 2018-02-23 ) Hit.665
2181 ClassicASP
페이스북 등 SNS 글 퍼가기 소스 ( write. 2018-02-23 ) Hit.695
2180 PHP
MySQL(MariaDB) 테이블 만들기 ( write. 2018-02-22 ) Hit.764
게시물 검색

회원로그인

접속자집계

오늘
411
어제
3,111
최대
3,111
전체
3,932,509

회사명: 해피정닷컴   전화: 070-7600-3500   팩스: 02-865-3528
주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
사업자번호: 119-05-36414   대표: 정창용   개인정보보호책임자: 정창용
Copyright 2001-2018 해피정닷컴. All Rights Reserved.