CSS 속성 부여

속성(Property)

CSS의 속성을 적용하기 위해 아래와 같이 작성

[선택자] {
    [속성 이름]: [값];
}

선택자를 작성하고 줄괄호를 열어서 닫기 전까지 작성할 수 있다.
속성 이름을 작성하고 콜론을 적은 뒤 값을 적고 세미 콜론으로 끝내야 함.
하나의 선택자에 여러개의 속성을 작성할 수 있다.

선택자(Selection)

하나 이상의 CSS속성을 적용하기 위한 대상을 선택함

기본 선택자    

유형 선택자(요소 선택자, Type Selector)

        - 태그의 이름으로 선택
        - 별도의 특수기호 없이 태그 이름 작성

가령, 모든 textarea 태그를 선택하기 위해 아래와 같이 선택자 작성

textarea{

}

    

클래스 선택자(Class Selector)

        - 태그가 가지고 있는 class 속성 값으로 선택
        - 마침표(.) 특수기호를 이용하여 .클래스의 형태로 작성

가령, global-italic이라는 클래스를 가지는 모든 요소를 선택하기 위해 아래와 같이 작성

.globa-italic{

}

    

아이디 선택자(ID Selector)

        - 태그가 가지고 있는 id 속성 값으로 선택
        - 샾(#)을 이용하여 #아이디의 형태로 작성

가령, loginForm이라는 아이디를 가지는 요소를 선택하기 위해 아래와 같이 작성           

#loginForm{

}

    

특성 선택자(Attribute Selector)

        - HTML 태그가 가지고 있는 속성 및 이의 값으로 선택
        - 대괄호([])를 이용하며, 속성 및 값 관계 정의는 아래와 같다.
            *[속성]     : 속성 존재 확인
            *[속성=값]  : 속성 값 일치 확인
            [속성~=값]  : 속성 값 포함 확인(구분자 공백)
            [속성^=값]  : 속성 값 시작 확인(접두어)
            [속성$=값]  : 속성 값 끝 확인(접미머)
            [속성*=값]  : 속성 값 포함 확인(단순)

가령 href 속성이 부여된 모든 <a>태그를 선택하는 선택자는 아래와 같다           

a[href]{
        <!-- a는 없어도 됨 -->
}

그룹 선택자
    

선택자 목록

        - 한번에 두개 이상의 선택자를 선택하여 동일한 속성을 부여하기 위함
        - 콤마(,)로 선택자를 구분한다

가령 h1, h2, ~~ h6 여섯개의 유형 선택자에 동일한 속성을 한 번에 부여하기 위해 아래와 같이 작성           

h1, h2, h3, h4, h5, h6{

}

결합자    

자손 결합자

        - 기준이 되는 선택자가 가지는 자식, 자손이 되는 선택자 전체를 선택하기 위함
        - 피선택자를 공백으로 구분한다.

 

가령, div 선택자의 자식 혹은 자손인 span 선택자 전체를 선택하기 위해 아래와 같이 작성           

div span{

}

    

자식 결합자

        - 기준이 되는 선택자가 가지는 자식이 되는 선택자 전체를 선택하기 위함
        - 오른쪽 홀화살괄호(>)

가령 ul태그의 자식인 li태그 전체를 선택하기 위해 아래와 같이 작성           

ul > li{

}

    

일반 형제 결합자

        - 기준이 되는 선택자와 동일한 부모를 가지고 이보다 후행하는 요소들에 대한 선택자
        - 물결표(~) 활용

가령, ul태그의 자식인 title 클래스를 가지는 li태그의 일반 형제인 li태그들을 모두 선택하기 위해 아래와 같이 선택자를 작성

ul > li.title ~ li{

}

    

인접 형제 결합자

        - 기준이 되는 선택자와 동일한 부모를 가지고 이보다 후행하며 인접한 요소들에 대한 선택자
        - 더하기(+) 사용
가령, ul태그의 자식인 title 클래스를 가지는 li태그의 인접 형제인 li태그들을 모두 선택하기 위해 아래와 같이 선택자를 작성

ul > li.title + li{

}

의사 클래스(Pseudo Class)

    - 요소의 상태나 상황에 따라 선택자를 구분함
    - 어떠한 선택자 뒤에 콜론(:)과 의사 클래스의 이름을 붙여 사용
    - active            : 활성 상태. 마우스를 누르고 있는 상태

    - checked           : input태그의 type 속성값이 checkbox 혹은 radio일 때 해당 태그가 체크되어 있는 상태

    - disabled          : 태그가 비활성화된(disabled 속성이 있는) 상태

    - enabled           : 태그가 활성화된(disabled 속성이 없는) 상태

    - first-child       : 첫번째 자식이면서 선행 선택자를 만족하는 상태

    - first-of-type     : 찾을 수 있는 첫번째 유형
    
    - focus             : (포커스를 가질 수 있는)태그가 포커스를 가진 상태, 근데 보통 input이 아니면 포커스가 안됨

    - focus-within      : 자기, 자식 혹은 자손 중 하나가 포커스를 가진 상태

    - hover             : 마우스 커서가 올라와있는 상태

    - last-child        : 마지막 자식이면서 선행 선택자를 만족하는상태

    - last-of-type      : 찾을 수 있는 마지막 유형

    - nth-child(x)      : x번째 자식이면서 선행 선택자를 만족하는 상태. x는 자연수이거나 아래값일 수 있다
        odd             : 홀수번째
        even            : 짝수번째
    
    - not(x)            : 의사 클래스 x를 부정하는 상태

    - readonly          : 태그가 읽기 전용인(readonly 속성이 있는) 상태

    - read-write        : 태그가 읽기 전용이(readonly 속성이 없는) 아닌 상태

    - required          : 태그가 필수영역인(required 속성이 있는) 상태

    - scope             : 선행하는 선택자(혹은 변수)에 의해 선택되는 요소를 참조하기 위한 가상의 포인트. CSS가 아닌 자바스크립트에서 사용하기 위해 존재함