트위틀러 목업을 만드는 날이다.
어제 열심히 css 공부를 한 보람이 있었다.
html 구조를 손쉽게 만들었고,
색상표를 검색해가면서 페어와 아이디어를 의논하면서 열심히 꾸몄다.
다만 오늘부터 윗집에서 인테리어 공사를 시작하는 바람에 드릴소리가 시끄러워서 제대로 하지 못한게 아쉬웠다.ㅠㅠ
그래도 난 나의 색을 살릴 것이다.
남을 부러워 하지 않고 나의 고유의 색을 떨쳐 나갈것이다.
css 셀렉터는 중요한 부분인데 이를 재밌게 이해하기 위한 css 셀렉터 게임이 있다.
https://flukeout.github.io/
https://sinseiki.github.io/cssdiner/
위는 영어 사이트고 아래는 한글로 번역된 사이트이다.
1. Type Selector
태그로 요소를 선택하기
A { }
모든 A 태그들을 선택한다.
또한 태그는 종류에 따라 다르다.
예를 들면 <div>, <p>, <ul>은 서로 다른 태그이다.
예시)
div는 모든 <div> 태그로 이루어진 요소를 선택한다.
p는 모든 <p> 태그로 이루어진 요소를 선택한다.
plate를 선택하라는 문제이다.
1번 정답
HTML Viewer
<div class="table"> <plate /> <plate /> </div>CSS Editor
plate { }
2. Type Selector
태그로 요소들을 선택하기
A
모든 A 태그들을 선택한다.
또한 태그는 종류에 따라 다르다.
예를 들면 <div>, <p>, <ul>은 서로 다른 태그이다.
예시)
div는 모든 <div> 태그로 이루어진 요소를 선택한다.
p는 모든 <p> 태그로 이루어진 요소를 선택한다.
bento들을 선택하라는 문제이다.
2번 정답
HTML Viewer
<div class="table"> <bento /> <plate /> <bento /> </div>CSS Editor
bento { }
3. ID Selector
ID로 요소를 선택하기
#id
특정한 id로 요소를 선택한다.
ID 선택자를 태그 선택자와 합쳐 쓸 수도 있다.
예시)
#cool은 id="cool"로 되어 있는 요소를 선택한다.
ul#long은 <ul id="long">로 되어 있는 요소를 선택한다.
fancy한 plate를 선택하라는 문제이다.
3번 정답
HTML Viewer
<div class="table"> <plate id="fancy" /> <plate /> <bento /> </div>CSS Editor
#fancy { }
4. Descendant Selector
요소 안에 있는 요소를 선택하기
A B
A 안에 있는 모든 B를 선택한다. B는 자손이라고 부르는데, 다른 요소의 안에 있기 때문이다.
예시)
p strong은 모든 <p> 안에 있는 <strong> 요소를 선택한다.
#fancy span은 모든 id="fancy"인 요소 안에 있는 <span> 요소를 선택한다.
plate 안에 있는 apple을 선택하라는 문제이다.
4번 정답
HTML Viewer
<div class="table"> <bento /> <plate> <apple /> </plate> <apple /> </div>CSS Editor
plate apple { }
5. Combine the Descendant & ID Selectors
자손 선택자와 ID 선택자를 함께 쓰기
#id A
다른 선택자와 자손 선택자를 결합할 수 있다.
예시)
#cool span은 모든 id="cool"인 요소 안에 있는 <span> 요소를 선택한다.
fancy한 plate 안에 있는 pickle을 선택하라는 문제이다.
5번 정답
HTML Viewer
<div class="table"> <bento> <orange /> </bento> <plate id="fancy"> <pickle /> </plate> <plate> <pickle /> </plate> </div>CSS Editor
#fancy pickle{ }
6. Class Selector
클래스로 요소를 선택하기
.classname
클래스 선택자는 해당 클래스를 가지고 있는 모든 요소를 선택한다.
각 요소는 ID를 하나만 가질 수 있지만 클래스는 하나 이상 가질 수 있다.
예시)
.neato는 class="neato"인 모든 요소를 선택합니다.
small한 apple들을 선택하라는 문제이다.
6번 정답
HTML Viewer
<div class="table"> <apple /> <apple class="small" /> <plate> <apple class="small" /> </plate> <plate /> </div>CSS Editor
.small{ }
7. Combine the Class Selector #1
클래스 선택자를 다른 선택자와 함께 쓰기
A.classname
클래스 선택자를 태그 선택자와 같은 다른 선택자를 결합할 수 있다.
예시)
ul.important는 모든 <ul> 요소들 중에서 class="important"인 요소들을 선택한다.
#big.wide는 id="big"이면서 class="wide"인 요소를 선택한다.
small한 orange들을 선택하라는 문제이다.
7번 정답
HTML Viewer
<div class="table"> <apple /> <apple class="small" /> <bento> <orange class="small" /> </bento> <plate> <orange /> </plate> <plate> <orange class="small" /> </plate> </div>CSS Editor
orange.small{ }
8. Combine the Class Selector #2
bento들 안에 있는 small한 orange들을 선택하라는 문제이다.
8번 정답
HTML Viewer
<div class="table"> <bento> <orange /> </bento> <orange class="small" /> <bento> <orange class="small" /> </bento> <bento> <apple class="small" /> </bento> <bento> <orange class="small" /> </bento> </div>CSS Editor
bento orange.small{ }
9. Comma Combinator
선택자들을 쉼표로 결합한다.
A, B
A 요소들과 B 요소들을 한번에 선택할 수 있다.
어떤 선택자들이건 이런 방법으로 결합을 시킬 수 있으며 두 개 이상의 선택자들을 지정할 수 있다.
예시)
p, .fun은 모든 <p> 요소들과 모든 class="fun"인 요소들을 선택한다.
a, p, div는 모든 <a>, <p>, <div> 요소들을 선택한다.
모든 plate들과 bento들을 선택하라는 문제이다.
9번 정답
HTML Viewer
<div class="table"> <pickle class="small" /> <pickle /> <plate> <pickle /> </plate> <bento> <pickle /> </bento> <plate> <pickle /> </plate> <pickle /> <pickle class="small" /> </div>CSS Editor
plate, bento{ }
10. The Universal Selector
모든 것을 선택할 수 있다.
- 전체 선택자를 이용하여 모든 요소를 선택할 수 있다.
예시)
p *는 <p> 요소 안에 있는 모든 요소를 선택합니다.
모든 걸 선택하라는 문제이다.
10번 정답
HTML Viewer
<div class="table"> <apple /> <plate> <orange class="small" /> </plate> <bento /> <bento> <orange /> </bento> <plate id="fancy"> </div>CSS Editor
*{ }
11. Combine the Universal Selector
전체 선택자를 함께 쓰기
A *
A 안에 있는 모든 요소들을 선택한다.
예시)
p *은 <p> 안에 있는 모든 요소들을 선택한다.
ul.fancy *는 <ul class="fancy"> 안에 있는 모든 요소들을 선택한다.
plate 안에 있는 모든 것을 선택하라는 문제이다.
11번 정답
HTML Viewer
<div class="table"> <plate id="fancy"> <orange class="small" /> </plate> <plate> <pickle /> </plate> <apple class="small" /> <plate> <apple /> </plate> </div>CSS Editor
plate *{ }
12. Adjacent Sibling Selector
다른 요소의 바로 다음에 있는 요소를 선택하기
A + B
A 요소 바로 다음에 따르는 형제인 B 요소를 선택한다.
같은 부모 안에 있는 자식 요소를 서로 형제라고 한다.
HTML 마크업에서는 들여쓴 칸의 크기가 똑같은 요소들을 형제라고 한다.
예시)
p + .intro는 <p> 바로 다음에 있는 class="intro"인 요소를 선택한다.
div + a는 <div> 바로 다음에 있는 <a> 요소를 선택한다.
plate 바로 다음에 있는 apple들을 선택하라는 문제이다.
12번 정답
HTML Viewer
<div class="table"> <bento> <apple class="small" /> </bento> <plate /> <apple class="small" /> <plate /> <apple /> <apple class="small" /> <apple class="small" /> </div>CSS Editor
plate + apple{ }
13. General Sibling Selector
다른 요소 다음에 있는 요소들을 선택하기
A ~ B
어떤 요소 다음에 있는 형제 요소들을 선택할 수 있다.
인접 형제 선택자인 (A + B)와 비슷하지만 다음에 있는 모든 요소들을 하나가 아니라 모두 선택한다.
예시)
A ~ B는 A 다음에 있는 모든 B를 선택한다.
bento 다음에 있는 pickle들을 선택하라는 문제이다.
13번 정답
HTML Viewer
<div class="table"> <pickle /> <bento> <orange class="small" /> </bento> <pickle class="small" /> <pickle /> <plate> <pickle /> </plate> <plate> <pickle class="small" /> </plate> </div>CSS Editor
bento ~ pickle{ }
14. Child Selector
요소의 자식을 선택하기
A > B
요소의 자식 요소들을 선택할 수 있다.
자식 요소는 다른 요소(부모) 바로 안에 둘러싸인 요소를 말한다.
자식보다 더 깊게 안으로 들어가 버린 요소는 자손이라고 한다.
예시)
A > B는 A의 자식인 모든 B를 선택합니다.
plate 바로 안에 있는 apple을 선택한다.
14번 정답
HTML Viewer
<div class="table"> <plate> <bento> <apple /> </bento> </plate> <plate> <apple /> </plate> <plate /> <apple /> <apple class="small" /> </div>CSS Editor
plate > apple { }
15. First Child Pseudo-selector
첫째 요소를 선택하기
:first-child
첫 번째 자식 요소를 선택할 수 있다.
자식 요소는 다른 요소(부모) 바로 안에 둘러싸인 요소를 말한다.
이 가상 선택자를 다른 선택자와 함께 쓸 수 있다.
예시)
:first-child는 모든 첫째 자식 요소들을 선택한다.
p:first-child는 모든 첫째 자식 요소들 중에 <p> 요소들을 선택한다.
div p:first-child는 <div> 안에 있는 모든 첫째 자식 중에 <p> 요소를 선택한다.
첫 번째 orange를 선택하라는 문제이다.
15번 정답
HTML Viewer
<div class="table"> <bento /> <plate /> <plate> <orange /> <orange /> <orange /> </plate> <pickle class="small" /> </div>CSS Editor
orange:first-child { }
16. Only Child Pseudo-selector
형제 없이 혼자 있는 요소를 선택하기
:only-child
어떤 요소 안에 혼자 있는 요소를 선택할 수 있다.
예시)
span:only-child는 어떤 요소 안에 있는 <span>들 중에서 형제 없이 혼자 있는 <span>을 선택한다.
ul li:only-child는 <ul> 안에서 형제 없이 혼자 있는 <li>를 선택한다.
plate들 안에 혼자 있는 모든 음식들을 선택하라는 문제이다.
16번 정답
HTML Viewer
<div class="table"> <plate> <apple /> </plate> <plate> <pickle /> </plate> <bento> <pickle /> </bento> <plate> <orange class="small" /> <orange /> </plate> <pickle class="small" /> </div>CSS Editor
plate *:only-child { }
17. Last Child Pseudo-selector
다른 요소 안에 있는 마지막 자식 요소를 선택하기
:last-child
다른 요소 안에 있는 마지막 자식 요소를 선택하는 데에 이 선택자를 사용할 수 있다.
참고 → 형제 없이 혼자 있는 요소들은 first-child가 될 수도 있고, only-child가 될 수도 있으며 last-child가 될 수도 있다!
예시)
:last-child는 모든 마지막 자식 요소들을 선택한다.
span:last-child는 <span>들 중 마지막 <span>을 선택한다.
ul li:last-child는 <ul> 안에 있는 마지막 <li> 요소들을 선택한다.
small한 음식 중 마지막 음식들을 선택하라는 문제이다.
17번 정답
HTML Viewer
<div class="table"> <plate id="fancy"> <apple class="small" /> </plate> <plate /> <plate> <orange class="small" /> <orange /> </plate> <pickle class="small" /> </div>CSS Editor
.small:last-child { }
18. Nth Child Pseudo-selector
다른 요소 안에 있는 요소를 순서로 선택하기
:nth-child(A)
다른 요소 안에 있는n번째 자식 요소를 선택한다.
예시)
:nth-child(8)은 다른 요소 안에 있는 8번째 자식 요소를 선택한다.
div p:nth-child(2)는 <div> 안에 있는 모든 2번째 자식 요소들 중 p를 선택한다.
3번째 plate를 선택하라는 문제이다.
18번 정답
HTML Viewer
<div class="table"> <plate /> <plate /> <plate /> <plate id="fancy" /> </div>CSS Editor
plate:nth-child(3) { }
19. Nth Last Child Selector
다른 요소 안에 있는 자식 요소를 역순에 따라 선택하기
:nth-last-child(A)
부모의 자식을 역순에 따라 선택한다.
nth-child와 비슷하지만, 순서는 역순이다!
예시)
:nth-last-child(2)는 다른 요소 안에서 뒤에서 두 번째에 있는 모든 요소들을 선택합니다.
첫번째 bento이자 뒤에서 세 번째에 있는 bento를 선택하라는 문제이다.
19번 정답
HTML Viewer
<div class="table"> <plate /> <bento /> <plate> <orange /> <orange /> <orange /> </plate> <bento /> </div>CSS Editor
plate:nth-child(3) { }
20. First of Type Selector
특정 태그 중 첫번째 요소를 선택하기
:first-of-type
다른 요소 안에 있는 태그 중 첫 번째 요소를 선택한다.
예시)
span:first-of-type은 요소 안에 있는 첫째 <span>을 선택한다.
첫 번째 'apple'을 선택하라는 문제이다.
20번 정답
HTML Viewer
<div class="table"> <orange class="small" /> <apple /> <apple class="small" /> <apple /> <apple class="small" /> <plate> <orange class="small" /> <orange /> </plate> </div>CSS Editor
apple:first-of-type { }
21. Nth of Type Selector
:nth-of-type(A)
다른 요소 안에서 특정 태그를 순서에 따라 선택한다.
짝수 번째(even)나 홀수 번째(odd) 요소도 선택할 수 있다.
예시)
div:nth-of-type(2)는 두 번째 <div> 요소를 선택한다.
.example:nth-of-type(odd)는 example 클래스가 있는 모든 홀수 번째 요소를 선택한다.
짝수 번째 plate들을 선택하라는 문제이다.
21번 정답
HTML Viewer
<div class="table"> <plate /> <plate /> <plate /> <plate /> <plate id="fancy" /> <plate /> </div>CSS Editor
plate:nth-of-type(even) { }
22. Nth-of-type Selector with Formula
수식이 있는 Nth-of-type 선택자
:nth-of-type(An+B)
nth-of-type 수식 선택자는 특정 B 번째 요소부터 시작해서 각각의 A번째를 선택한다.
예시)
span:nth-of-type(6n+2)는 두 번째 <span>부터 시작해서 각 6번째 <span>들을 선택한다.
(n이 0이 될 수 있기 때문에 두 번째 <span>도 포함해서 선택한다.)
3번째 plate부터 2n번째 plate를 선택하라는 문제이다.
22번 정답
HTML Viewer
<div class="table"> <plate /> <plate> <pickle class="small" /> </plate> <plate> <apple class="small" /> </plate> <plate /> <plate> <apple /> </plate> <plate /> </div>CSS Editor
plate:nth-of-type(2n+3) { }
23. Only of Type Selector
부모 안에 하나만 있는 태그 요소를 선택하기
:only-of-type
다른 요소 안에 하나만 있는 태그 요소를 선택한다.
예시)
p span:only-of-type는 <p> 안에서 하나만 있는 <span> 요소를 선택한다.
plate 안에 하나만 있는 apple을 선택하라는 문제이다.
23번 정답
HTML Viewer
<div class="table"> <plate id="fancy"> <apple class="small" /> <apple /> </plate> <plate> <apple class="small" /> </plate> <plate> <pickle /> </plate> </div>CSS Editor
apple:only-of-type { }
24. Last of Type Selector
특정 태그의 마지막 요소를 선택하기
:last-of-type
다른 요소 안에 있는 마지막 태그 요소를 선택한다.
예시)
div:last-of-type는 요소 안에 있는 모든 마지막 <div> 태그를 선택한다.
p span:last-of-type는 <p> 태그 안에 있는 모든 마지막 <span> 태그를 선택한다.
마지막 orange와 마지막 apple을 선택하라는 문제이다.
24번 정답
HTML Viewer
<div class="table"> <orange class="small" /> <orange class="small" /> <pickle /> <pickle /> <apple class="small" /> <apple class="small" /> </div>CSS Editor
orange:last-of-type, apple:last-of-type { }
25. Empty Selector
자식이 없는 요소를 선택하기
:empty
안에 아무 자식 요소도 가지지 않은 요소를 선택한다.
예시)
div:empty는 안에 자식이 없는 <div>요소들을 선택한다.
안에 아무 것도 없는 bento를 선택하라는 문제이다.
25번 정답
HTML Viewer
<div class="table"> <bento /> <bento> <pickle class="small" /> </bento> <plate /> <bento /> </div>CSS Editor
bento:empty { }
26. Negation Pseudo-class
부정 선택자 안에 쓴 것과 맞지 않은 요소들을 선택하기
:not(X)
"X"가 아닌 모든 요소들을 선택할 수 있다.
예시)
:not(#fancy)는 id="fancy"가 아닌 모든 요소들을 선택한다.
div:not(:first-child)는 첫째 자식 요소가 아닌 모든 <div> 요소들을 선택한다.
:not(.big, .medium)은 class="big" 혹은 class="medium"이 아닌 요소들을 선택한다.
small이 아닌 apple들을 선택하라는 문제이다.
26번 정답
HTML Viewer
<div class="table"> <plate id="fancy"> <apple class="small" /> </plate> <plate> <apple /> </plate> <apple /> <plate> <orange class="small" /> </plate> <pickle class="small" /> </div>CSS Editor
apple:not(.small) { }
27. Attribute Selector
특정 속성을 가진 모든 요소들을 선택하기
[for]
속성은 여는 태그에 있습니다.
이를테면<span 속성='값'>이런 식으로 쓰인다.
어떤 속성은 '값'을 가지지 않을 때도 있다.
예시)
a[href]는 모든 <a> 태그 중에서 href="값"이 있는 요소들을 선택한다. (<a href="값">)
[type]는 여는 태그에 type="값"이 있는 요소들을 선택한다.
누군가를 위한(for) 음식들을 선택하라는 문제이다.
27번 정답
HTML Viewer
<div class="table"> <bento> <apple class="small" /> </bento> <apple for="Ethan" /> <plate for="Alice"> <pickle /> </plate> <bento for="Clara"> <orange /> </bento> <pickle /> </div>CSS Editor
[for] { }
28. Attribute Selector
특정 속성을 가진 모든 요소들을 선택하기
A[attribute]
태그 선택자 같은 다른 선택자 뒤에 속성 선택자를 붙여서 사용할 수 있다.
예시)
[attribute]는 attribute="값"인 모든 요소들을 선택한다.
a[href]는 모든 a 태그 중에서 href="값"이 있는 요소들을 선택한다. (a href="값")
input[disabled]은 모든 input 요소들 중에서 disabled 속성이 있는 요소들을 선택한다.
누군가를 위한(for) plate들을 선택하라는 문제이다.
28번 정답
HTML Viewer
<div class="table"> <bento> <apple class="small" /> </bento> <apple for="Ethan" /> <plate for="Alice"> <pickle /> </plate> <bento for="Clara"> <orange /> </bento> <pickle /> </div>CSS Editor
[for] { }
29. Attribute Value Selector
특정 속성값을 가진 모든 요소들을 선택하기
[attribute="value"]
속성 선택자는 민감한 아이이기 때문에, 각 글자가 정확하게 일치해야 한다.
예시)
input[type="checkbox"]는 type 속성의 값이 checkbox인 input 요소들을 선택한다.
Vitaly를 위한(for) 음식을 선택하라는 문제이다.
29번 정답
HTML Viewer
<div class="table"> <apple class="Alexei" /> <bento for="Albina"> <apple /> </bento> <bento for="Vitaly"> <orange /> </bento> <pickle /> </div>CSS Editor
[for="Vitaly"] { }
30. Attribute Starts With Selector
특정 글자들로 시작하는 속성 값을 가진 모든 요소들을 선택하기
[attribute^="value"]
세 특수기호(^,$,*)는 '정규표현식'이라는 다른 언어에 있는 기호이다.
CSS는 이 기호들을 정규표현식과 비슷한 기능으로 사용한다.
^: 시작 글자들을 가리킨다.
$: 끝 글자들을 가리킨다.
*: 포함된 특정 글자들을 가리킨다.
예시)
.toy[category^="Swim"]은 toy 클래스를 가진 요소들 중 category="Swimwear"나 category="Swimming" 같은 요소들을 선택한다.
'Sa'로 시작하는 사람들을 위한(for) 음식들을 선택하라는 문제이다.
30번 정답
HTML Viewer
<div class="table"> <plate for="Sam"> <pickle /> </plate> <bento for="Sarah"> <apple class="small" /> </bento> <bento for="Mary"> <orange /> </bento> </div>CSS Editor
[for^="Sa"] { }
31. Attribute Ends With Selector
특정 글자들로 끝나는 속성 값을 가진 모든 요소들을 선택하기
[attribute$="value"]
세 특수기호(^,$,*)는 '정규표현식'이라는 다른 언어에 있는 기호이다.
CSS는 이 기호들을 정규표현식과 비슷한 기능으로 사용한다.
^: 시작 글자들을 가리킨다.
$: 끝 글자들을 가리킨다.
*: 포함된 특정 글자들을 가리킨다.
예시)
img[src$=".jpg"]는 파일 이름이 .jpg로 끝나는 모든 이미지들을 선택한다.
'ato'로 끝나는 사람들을 위한(for) 음식들을 선택하라는 문제이다.
31번 정답
HTML Viewer
<div class="table"> <apple class="small" /> <bento for="Hayato"> <pickle /> </bento> <apple for="Ryota" /> <plate for="Minato"> <orange /> </plate> <pickle class="small" /> </div>CSS Editor
[for$="ato"] { }
32. Attribute Wildcard Selector
특정 글자들을 포함하는 속성 값을 가진 모든 요소들을 선택하기
[attribute*="value"]
class,href,src와 같은 속성들의 값에서 같은 패턴을 찾을 수 있을 때 쓸 수 있는 유용한 선택자이다.
예시)
img[src*="/thumbnails/"]는 thumbnails 폴더 안에 있는 모든 이미지들을 선택한다.
[class*="heading"]는 클래스에 "heading"이 포함된 class="main-heading", class="sub-heading" 같은 요소들을 선택한다.
'obb'를 포함하는 사람들을 위한(for) 음식들을 선택하라는 문제이다.
32번 정답
HTML Viewer
<bento for="Robbie"> <apple /> </bento> <bento for="Timmy" /> <pickle /> </bento> <bento for="Bobby"> <orange /> </bento> </div>CSS Editor
[for*="obb"] { }
