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 강좌 / position의 값이 fixed일 때 가운데 정렬하는 방법
position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다.
CSS 강좌 / 유튜브 동영상을 반응형으로 삽입하는 방법
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있습니다. 아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다. 이를 반응형으로 만들고 싶다면 아래처럼 합니다.
CSS 강좌 / display와 기본 배치 흐름 이해하기
block·inline·inline-block의 줄바꿈과 크기 적용을 같은 요소로 비교합니다. display: none과 visibility: hidden의 공간 차이, 인라인 이미지의 크기 예외를 실행하며 확인합니다.
CSS 강좌 / 글꼴, 글자 크기, 굵기, 줄 간격 설정하기
글꼴·글자 크기·굵기·줄 간격을 설정하고 실제 사용된 글꼴을 확인하는 방법을 설명합니다. 단위 없는 line-height와 em 값의 상속 차이를 실행 가능한 예제로 비교합니다.
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.
CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법
이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.
CSS 강좌 / 상속·우선순위·캐스케이드로 최종 스타일 결정하기
상속과 직접 지정의 차이부터 중요도·선택자 우선순위·작성 순서까지 단계별로 판단합니다. 같은 문단의 색상·여백·테두리를 예측하는 전체 예제와 !important·인라인 스타일의 비교 실습을 제공합니다.
Grid의 격자선·트랙·셀과 fr 단위를 이해하고 명시적 행, 자동 행, 열을 가로지르는 배치를 전체 예제로 익힙니다. 긴 콘텐츠와 모바일에서 생기는 넘침도 비교합니다.
CSS 강좌 / 모바일·큰 화면·확대 보기에서 레이아웃 점검하기
점검용 페이지에서 화면 폭, 확대, 긴 문자열과 키보드 조작을 확인합니다. 가로 넘침과 글자 잘림을 재현하고 원인 확인부터 수정·재점검까지 실습합니다.
테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.