01-선택자-CSS Diner 1~32

1. HTML에서 CSS 사용

CSS는 Cascading Style Sheet로 위에서부터 아래로 차례대로 스타일이 적용된다. HTML에서 CSS를 사용하려면 3가지 방법이 있다.

1.1 태그 안에 style 속성을 사용

1<태그 style="속성:값;"></태그>

첫 번째는 태그 안에 style 속성을 사용하는 방법!

1.2 style 태그 내에 CSS 작성

1<head>
2  <style>
3    /* CSS */
4  </style>
5</head>

두 번째는 style 태그 내에 CSS 문법을 작성하는 방법! 참고로 style 태그는 head 태그 안에 있어야 한다.

1.3 파일 따로 만들어서 link 태그로 연결

1<head>
2  <link href="style.css" rel="stylesheet"></link>
3</head>

마지막은 CSS 파일을 따로 만들어서 link 태그로 연결하는 방법으로 HTML 코드와 CSS 코드를 분리시킬 수 있다. href는 css 파일 경로를, rel은 stylesheet를 작성한다.

2. CSS 문법

1선택자 {
2  속성: 값;
3}

본 구조는 선택자를 지정하고 중괄호 안에 속성과 속성에 해당하는 값을 입력하고 세미콜론(;)으로 마무리하면 끝!

CSS 문법은 위에 구조에서 보았듯이, 크게 선택자와 속성으로 나누어진다.

3. 선택자 정리

3.1 기본 선택자

전체 선택자 : *
태그 선택자 : 태그이름
아이디 선택자 : #
클래스 선택자 : .
그룹 선택자 : 태그이름, 태그이름

3.2 심화 선택자

3.2.1 속성 선택자 : 문자열 속성 선택자

[속성 ~= 문자열]
[속성 |= 문자열]
[속성 ^= 문자열]
[속성 $= 문자열]
[속성 *= 문자열]

3.2.2 조합 선택자

CSS에서는 기본 선택자(태그, 아이디, 클래스)를 조합해서 사용 가능
그룹 선택자(group selector) : 이미 기본 선택자 시간에 배움, 여러 사용 가능한 태그 나열
- 기본 선택자, 기본 선택자
하위 선택자(descendant selector) : 특정 요소의 하위에 있는 요소를 선택할 떄 사용
- 기본 선택자 기본 선택자
자식 선택자(Child Selector)
형제 선택자

3.2.3 가상 요소 선택자

HTML 문서에서는 존재하지 않지만,
요소의 특정 부분을 존재하는 것처럼 가정하고 스타일을 적용할 때 사용하는 선택자 방법
MDN 가상 요소 선택자
가상 요소 선택자의 종류는 꽤 여러 가지가 있지만, 대표적으로 4가지 정도만 알아두면 됨

선택자	설명
`::first-letter`	`요소의 첫 글자를 선택`합니다.
`::first-line`	`요소의 첫 번째 줄(first line)을 선택`합니다.
`::before`	`요소의 콘텐츠 영역에서 맨 앞을 선택`합니다.
`::after`	`요소의 콘텐츠 영역에서 맨 뒤를 선택`합니다.

3.2.4 가상 클래스 선택자

link, visisted 링크 가상 클래스 선택자
- :link : 한 번도 방문한 적이 없는 상태의 링크 요소 선택
- :visited : 한 번 이상 방문한 적이 있는 상태의 링크 요소 선택
hover, active 동적 가상 클래스 선택자
- :hover : 요소에 마우스를 올리고 있는 상태를 선택
- :active : 요소가 마우스로 클릭 중인 상태를 선택
입력 요소 가상 클래스 선택자
- :focus : 입력 요소에 커서가 활성화되면 선택자로 지정
- :checked : 체크박스가 표시되어 있으면 인접한 형제 요소 선택자로 지정
- :disabled : 상호작용 요소가 비활성되면(disabled 속성이 사용되면) 선택자로 지정
- :enabled : 상호작용 요소가 활성화되면(disabled 속성이 사용되지 않은 상태면) 선택자로 지정
구조적 가상 클래스 선택자
- :nth-child(N) : 부모안에 모든 요소 중 N번째 요소
- A:nth-of-type(N) : 부모안에 A라는 요소 중 N번째 요소
- :first-child : 부모안에 모든 요소 중 첫번째 요소
- :last-child : 부모안에 모든 요소 중 마지막 요소
- A:first-of-type : 부모안에 A라는 요소 중 첫번째 요소
- A:last-of-type : 부모안에 A라는 요소 중 마지막 요소

1:nth-child(1) /* 첫번째 선택 */
2:nth-child(2n) /* 두번째 마다 선택 */
3:nth-child(2n+1) /* 첫번째 요소부터 2번째 마다 선택 */
4:nth-child(2n+5) /* 다섯번째 부터 2개 마다 선택 */
5:nth-child(-2n+5) /* 첫번째 요소부터 5번째 요소까지 2개 마다 선택 */
6:nth-child(n+5) /* 5번째 부터 모두 선택 */
7:nth-child(-n+5) /* 앞에서부터 5개만 선택 */
8:nth-child(odd) /* 홀수 선택 */
9:nth-child(even) /* 짝수 선택 */
10p:first-of-type /* 부모안에 모든 p요소 중 첫번째 p요소 선택 */
11span:last-of-type /* 부모안에 모든 span요소 중 마지막 span요소 선택 */

4. CSS Diner : CSS 선택자 게임

