Front End 개발/HTML + CSS2 [CSS] Defensive CSS, 자주 사용하는 팁 모음 Defensive CSS CSS에서 종종 발생하는 문제로부터 보호되는 CSS를 작성하는 데 도움이 되는 스니펫 콜렉션 CSS에서 꽤나 자주 마주치는 상황들이 있다. 예를 들어 글자가 박스에서 튀어나온다던지 이미지 비율이 깨진다던지 그런 상황들에 대해서 대처하는 CSS 스니펫을 모아 정리해둔 글이 있길래 공부할 겸 해당 글 + 추가 팁들을 정리해보았다. Defensive CSS - Ahmad Shadeed A list of defensive CSS techniques to avoid potential future issues ishadeed.com 1. Flexbox 감싸기 Flexbox Wrapping display 속성을 flex로 설정했을 때 flex로 설정한 wrapper 크기가 내부 콘텐츠보다 작.. 2022. 2. 3. [CSS] 선택자(selector) 우선순위, 명시도(specificity), !important 보통 하나의 요소(element)에는 여러 스타일 속성이 설정되어 있는 경우가 많다. 브라우저는 그렇게 설정된 속성들 중 어떤 속성을 우선적으로 적용할지를 계산한다. 먼저 선택자끼리 비교했을 때 우선순위가 높은 순대로 정리하자면 다음과 같다. 1. CSS 선택자 우선순위 1. !important 2. 인라인 스타일(HTML에서 직접 스타일 준 경우 style="") 3. ID 선택자(#example) 4. 클래스 선택자(.example), 속성 선택자([type="radio"]), 의사 클래스 선택자(:hover) 5. 유형 선택자(h1), 의사 요소(:before) 6. 부모 요소에 의해 상속된 속성 (선택자에 대해서 잘 모르겠다면 https://developer.mozilla.org/ko/docs/W.. 2022. 1. 26. 이전 1 다음 반응형
