CSS

cascading style sheet
cascading : 규격화된 문서를 순차적으로, 종속적으로

기본문법

tag {font-weight: 700;}

선택자 {property: value ;}

선택자 : 스타일을 적용할 대상

CSS 선언방식

인라인 스타일 시트 : 요소의 style 속성을 이용하여 작성
내부 스타일 시트 : html내부에 스타일 작성
외부스타일 시트 : .css확장자를 이용

css 선택자

기본 선택자

• 전체선택자 *
• tag 선택자
• class 선택자
• ID 선택자
• 그룹선택자 : h2, h3과 같이 콤마로 연결

복합선택자

• 일치 선택자 : 선택자.선택자
• 자식 선택자 : 선택자 > 선택자
• 하위(후손) 선택자 : 선택자 선택자
• 인접 형제 선택자 : 선택자 + 선택자
• 일반 형제 선택자 : 선택자 ~ 선택자

가상 클래스 선택자

: , Pseudo-Classes Selector

• hover : 마우스 커서가 올라가 있는 동안 선택
• active : 마우스를 클릭하고 있는 동안 선택
• focus : 포커스 되면 선택
• link
• visited
• nth-child(n) : 타입이 여러개 섞인경우 적용이 안되는 경우 有
• nth-of-type(n) : 태그만 지정가능(클래스 선택자 사용불가)

부정선택자 not(s)

: 해당 선택자가 아닌 요소 선택

가상 요소 선택자

• befor : 선택자 요소의 앞에 내용을 삽입

• after : 선택자 요소의 뒤에 내용을 삽입

  	https://codepen.io/kevinSuttle/pen/OXybrJ

속성 선택자

• tag {attr} : 해당 속성을 포함한 요소 선택
• tag {attr="value"} : 해당 속성의 값과 일치하는 요소 선택
• tag {attr^=value} : 해당 속성의 값으로 시작하는 요소를 전부 선택
• tag {attr$=value} : 해당 속성의 값으로 끝나는 요소를 선택
• tag {attr*=value} : 해당 속성의 값을 가진 모든 요소 선택

선택자 우선순위 (Priority)

• 명시도 : 선택자 명시도 점수
• 선언순서 : 점수가 같으면 마지막에 해석된 선언이 우선
• 중요도 : 상속보다 우선 !important

선택자	점수
!important	+9999999999999999
인라인 스타일	1000
ID 선택자	100
Class 선택자	10
tag 선택자	1
*전체 선택자	0

: 점수가 높은 선언이 우선된다.
: 점수가 같으면, 가장 마지막에 해석된 선언이 우선된다.

https://developer.mozilla.org/ko/docs/Web/CSS
https://developer.mozilla.org/ko/docs/Web/CSS/Specificity

css 명명법

BEM 방식 : Block Elements Modifiers(수식어)

Block
컴포넌트로서의 블록, 블록이름으로 명명
ex) .card, .form .navigation .gnb

Element
블록은 아니지만, 요소 개념
[상위 블록명] _ [엘리먼트명]
ex) .card_title, .card_author, menu_item

Modifier
블록이나 엘리먼트에 대한 플래그, 추가적인 요소
[상위 블록명] -- [모디파이어명]
ex) .card_title--flag, .post--important

BEM은 전체 사용자 인터페이스를 재사용 가능한 작은 구성요소들로 나누려고 시도한다.

http://getbem.com/naming/