CSS 기본적인 것들과 자주 사용되는 것들

 

선택자란? 

-> 특정 html요소를 선택하고자 할 때 사용하는 기능 

해당 요소를 선택해서 원하는 스타일과 기능을 적용시킬 수 있다 

 

모든 (전체)  선택자 : * 

현재 이 문서상에 모든 요소들을 다 선택하고자 할 때 사용 

 

태그 선택자 : 태그명 { }

현재 이 문서 상에 해당 태그를 모두 선택하고자 할 때 사용 

 

아이디 선택자 : #아이디명 

 

클래스 선택자 : .클래스명

현재 문서 상에 특정 html 요소 "여러 개"를 선택하고자 할 때 사용

 

.클래스명{

 스타일속: 값;

}

 

 

---

기타 선택자 : 

 

* 키워드 => 속성값 

 

키워드가 일치하는 경우 : 선택자[속성명=키워드]

키워드가 포함되어 있는 경우(전체단어): 선택자[속성명~=키워드]

키워드가 포함되어 있는 경우 : 선택자[속성명*]

div[name=name1]{

    background-color: crimson;

}

 

div 요소 중 name 속성 값이 name1과 일치하는 요소 

 

div[name=name1]{

background-color: 

}

 

div 요소 중 name 속성 값에 "name1"이 포함되어 있는 요소(키워드 x) : ~=

div[name~="name1"]{

    background-color: blue;

}

 

 

div 요소 중 class 속성 값이 class로 시작하는 요소(단어, -로 구분) : |= 

<div class="div-class" name="name3 name1">DIV3</div>

    <div class="class-div" name="name3">DIV4</div>

 

자손 선택자 : a > b {

스타일속성 : 값; 

} --> a 요소의 자손 요소 b 

 

후손 선택자 : a b {

 스타일 속성 : 값 

}

 

 

    <div id="parent">

        <h4>div 요소의 자손이면서 후손</h4>

        <h4>div 요소의 자손이면서 후손</h4>

        <ul>div 요소의 후손

            <li>ul 요소의 자손이고, div 요소의 후손</li>

            <li>ul 요소의 자손이고, div 요소의 후손</li>

        </ul>

    </div>