https://flukeout.github.io/

Level 1, 2 : 태그 선택자

1<태그></태그>
2
3태그 {}

태그명을 사용한다.

Level 3 : 아이디 선택자

1<태그 id="아이디명"></태그>
2
3#아이디명 {}

태그의 id에 지정한 고유한 이름을 #으로 선택할 수 있다. 주로 웹 페이지에서 중요하거나 특정 영역을 지정할 때 자주 사용한다.

Level 4, 5 : 자손 선택자

1<상위태그>
2  <하위태그></하위태그>
3</상위태그>
4
5상위태그 하위태그 {}

상위 태그에 포함된 하위 태그 모두 선택할 수 있다.

Level 6, 7, 8 : 클래스 선택자

1<태그 class="클래스명"></태그>
2
3.클래스명 {}

Level 9 : 그룹 선택자

1<태그1></태그1>
2<태그2></태그2>
3
4태그1, 태그2 {}

콤마(,)를 사용하여 여러 태그를 선택할 수 있다.

Level 10, 11 : 전체 선택자

1* {
2}

모든 HTML 태그들을 한꺼번에 선택한다.

Level 12 : 형제 선택자 중 하나인 + 선택자

1<태그1></태그2>
2<태그2></태그2>
3
4태그1 + 태그2 {}

바로 뒤에 나오는 태그를 선택할 때 사용한다.

Level 13 : 형제 선택자 중 하나인 ~ 선택자

1<태그1></태그1>
2<태그2></태그2>
3<태그3></태그3>
4
5태그1 ~ 태그3 {}

바로 뒤가 아니어도 형제 태그라면 선택할 수 있다.

Level 14 : 자식 선택자

1<부모태그>
2  <자식태그></자식태그>
3</부모태그>
4
5부모태그 > 자식태그 {}

직계 자식만 선택할 수 있다.

Level 15 : first-child 선택자

1<태그></태그>
2<태그></태그>
3<태그></태그>
4
5태그:first-child {}

여러 개의 태그 중 첫 번째 태그만 선택한다.

Level 16 : only-child 선택자

1<태그></태그>
2<태그2></태그2>
3<태그2></태그2>
4
5태그:only-child {}

선택한 태그가 유일한 경우 선택할 수 있다.

Level 17 : last-child 선택자

1<태그></태그>
2<태그></태그>
3<태그></태그>
4
5태그:first-child {}

여러 태그 중 마지막 태그만 선택한다.

Level 18 : nth-of-child 선택자

1<태그></태그>
2<태그></태그>
3<태그></태그>
4
5태그:nth-child(n) {}

n 번째 태그를 선택할 수 있다.

n에는 숫자 말고도 짝수에 해당하는 even 또는 2n, 홀수에 해당하는 odd 또는 2n+1 등을 사용할 수 있다.

Level 19 : nth-last-child 선택자

1<태그></태그>
2<태그></태그>
3<태그></태그>
4
5태그:nth-last-child(n) {}

뒤에서부터 n 번째에 있는 태그를 선택할 수 있다.

Level 20 : first-of-type 선택자

1<태그></태그>
2<태그></태그>
3<태그></태그>
4
5태그:first-of-type {}

특정 태그들 중 첫 번째 태그를 선택한다.

Level 21, 22 : nth-of-type 선택자

1<태그></태그>
2<태그></태그>
3<태그></태그>
4
5태그:nth-of-type(n) {}

특정 태그들 중 n 번째 태그를 선택한다. nth-child와 사용하는 방법은 같다.

Level 23 : only-of-type 선택자

1<태그></태그>
2<태그2></태그2>
3<태그2></태그2>
4
5태그:only-of-type {}

특정 태그가 유일한 경우 선택할 수 있다.

Level 24 : last-of-type 선택자

1<태그></태그>
2<태그></태그>
3<태그></태그>
4
5태그:last-of-type {}

특정 태그들 중 마지막 태그만 선택할 수 있다.

Level 25 : empty 선택자

1<태그></태그>
2
3태그:empty {}

해당 태그가 비어있는 경우 선택할 수 있다.

Level 26 : not 선택자

1<태그></태그>
2<태그 id="아이디"></태그>
3
4태그:not(#아이디) {}

특정 태그들 중 해당 태그가 아닌 경우 선택할 수 있다.

Level 27, 28 : 속성 선택자

1<태그 속성="값"></태그>
2
3태그[속성] {}
4[속성] {}

태그의 속성으로 선택할 수 있다. 태그를 생략하고 속성만 선택할 수 있다.

Level 29 : 속성=값 선택자

1<태그 속성="값"></태그>
2
3태그[속성="값"] {}

태그의 속성과 값을 사용하여 선택할 수 있다.

Level 30 : 속성 ^= 선택자

1<태그 속성="abc"></태그>
2
3태그[속성^="a"] {}

속성값이 처음에 오는 글자들과 같은 경우 선택할 수 있다.

Level 31 : 속성 $= 선택자

1<태그 속성="abc"></태그>
2
3태그[속성$="c"] {}

속성값이 마지막에 오는 글자들과 같은 경우 선택할 수 있다.

Level 32 : **속성 *= 선택자**

1<태그 속성="abc"></태그>
2
3태그[속성*="b"] {}

속성값에 글자들이 포함되어 있는 경우 선택할 수 있다.

웹 접근성과 WAI-ARIA 02-BEM 방법론과 자주 사용하는 속성