728x90 300x250 Front-end/CSS63 css 변경 안됨 ( 명시도가 높은 규칙 재정의 하기) 만약 css를 분명히 정의를 했는데 변경이 안된다면 명시도가 높은 코드에 재정의가 제대로 되지 않아서 일 수도 있다. 명시도 높은 코드 재정의 방법 #someElement p { color: blue; } p.awesome { color: red; } 예를 들어 위의 코드를 실행해 보면 #someElement 안에 있는 p.awesome 태그라면 빨간색 color 값은 실행되지 않는다. id + 태그 조합의 위 쪽 코드가 명시도가 더 높기 때문이다. 이럴 경우 #someElement 안에 있더라도 p.awsome의 css를 재정의 할 방법은 없을까? 명시도가 높은 규칙 재정의 하기 1) !important 사용하기 p.awesome { color: red !important; } !important를 사.. 2022. 5. 5. css in-range, out-of-range :in-range 입력 요소의 value 값이 min과 max 속성 설정 범위 안에 있는 경우 선택자로 사용 된다. :out-of-range :in-range와 반대개념 value 값이 min과 max 속성 설정 범위에 속하지 않는 경우 선택자로 사용 된다. See the Pen in-range by kim oya (@ttuttu) on CodePen. 참고 : http://www.devdic.com/css/refer/cssselector/css-selector:737/:in-range 2022. 5. 4. 필수 입력이 아닌 input, select, textares 요소 선택 :optional :optional input, select, textarea 요소 중에서 필수 입력인 required가 설정 되지 않은 요소 선택자로 사용 See the Pen :optional by kim oya (@ttuttu) on CodePen. 지원 브라우저 참고 https://developer.mozilla.org/en-US/docs/Web/CSS/:optional http://www.devdic.com/css/refer/cssselector/css-selector:751/:optional 2022. 5. 3. css 명시도란? + 명시도(Specificity) 계산하기 CSS 명시도란? 우선 mdn사이트에서 정의한 명시도에 관한 설명을 확인해 보자 설명이 좀 어려운듯 그러니까 명시도란 css선택자가 해당 요소를 얼마나 구체적으로 표현하느냐에 따라 점수를 매겨 숫자가 높을 수록 우선순위가 높아지며 가장 명시도가 높은 속성이 해당 요소에 적용된다. 명시도 계산방법 명시도는 주어진 CSS 선언에 적용되는 가중치(weight)로, 일치하는 선택자 내 각 선택자 유형의 수에 의해 결정된다. 여러 선언의 명시도가 같은 경우 css 맨끝에 선언이 요소에 적용된다. css 선택자의 우선순위 선택자 적용 예시 선택자 우선 순위 혼용 방식의 점수 산정 !important !important; 속성 기준 가장 우선 속성 기준 가장 우선 inline-style style="" 1 요소 기준.. 2022. 5. 1. 이전 1 2 3 4 5 6 7 ··· 16 다음 728x90 반응형