[ CSS ] css 정의 순서 > Html

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

Html

[ CSS ] css 정의 순서

페이지 정보

작성자 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 288회 작성일 18-10-04 16:37

본문

css의 우선 순위 규칙 어떻게 될까?

기본적으로 맨뒤에 나오는 css가 우선순위가 높음.

!important > inline style attribute > id 다른 attribute > tag element 순으로 우선순위가 높다짐.

우선순위가 같으면 css가 많은 녀석의 우선순위가 높음.


!important와 inline style attribute은 실무에서 사용을 제한하는 경우가 많다. 

!important는 css 값 뒤에 붙여진 키워드를 의미하고, 인라인 스타일 속성은 태그에 주어진 style 속성 내용을 가리킨다.

이 두 가지는 최후의 수단이라고 생각하면 좋다. 따라서 나머지 id, class, tag만 살펴보도록 한다.


순위 산출 방식은 레이어로 보면된다.

id가 1번 레이어, class같은 기타 속성이 0번 레이어, 태그 이름이 -1 이하의 레이어

id 선택자에 css가 붙어있으면 class 여러 개에 css가 붙어있어도 id 선택자가 먼저 적용된다.


우선순위가 같다면 개수로 순위가 정해진다

class 하나에 달린 css보다 class 두 개에 달린 css 우선 순위가 더 높다.


개수마저 같다면 뒤에 나오는 것이 순위가 높다. 

CSS 이름 자체가 Cascading Style Sheet이다. 

이름대로 뒤에 나오는 CSS가 앞에 나오는 CSS를 덮어씌웁니다.

 

1번째 규칙대로라면 가장 마지막에 나오는 div 태그가 적용된다.

하지만 div는 3순위이기 때문에 더 우선순위가 높은 것들이 있는지 찾아보아야 한다.

2번 규칙

!important와 인라인css가 있는지 찾아본다. 

text-decoration: line-through !important; 규칙이 !important로 되어 있고, background: yellow;가 인라인 css로 되어 있다. 

이 둘은 다른 무엇보다 먼저 적용된다.


id를 찾아본다. 

#i에 붙은 css가 적용되는데 display 속성이 두 개가 있다. 

이럴 때는 나중에 나온 display: inline-block;이 우선 순위를 가진다. 

background 속성은 인라인 css가 우선 순위를 가지기 때문에 적용되지 않는다.

class 등의 속성. 

class뿐만 아니라 name 속성도 css가 적용되어 있다. 

이때는 뒤에 나온 [name=d]가 우선순위를 가지지만, 주의해야 할 점이 .a.b가 2순위이다. 

따라서 얘네의 color: blue;가 우선순위를 가집니다. 이제 남은 것은 [name=d]의 font-style: italic;

css 우선 순위를 파악하여 기존의 css를 덮어씌울 수 있다.

css간 충돌이 발생한다면 우선순위를 조정하면 된다

추천0 비추천0

댓글목록

등록된 댓글이 없습니다.

Total 61건 1 페이지
Html 목록
번호 제목 글쓴이 조회 추천 비추천 날짜
61 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 232 0 0 04-25
60 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 355 0 0 11-27
59 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 603 0 0 11-27
58 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 451 0 0 11-23
57 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 344 0 0 11-23
56 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 966 0 0 11-02
55 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 438 0 0 10-30
54 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 637 0 0 10-24
53 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 481 0 0 10-23
52 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 504 0 0 10-23
51 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 576 0 0 10-23
50 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 529 0 0 10-23
49 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 444 0 0 10-15
48 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 413 0 0 10-15
열람중 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 289 0 0 10-04
게시물 검색

회원로그인

접속자집계

오늘
56
어제
184
최대
283
전체
45,878

그누보드5
Copyright © funyphp.com. All rights reserved.