CSS / Tutorial / !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를 다시 붙입니다. 예를 들어 다음은 문단의 글자색을 녹색으로 만듭니다.
p {
color: red !important;
}
p {
color: blue;
}
p {
color: green !important;
}
문법 CSS 문법은 선택자(selector), 속성(property), 값(value)의 조합으로 구성됩니다. 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값입니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 태그, 클래스, ID 등 다양한 선택자가 있습니다. 속성(property) : 어떤 모양을 꾸밀지 정한다. color는 색을 꾸미겠다는 ...
CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법
다음과 같은 인용문(blockquote)을 꾸미는 몇 가지 예제입니다. <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p> </blockquote> 예제 1 blockquote { border: 1px solid #27a9e3; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; border-left: 10px solid #27a9e3; } 예제 2 blockquote:before { ...
CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다. 다음은 placeholder 속성이 있는 꾸미기 전의 input과 textarea입니다. <!doctype html> <html lang="ko"> ...
CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다. property: value !important; 예를 들어 다음은, 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다. p { color: red; } p { ...