[CSS] CSS 기본
참고 문서
개요
CSS(Cascading Sytle Sheet) 기본 사용법 정리.
용어
@charset "utf-8";
h1 {
font-size: 37.2px;
border-bottom: 3px solid black;
}
@charset처럼 @로 시작하는 선언은 at-rule 이라 부른다. h1은 셀렉터, font-size, border-bottom은 프로퍼티다.
스타일 적용하기
inline
HTML 태그의 style 속성을 사용하여 직접 지정한다.
<div style="color:red;">여기는 적색으로 나타난다.</div>
embedded(internal)
스타일 시트의 기본적인 사용 방법으로 html의 <head></head> 사이에 삽입하여 <style type="text/css"><style> 사이에 정의한다. 또한 같은 스타일을 중복해서 지정 했을 때는 나중에 지정 한 것이 적용된다.
<style type="css/text" [media="값"]>....</style>
MEDIA: Style Sheet가 적용되어야하는 매체를 지정한다. 가능한 값은 다음과 같다.print: 프린터 출력인 경우screen: 화면 출력인 경우projection: 프로젝터 출력인 경우braille: 점자출력 장치로 출력하는 경우aural: 음성 출력인 경우all: 모든 매체를 통한 출력인 경우(내정치)
<style type="text/css">
p {background: yellow; color: black}
</style>
Linked(external)
<head> </head> 사이에 Link Element 를 사용하여 CSS file(확장자가 .css 인 파일)을 연결 시켜서 사용하는 방식이다.
<link rel="stylesheet" href="http://tistory.com/address.css" type="text/css"/>
Imported
이 방식은 결과적으로 Linked와 같다.
@import url("파일명");
또는
@import "파일명";
우선순위(specificity, cascading order)
우선순위(혹은 명시도, 우선권)를 결정하는 요소는 여러가지가 있다. 크게 보면 !important가 가장 우선 적용되고 나머지는 선언 방식이나 얼마나 구체적으로 셀렉터를 작성했느냐에 따라 달라진다. 만약 우선순위가 동일한 경우 나중에 불러온 스타일이 적용된다.
자세한 내용은 여기를 볼 것.
스타일 선언 방식에 따른 우선순위
- Inline
- Embedded
- Linked
- Imported
!important
스타일 적용 최우선순위를 알리는 예외 규칙이다. 심지어 인라인 스타일보다 우선 적용된다.
table tr td {
text-align: left !important;
}
.foo[style*="color: red"] {
color: firebrick !important;
}
그런데 이걸로 해결하는 것은 좋지 않은 습관이니 자중하라고…
상속
- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
- https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
자식 엘리먼트가 부모 엘리먼트의 CSS 프로퍼티 값을 그대로 사용하는 것을 말함.
모든 프로퍼티가 상속되는 것은 아님. (e.g., width: 50%)
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
상속 제어
CSS는 상속을 제어하기 위한 특수 범용 프로퍼티 값(special universal property values)을 제공한다. 모든 CSS 프로퍼티에서 유효하다.
auto: 브라우저가 알아서 결정inherit: 부모 엘리먼트의 프로퍼티 값과 동일하게 설정initial: 브라우저의 기본 스타일 시트 값으로 설정한다. TODO testunset: 상속되거나 그렇지 않으면 브라우저 기본값으로 설정한다. (이런 걸 natural 값이라고 하는듯?)revert: TODOrevert-layer: TODO