Vue CSS 적용 순서 - Vue CSS jeog-yong sunseo

Question

반응형

목차 Show

1. CSS 우선순위
2. 실제 적용
3. 동일한 우선순위일 때

문서에 CSS를 적용한 후에 화면을 확인했을 때

내가 원하던 화면이 나오지 않은 경우가 있다.

<head>
   <style>
       section .dtl p{color:blue}
       .txt{color:red}
   </style>
</head>
<body>
   <section>
      <div class="dtl">
         <p>Test Text01</p>
         <p class="txt">Test Text02</p>
      </div>
   </section>
</body>

예를 들어 위의 소스와 같이

section 영역 아래 .dtl 태그 자식요소로 있는 p 태그에 공통으로 파란색 컬러값을 주고

css를 조금 더 깔끔하게 쓰기 위해 다른 색상을 주고 싶은 p태그에 .txt 클래스를 준 뒤

.txt클래스에 빨간색 컬러값을 주면 출력되는 화면은

위의 화면과 같이 "Test Test01"과 "Test Test02" 둘 다 파란색의 컬러값이 출력이 될 것이다.

분명 원하던 색상은 "Test Test02" 영역이 빨간색으로 출력이 되어야 하지만 그렇게 되지 않았다.

이러한 문제는 css의 우선순위에 대해 고려를 하지 않아 생긴 문제이다.

1. CSS 우선순위

위의 예제를 보면 분명 .txt라는 클래스를 사용해서 p태그에 특정 색상을 적용했지만

적용되지 않았다.

그 이유는 .txt 값 이전에 .section .dtl p의 스타일 값 때문이다.

즉, .section .dtl p 에 적용된 스타일이 더 우선순위가 높기 때문이다.

★ css 우선순위 적용되는 스타일 (1 ~7 순위)
1. !important
2. <div style=""> (인라인 스타일)
3. id (아이디값)
4. class (클래스)
5. :pseudo-class (가상 선택자)
6. tag (일반 태그)
7. * (전체 선택자)

* css의 우선순위표 (css를 입력하는 상황에 따라 점수로 계산을 한다.)

1점10점100점총점!important무조건 1등#content (아이디값)00100100.section (클래스)010010:fisrt-child (가상선택자)010010p (태그)1001p#content (아이디 + 태그)10100101#content.section (아이디 + 클래스)010100110p.section (클래스 + 태그)110011#content .section (아이디 + 클래스)010100110ul li a (태그 + 태그 + 태그)3003p:last-child (가상선택자 + 태그)110011* (전체 선택자)0000

2. 실제 적용

아까 맨위에서 적용했던 "Test Text01", "Test Text02" 영역의 컬러값 적용 문제는

위의 CSS 우선순위 영역으로 확인해볼 때

section .dtl p{color:blue}  /* 클래스1 + 태그2 = 12점 */
.txt{color:red} /* 클래스1 = 10점 */

위와 같이 우선순위상 "Test Text02"의 색상값이 적용되는 p태그는 10점의 점수로

section .dtl p 영역의 스타일 값에 적용된 우선순위에서 밀리기 되므로

color:red 스타일이 적용이 되지 않았다.

이를 해결하기 위해서는 .txt에 적용한 스타일의 우선순위를 높여주거나

.section .dtl p에 적용된 우선순위를 낮추는 방법이 있겠다.

section p{color:blue}   /* 태그2 = 2점 */
.txt{color:red}   /* 클래스1 = 10점 */

3. 동일한 우선순위일 때

클래스나 태그 등 동일한 우선순위의 점수를 가지고 있는 경우엔

더 뒤쪽에 스타일이 작성된 스타일이 적용되게 된다.

<head>
   <style>
       section .dtl p{color:blue}  /* 클래스1 + 태그2 = 12점 */
       .section div p{color:red}   /* 클래스1 + 태그2 = 12점 */
   </style>
</head>
<body>
   <section class="section">
      <div class="dtl">
         <p>Test Text01</p>
         <p>Test Text02</p>
      </div>
   </section>
</body>

(더 아래쪽에 적용한 스타일인 color:red가 적용되었다.)

반응형

게시글 관리

구독하기About Web

저작자표시

카카오스토리
트위터
페이스북

'Frontend > CSS' 카테고리의 다른 글

[css 속성] display (block, inline, inline-block, table) (0)2020.03.06가상 클래스 vs 가상 요소 (0)2020.03.06CSS 적용을 위한 또 다른 방법, @import (0)2020.03.03CSS Reset (초기화) (0)2020.02.19CSS 적용을 위한 3가지 방법 (0)2020.02.18

적용 우선순위
스타일속성 > id 선택자 > class 선택자 > 태그 선택자

(예제)

// 전체코드

<template>
  <div id="a" class="b" style="color:red">
    적용 우선순위 확인
  </div>
</template>

<script>

export default {

}
</script>

<style scoped>
  .b{
    color:orange;
  }
  #a{
    color:blue;
  }
  div{
    color:green
  }
</style>

// 스타일속성

  <div id="a" class="b" style="color:red">
    적용 우선순위 확인
  </div>

  // id 선택자
  
  <div id="a" class="b">
    적용 우선순위 확인
  </div>

// class 선택자
 
  <div class="b">
    적용 우선순위 확인
  </div>

// tag 선택자

  <div>
    적용 우선순위 확인
  </div>

게시글 관리

구독하기꾸준2

'CSS' 카테고리의 다른 글

[CSS] transition (0)2020.04.07[CSS] background (0)2020.04.07[CSS] flex (0)2020.04.06[CSS] position (0)2020.04.03[CSS] inline vs block (0)2020.03.31

Vue css 수정 Vuetify css 적용 vue.js css 파일 Css vuejs Vue input CSS Vue data-v Vue v-html css Vue 토글

Vue CSS 적용 순서 - Vue CSS jeog-yong sunseo

1. CSS 우선순위

2. 실제 적용

3. 동일한 우선순위일 때

'Frontend > CSS' 카테고리의 다른 글

'CSS' 카테고리의 다른 글

관련 게시물

CSS 로딩 스피너 - CSS loding seupineo

OpenGL 눈 내리기 - OpenGL nun naeligi

프론트엔드 포트폴리오 GitHub - peulonteuendeu poteupollio GitHub

VRChat 헤어 바꾸기 - VRChat heeo bakkugi

모달창 스크롤 막기 - modalchang seukeulol maggi

Roll20 글씨 효과 - Roll20 geulssi hyogwa

CSS 다크 모드 무시 - CSS dakeu modeu musi

라디오 버튼 수정 - ladio beoteun sujeong

로아 커마적용 안됨 - loa keomajeog-yong andoem

포토샵 텍스트 박스 수정 - potosyab tegseuteu bagseu sujeong

광고하는

최근 소식

Lg 클립보드 복구 - lg keullibbodeu boggu

세 레비 잡는 법 - se lebi jabneun beob

마세라티 콰트로포르테 풀체인지 - maselati kwateulopoleute pulcheinji

브라질리언 레이저 제모 병원 추천 - beulajillieon leijeo jemo byeong-won chucheon

딸기 씨 키우기 - ttalgi ssi kiugi

스타듀밸리 마우스 오류 - seutadyubaelli mauseu olyu

마우스 자동클릭 설정 - mauseu jadongkeullig seoljeong

갤럭시 A31 단점 - gaelleogsi A31 danjeom

실비 키우기 pc 다운로드 - silbi kiugi pc daunlodeu

식단 조절 없이 근력 운동 - sigdan jojeol eobs-i geunlyeog undong

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의