2022.05.02 08:29 PM ~ 5-1 파일로 이동
Section 7: The World of CSS Selectors
＊ 글속 태그들 < >는 ( )로 대체
<< CSS Selectors >>
-> 1. Universial Selector (범용 선택자) : * { color: red; }
(요소 전부를 선택함. 큰 문서에서는 좋은 생각이 아님.)-> 2. Element Selector (요소 선택자) : 태그 이름 { }
(문서 내 해당 태그들 전체에 적용함)
(ex: h1 { text-size: 40px} )-> 3. Selector List (여러개 태그를 선택) :
(ex: h1, h2 { color: magenta; } )
<< ID Selectors >>
※ HTML에 만든 태그들 중, ' ID="" '로 지정한 것을
선택하여 스타일링 하는 것.
※ ID는 한번 사용한 같은 이름을 사용할 수 없음.-> 1. #아이디이름 { 스타일링 } :
(ex: 어떤 button 태그의 ID가 ID="logout"이라고 한다면,
CSS 파일에서는 아래와 같이 해당 ID 요소를 불러온다.#logout {
color: orange;
} )
<< Class Selector >>
※ 일반적인 웹사이트들에서 주로 사용되는 방법.
※ 유사한 여러개를 묶어서 동시에 스타일링하기 위해 사용함-> 1. .클래스이름 { 스타일링 } :
(ex: 어떤 span 태그들의 class가 class="tag"라고 한다면,
CSS 파일에서는 아래와 같이 tag란 클래스명을 가진 span들을 불러온다..tag {
color: orange;
} )
<< Descendant Selector (후손 태그 선택자) >>
※ 부모태그 하위 자식 태그가 여러개 있고, 그 중 한개를 선택하는 경우.
말그대로 부모태그 속에 몇 단계 밑에 '후손 태그'를 선택하여 스타일링 하는 것.-> 1. 첫번째 방법 ~ 태그 전체 경로를 지정 ~
(ex: section span a {
color: teal;
} )-> 2. 두번째 방법 ~ 부모태그에 Class를 줌 ~
(ex: .post a {
color: teal;
} )
<< Adjacent Selector (인접 및 직계 자손 선택자 >>
※ 어떤 태그의 바로 다음에 오는 태그를 선택해 스타일링하겠다는 뜻
-> 1. 예시:
※ h2 태그들 다음에 오는 button들에 대해 일괄적으로 적용(ex: h2 + button {
font-size: 20px;
} )
<< Direct Child Selector (직계 자식 선택자) >>
※ 부모태그 바로 밑에 있는 자식 태그를 선택하는 것.
※ 자주 사용되지 않음!(ex: div > li {
color: white;
} )
