Ruby's Diary

CSS 이란?

Cascading Style Sheets 의 줄임말

위에서 아래로 흐르는 스타일 시트

HTML이 각 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면

CSS는 웹 문서의 디자인 요소를 담당하며 웹 문서에 생기를 불어 넣어 주는 역할을 한다.

스타일 우선순위 - 위에서 아래로 적용

스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 적용

다른 어떤 스타일보다 최우선으로 적용해야 할 스타일 시트는 !important

스타일 시트 적용 범위 (Specificity)

하나의 요소에 여러 스타일이 적용 될 경우 스타일이 충돌되기 때문에 우선순위를 정할 수 있다.

인라인 스타일 시트 → 내부 스타일 시트 →  외부 스타일 시트
→ 아이디 선택자 → 클래스 선택자 → 태그 선택자 → 전체 선택자

스타일 시트 적용 기본 문법

선택자 { 스타일속성 : 속성 값 }

선택자( Selector ) 는 요소를 선택한다.

기본 선택자

(약) 전체 선택자( * ) < 태그 선택자( 요소명 ) < 클래스 선택자( . ) < 아이디 선택자( # ) (강)

전체 선택자 ( * ) Universal Selector

모든 요소에 스타일을 적용 할 때 사용한다.

태그 선택자 ( 요소명 ) Tag Selector

특정 태그가 쓰인 모든 요소에 스타일을 적용한다.

클래스 선택자 ( . ) Class Selector

특정 부분에만 스타일을 적용 할 때 사용한다.

기억하기 쉬운 이름을 임의로 지정

아이디 선택자 ( # ) Id Selector

클래스 선택자와 아이디 선택자의 가장 큰 차이는 클래스 선택자가 문서 안에서 여러번 적용 가능하다면

아이디 선택자는 문서 안에서 한번만 적용할 수 있다. 중복해서 사용이 불가능 하다.

그룹 선택자 ( , ) 

쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일은 한번만 정의하면 코드 사용량을 줄일 수 있다.

자식 선택자 ( > )

바로 밑에 있는 직속 자식에 한에서 적용하는 선택자

하위 선택자 ( ) - 띄어쓰기

안에 속해 있는 태그는 한 칸 띄우고 적용하는 선택자

인접 형제 선택자 ( + ) ex) A + B

처음에 적은 A의 바로 뒤 B에꺼만 적용하는 선택자

A와 가장 가까운 곳에 있는 인접 형제만 선택하는 선택자

일반 형제 선택자 ( ~ ) ex) A ~ B

A의 밑에서부터 B포함 까지 적용하는 선택자

:nth child(n), first-child, last-child 구조적 가상 클래스 선택자

first-child : 부모 요소 기준 첫번째 자식

last-child : 부모 요소 기준 마지막 자식

nth-child(n) : 부모 요소 기준 n번째 자식

nth-child(2n) 또는 (even) : 부모 요소 기준 짝수 번째 자식

nth-child(2n+1) 또는 (odd) : 부모 요소 기준 홀수 번째 자식

가상클래스 선택자 :hover, :active, :focus, ::before, ::after 등

스타일 시트 주석 처리 방법

/* 이 사이에 주석처리할 내용을 적어 줍니다. */ 

스타일시트 적용 방법
1. 인라인 스타일 시트 적용 (강)
2. 내부 스타일 시트 적용 (중)
3. 외부 스타일 시트 적용 (약) - 주로 사용 ( 유지보수의 효율성 )

스타일 속성 작성 순서

선택자 {
    [박스 유형 속성:display]
    [위치 속성:position, left, right, top, bottom]
    [박스 속성:width, height, margin, padding]
    [글자 속성]
    [배경 속성: background]
    [테두리 속성: border, border-radius]
    [박스 그림자 속성: box-shadow]
    [전환 속성: transition]
    [변형 속성: transform]
    [애니메이션: animation]
}