CSS 핸드북

css 의 기본 문법

선택자 { key : value } 형태.

• p { color: orange }
  p 태그에 있는 글씨색을 orange 로 바꾼다.
  
• .some-class { color: orange }
  class="some-class" 인 태그의 글씨색을 orange 로 바꾼다.
• #some-id
  id="some-id" 인 태그의 글씨색을 orange 로 바꾼다.
• span.some-class
  span 태그중에 클래스명이 some-class 인 태그에만 스타일을 적용한다.

일반적으로 id 는 unique 해야돼서, class 선택자를 많이 사용.

@ (at symbol)

css 내에서 규칙을 설정할 수 있는 문법.

@import url('something.css') 으로 외부 css 를 임포트할 수 있다. 이때 상대경로, 절대경로 둘다 가능하고 그냥 패키지명을 입력해도 괜찮다.

@charset 'utf-8' 으로 문자 인코딩 지정이 가능하다.

@media (prefers-color-scheme: dark) {
	body {
	background: #000;
    	color: #fff;
  	}
} 

을 통해 다크모드 지원이 가능하다.

css 적용순위

1. inline 스타일
2. external css file or internal css
3. browser default

2번의 경우, link 태그와 style 태그의 순서에 따라 다르다.

link 태그에서는 글씨색을 navy 로, internal style 태그에서는 orange 로 설정해 놓았을 경우

<link />
<style>
	...
</style>

이 경우 글씨색은 orange가 된다. 반대의 경우-link 태그가 아래에 있는 경우 글씨색은 navy가 된다.

주석처리

/* */

자주 쓰이는 선택자에 대해서는 나무위키에 잘 정리가 되어있다

https://namu.wiki/w/선택자

나무위키를 레퍼런스 링크로 쓰면 글의 신뢰도가 바닥으로 치닫긴 하다만...