CSS 강좌 / !important

CSS 강좌

개요

CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다.

이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.

property: value !important;

예를 들어 다음은, 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다.

p {
  color: red;
}
p {
  color: blue;
}

하지만 다음은 red에 !important가 있으므로 문단의 글자색을 빨간색으로 유지합니다.

p {
  color: red !important;
}
p {
  color: blue;
}

속성값을 재설정하고 싶으면 !important를 다시 붙입니다. 마지막으로 !important가 있는 값이 적용됩니다. 예를 들어 다음은 문단의 글자색을 녹색으로 만듭니다.

p {
  color: red !important;
}
p {
  color: blue;
}
p {
  color: green !important;
}

CSS 강좌

Grid의 격자선·트랙·셀과 fr 단위를 이해하고 명시적 행, 자동 행, 열을 가로지르는 배치를 전체 예제로 익힙니다. 긴 콘텐츠와 모바일에서 생기는 넘침도 비교합니다.

같은 카드가 본문과 사이드바의 폭에 맞춰 배치를 바꾸도록 컨테이너 쿼리를 적용합니다. 중첩 컨테이너와 이름 선택, 조건이 적용되지 않는 원인도 살펴봅니다.

z-index의 적용 조건과 부모 쌓임 맥락을 실제로 겹치는 예제로 이해합니다. 자식과 부모의 숫자 변경을 비교하고, overflow 잘림과 겹침 순서를 구분해 문제를 해결합니다.

본문의 최대 폭, min()·clamp(), 카드와 이미지의 유동 크기를 비교합니다. 전체 예제와 긴 문자열 실습으로 좁은 공간에서도 내용을 유지하는 방법을 배웁니다.

실습용 이미지를 내려받아 배경색과 배경 이미지 경로를 설정합니다. cover·contain의 잘림과 빈 공간, 반복과 위치를 비교하고 배경이 안 보일 때의 확인 순서를 설명합니다.

링크의 기본 밑줄과 방문·호버·활성 상태를 설정하고 키보드 포커스를 표시합니다. 두 파일로 방문 이력과 Tab·Enter 동작을 확인하며 상태 규칙이 겹칠 때의 결과를 설명합니다.

Flexbox의 아이템 정렬과 여러 줄 정렬을 구분하고, gap·줄바꿈·grow·shrink·basis를 비교 예제로 익힙니다. 긴 문자열이 넘치는 원인과 크기·줄바꿈의 해결 방법도 다룹니다.

표의 자동·고정 레이아웃, 30:70 열 너비, 긴 문자열의 영향을 같은 데이터로 비교합니다. 모바일 가로 스크롤과 키보드 이동을 확인하고 말줄임 원문을 보존하는 방법을 설명합니다.

테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.

카드의 최소 폭과 여백을 기준으로 미디어 쿼리 분기점을 정합니다. 1·2·3열 전체 예제와 경계값 비교로 조건이 적용되는 과정을 확인합니다.