CSS 강좌 / !important
개요
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 강좌 / 큰 스타일시트 정리하기: 파일 구성·중첩·레이어
역할별 CSS 파일 연결과 네이티브 중첩, 캐스케이드 레이어를 실행 가능한 작은 프로젝트로 익힙니다. 선택자 충돌을 비교하고 원래 설정으로 복원하는 실습을 제공합니다.
CSS의 선택자·선언·구분 기호·주석을 예제로 설명합니다. 잘못된 속성값과 세미콜론 누락을 비교하고, 실행 가능한 예제와 오류 수정 실습으로 브라우저가 적용한 결과를 확인합니다.
CSS 강좌 / 유튜브 동영상을 반응형으로 삽입하는 방법
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있습니다. 아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다. 이를 반응형으로 만들고 싶다면 아래처럼 합니다.
링크의 기본 밑줄과 방문·호버·활성 상태를 설정하고 키보드 포커스를 표시합니다. 두 파일로 방문 이력과 Tab·Enter 동작을 확인하며 상태 규칙이 겹칠 때의 결과를 설명합니다.
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.
CSS 강좌 / position의 relative·absolute·fixed·sticky 차이
relative·absolute·fixed·sticky의 공간 유지, 위치 기준과 스크롤 차이를 비교합니다. 배지와 고정 버튼, 붙는 제목 예제를 실행하며 기준 부모와 동작하지 않는 원인을 확인합니다.
폼의 필수·유효성·비활성·읽기 전용 상태와 키보드 초점을 구분합니다. 실제 제출 항목을 확인하고 작은 화면·큰 글자에 대응하는 전체 예제를 제공합니다.
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.
CSS 강좌 / 컨테이너 쿼리로 구성 요소 너비에 맞춰 꾸미기
같은 카드가 본문과 사이드바의 폭에 맞춰 배치를 바꾸도록 컨테이너 쿼리를 적용합니다. 중첩 컨테이너와 이름 선택, 조건이 적용되지 않는 원인도 살펴봅니다.
CSS 강좌 / 관계 선택자와 가상 클래스로 요소 고르기
자손·자식·인접 형제·일반 형제 선택자를 같은 문서 구조에서 비교합니다. hover·focus-visible·first-child·nth-child를 포함한 전체 예제와 구조를 바꿔 선택 결과를 확인하는 실습을 제공합니다.