CSS Selector Reference - 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
1) CSS 문법
선택자(selector) : 어느 요소를 꾸밀 것인가 * 그룹화 가능
선언(declaration) : 속성(property): 값(value); * 하나의 선언을 끝마칠 때 세미콜론(;) 작성,
그룹화 가능
선언부(declaration block) : {중괄호} 내부
규칙(rule set) : 선택자 + 선언부
↳ 선택자1, 선택자2 {속성: 값; 속성: 값;}
주석(comment tags) : /* */
2) CSS 적용
① inline : 직접 해당 요소에 style 속성을 이용하여 직접 선언
② internal : <style> 태그를 이용. (<head> 내에 선언)
③ external : 별도의 css의 파일(확장자: .css)을 만듦.
↳ <link>를 이용하여 외부 css파일과 연결.
- <head> 내에 선언
- 속성 : rel= “stylesheet”
href= css 파일 경로
④ @import (거의 쓰이지 않음)
3) 선택자
① 요소 선택자 (태그 선택자) : 선택자에 해당하는 모든 요소에 스타일 규칙이 적용
h1 { color: blue; }
- 전체 선택자(*) : 문서 내 모든 요소를 선택 * 성능 측면에서 좋지 않음(사용 지양)
② class 선택자 : html에서 class 속성으로 선언한 속성값(클래스명)을 이용 * 다중 클래스 가능
html - <p class=”foo bar”> …. </p>
css - .foo { font size: 30px; } * 선택자 앞에 온점(.) 작성
.bar { color: purple; }
③ id 선택자 : html에서 id 속성으로 선언한 속성값(id명)을 이용 * 문서 내 유일한 요소에 적용
html - <p id=”bar”> …. </p> * 선택자 앞에 해시 기호(#) 작성
css - #bar { background-color: yellow; }
④ 속성 선택자
- 단순 속성 선택 선택자[속성] {…}
- 정확한 속성값 선택 선택자[속성=”속성값”] {…}
- 부분 속성값 선택 (속성과 등호 사이의 기호에 따라)
[속성~=”속성값”] : 공백으로 구분된 해당 속성값이 포함되는 요소 선택
[속성^=”속성값”] : 해당 속성값으로 시작하는 요소 선택
[속성$=”속성값”] : 해당 속성값으로 끝나는 요소 선택
[속성*=”속성값”] : 해당 속성값이 속성값 단어에 포함되는 요소 선택
Ex) 부분 속성값이 “color”일 경우, “colorful”이라는 속성값을 가진 요소 선택됨.
[선택자의 조합]
- 요소 + 클래스 p.bar {…}
- 다중 클래스 .foo.bar {…}
- 아이디 + 클래스 #foo.bar {…}
속성 – color: 색상
- text-decoration: underline
- font-size
- background-color
4) 문서 구조와 관련된 선택자 : 조합자(결정자)
① 자손 선택자 : 공백으로 구분하여 조상 요소와 자손 요소를 순서대로 작성
div span {…} à div 요소의 자손인 span 요소 선택
② 자식 선택자 : 부모 요소와 자식 요소 선택자 사이에 > 기호 작성
div>span {…}
③ 인접 형제 선택자 : 형제 요소와 인접 형제 요소 사이에 + 기호 작성
div+span {…}
* 조합해서 사용 가능
body > div table + ul { ... } à body 요소의 자식인 div 요소의 자손인 table 요소와
인접한 형제 선택 ul 요소를 선택
* 여러 자식 요소들 중 한 가지를 순서에 따라 선택하기
.container div:nth-child(1) { …. ;} à ‘container’ class의 자식 요소 div 중 1번째 요소 선택
[요소 사이의 관계도]
부모와 자식: 직접 연결된 관계
조상과 자손: 몇 대에 걸쳐 연결되든 상관없음.
형제: 같은 부모를 가짐
ㄴ 인접한 형제: 형제 관계 중 바로 뒤이어
나오는 것
5) 가상 선택자
① 가상 클래스 (pseudo class) : 미리 정의한 상황에 적용이 되도록 약속되어 있는 보이지 않는 클래스 (어떤 조건이 충족되면 해당 요소에 클래스를 자동으로 삽입) à 요소에 직접 클래스를 작성하는 것이 아니라, 브라우저 스스로가 특정 상황이 되면 자동적으로 클래스를 적용시켜 줌.
↳ [선언 방법] : :가상클래스명 {….} * 선택자 앞에 콜론(:) 작성
↳ [종류]
- 문서 구조와 관련 : first-child, last-child
- 링크와 관련 : link(하이퍼링크 & 아직 방문하지 않는 앵커) ,visited (이미 방문한 하이퍼링크)
* 하이퍼링크 : <a>(앵커) 태그에 href 속성이 존재하는 것.
- 사용자 동작 관련 : focus (현재 입력 포커스를 갖고 있는 요소)
hover (마우스 포인터가 위치해 있는 요소)
active (사용자 입력에 의해 활성화된 요소)
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes (표준 가상 클래스 색인)
② 가상 요소(pseudo element) : 미리 정의한 위치에 삽입이 되도록 약속되어 있는 보이지 않는 요소
↳ [선언 방법] : :가상요소명 {….}
↳ [종류] - before (가장 앞에 삽입) * content 속성 이용
after (가장 뒤에 삽입) * content 속성 이용
--> 가상 요소 속성값이 content에 적용되고 이것의 위치를 선택자로 지정
first-line (화면 기준 요소의 첫 번째 줄에 있는 텍스트를 감싸는 요소가 삽입)
first-letter (블록 레벨 요소 내의 화면 기준 첫 번째 문자를 감싸는 요소가 삽입)
--> 해당 텍스트 부분에 가상 요소 속성값이 적용됨
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements (가상 요소 종류)
6) 구체성 (명시도)
어떤 요소에 적용된 css 스타일이 상충(같은 요소를 선택하는 css 스타일이 서로 다른 속성값을 가짐) --> 어떤 스타일을 적용할 것인지 결정 필요 --> 구체성을 부여
구체성 : 선택자를 얼마나 명시적으로 선언했는가를 수치화한 것 --> 구체성 값이 높을수록 우선
4개의 값을 가짐(0,0,0,0) à 좌측 부분의 숫자가 클수록 높은 구체성
↳ 0,1,0,0 : 선택자에 있는 모든 id 속성값
0,0,1,0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
0,0,0,1 : 선택자에 있는 모든 요소와 가상 요소
* 전체 선택자(*)는 0,0,0,0 à 구체성에 영향을 주지 못 함.
* 인라인 스타일로 선언된 규칙은 1,0,0,0 으로 가장 높은 구체성
↳ !important 키워드 : 모든 구체성을 무시하고 우선권을 가지게 함.
ㄴ 속성값 뒤에 공백으로 구분한 뒤 작성 p#page{color red !important; }
7) 상속
상속 : 어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것.
* 상속된 값은 아무런 구체성을 가지지 않는다. (0,0,0,0 보다도 낮음)
* 박스 모델 속성들은 상속되지 않는다. – margin, padding, background, border 등
8) 캐스케이딩
캐스케이딩 : css 스타일이 어떤 방식으로 문서에 적용되는지를 정한 규칙. (단계적인)
구체성이 같은 두 규칙이 동일한 요소에 적용되는 경우 à 캐스케이드 규칙에 따름
[캐스케이드 규칙]
① 중요도와 출처
중요도 : important로 선언된 규칙 최우선
출처 : 제작자, 사용자, 사용자 에이전트(일반 사용자의 환경, 브라우저에 내장된 css, 브라우저에서 기본적으로 제공)
↳ 사용자 important > 제작자 important > 제작자 > 사용자 > 사용자 에이전트
*사용자 스타일 거의 사용하지 않음
② 구체성
③ 선언 순서 : 나중에 선언된 것이 우선
'웹 > HTML & CSS' 카테고리의 다른 글
| 1.6 [CSS] CSS 속성 2 _ 폰트, 텍스트 (0) | 2022.07.03 |
|---|---|
| 1.5 [CSS] CSS속성 1 _ 단위, 배경, 박스모델 (0) | 2022.07.03 |
| 1.3 [HTML] 콘텐츠모델, 시멘틱마크업, 블록 & 인라인 (0) | 2022.07.03 |
| 1.2 [HTML] 태그 (0) | 2022.06.19 |
| 1.1 [HTML] HTML 이해하기 - HTML 개념 / 기초 문법 / 기본 구조 (0) | 2022.05.30 |
