강의제목 : 비전공자를 위한 HTML/CSS
제공 : 네이버부스트코스
공부일자 : 2021.11.28
🌏4. CSS 이해하기
💫4-3 선택자
https://developer.mozilla.org/en-US/docs/Glossary/CSS_Selector
Selector (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
A CSS selector is the part of a CSS rule that describes what elements in a document the rule will match. The matching elements will have the rule's specified style applied to them.
developer.mozilla.org
https://www.w3schools.com/cssref/css_selectors.asp
CSS Selectors Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://css-tricks.com/the-difference-between-id-and-class/
The Difference Between ID and Class
We need ways to describe content in an HTML/XHTML document. The basic elements like h1, p, and ul will often do the job, but our basic set of tags doesn't cover every possible type of page element or layout choice. For this we need ID's and classes.
css-tricks.com
부분 속성값으로 선택
부분 속성값으로 선택은 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다릅니다.
- [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
- [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
- [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
- [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors
특성 선택자 - CSS: Cascading Style Sheets | MDN
CSS 특성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.
developer.mozilla.org
문서구조 관련 선택자
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
Adjacent sibling combinator - CSS: Cascading Style Sheets | MDN
The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
Child combinator - CSS: Cascading Style Sheets | MDN
The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator
Descendant combinator - CSS: Cascading Style Sheets | MDN
The descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc)
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/content
content - CSS: Cascading Style Sheets | MDN
The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.
developer.mozilla.org
위와 같이 구체성은 4개의 숫자 값으로 이루어져 있습니다.
값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖습니다.
구체성은 아래의 규칙대로 계산됩니다.
- 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
- 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
- 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
- 전체 선택자는 0, 0, 0, 0을 가진다.
- 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
모든 스타일은 아래의 규칙에 따라 단계적으로 적용됩니다.
- 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다.
- 스타일 규칙들을 출처에 따라 분류합니다.
- 스타일 규칙들을 구체성에 따라 분류합니다.
- 스타일 규칙들을 선언 순서에 따라 분류합니다.
'언어 > HTML, CSS' 카테고리의 다른 글
| [강의] 비전공자를 위한 HTML/CSS : PART5 단위, 배경, 박스모델 (0) | 2021.11.29 |
|---|---|
| [강의] 비전공자를 위한 HTML/CSS : PART2 HTML 태그 (0) | 2021.11.28 |
| [강의] 비전공자를 위한 HTML/CSS : PART1 HTML이해하기 (0) | 2021.11.27 |