CSS Diner 정답공유와 정리
CSS Diner
아니 쓴거 임시 저장 해놨는데 다 날아갔으뮤 ㅜㅠㅠ
처음에는 CSS Diner 답 정리 처음부터 하고 있었는데 앞에 내용 날아가서 넘기고 (어차피 앞 내용은 쉬우니까)
내가 12번 부터 제대로 복습을 안한 내용이 나와서 여기부터 정리하면서 넘어가야겠다.
http://flukeout.github.io/
css diner
이거 게임 형식으로 쉽게 css 선택자를 공부 할 수 있게 하는건데 책 보고 지루하게 하는 것 보다 잼있다.
이고잉님이 추천해주셨음 (이고잉 짱bb)
나는 코드아카데미가 영어이고 재미가 없어서... 코도아카데미보다 다른 학습 방법을 선호한다.
자기한테 맞는 배우는 방법이 있으니 그냥 개인 성향에 맞게 공부를 하는 것이 정답인듯!
12
plate + apple
이게 뭔지 몰라서 html, css책을 뒤져봤다. 그냥 보기로는 + 때문에 plate와 apple모두를 선택하는 선택자 같아보이기 때문이다 (근데 그런 기능은, 가 하고있음 plate, apple)
+ 는 동위선택자로 바로 뒤에 있는 테그 하나를 선택한다.
예를 들어서
<h1> hi </h1>
<h2> hi </h2>
<h2> hello </h2>
css스타일에서 h1 + h2 를 하면 h1바로 뒤에 나오는 h2하나가 선택된다는 것
13
bento ~ pickle
이것도 동위 선택자라고 하는데 +와는 다르게 뒤에있는 같은 요소를 다 선택할 수 있는 것이다.
다이너에서 그래서 벤또 뒤에 있는 피클이라는 테그를 어떤 클래스를 가지고 있든 상관 없이 플레이트가 나오기 전까지 모두 선택하고 있다.
<h1> hi </h1>
<h2> hi </h2>
<h2> hello </h2>
css스타일에서 h1 ~ h2 를 하면 h1뒤에 모든 h2요소를 선택한다.
14
plate > apple
자손 선택자는 특정 테그 아래에 있는는 자손을 선택할 때 사용한다.
특정 id 속성 값을 가지고 있는 요소의 후손을 선택할 때는 후손 선택자를 사용한다.
후손 선택자 : #fancy apple
후손 선택자를 쓸 때 주의를 해야 하는 점이 있다.
만약에 #header에 있는 h1과 h2의 속성을 바꾸고 싶다면
#header h1, h2 {}이런식으로 사용을 하는 것이 아니라
#header h1, #header h2 {} 이런 식으로 사용을 해야 함
15
plate orange:first-child
orange:first-child
구조선택자
여기서 plate 안에 3개있는 orange의 첫번째 오랜지만 선택하고 싶으므로 plate orange:first-child
diner에서는 오랜지 더미가 한개만 있으니 상관이 없지만
더 정확하게plate 안에 있는 orange의 :first-child를 잡고 있다고 선언을 할 수도 있다. 그래서 답은 저렇게 두개가 된다.
16
plate *:only-child
only-child는 어떤 한 테그 안에 한개의 무엇이 있다면 선택하는 요소임
여기서는 플레이트 안에 있는 모든 것을 *로 묶고 only-child로 선택을 하였다.
그렇다면 plate *에 한개의 요소 뿐만 아니라 많이 있다면 어떻게 해야할까?
The :only-child selector matches every element that is the only child of its parent.
17
.small:last-child
왜?????
.small class를 가지고 있는 것은 apple, orange, pickle 여기서 :las-child가 의미하는 것은 마지막 것 아닌가?
<h1 class="small">a</h1>
<h2 class="small">a</h2>
<p class="small">a</p>
이렇게 인덱스 페이지를 채우고
css에서
.small:last-child{
color: red;
}
이렇게 쓴다면 가장 마지막에 있는 p만 빨간색이 되는데
이건 나중에 다시 한번 찾아봐야겠다.
18
plate:nth-child(3)
nth-child뒤에 괄호를 열고 몇번째 아이의 속성을 바꿀 것인지 설정할 수 있음
이것을 수열로도 쓸 수 있는데
li:nth-child(2n) { color:orange; }
li:nth-child(2n+1) {color:red;}
이렇게 한다면 리스트의 색이 번갈아서 나타 날 것이다.
배열은 0부터 시작하기 때문에 각 n에 0,1,2,3,4 를 대입해보면 이해가 갈 것이다.
19
bento:nth-last-child(3)
nth-last-child는 뒤에서부터 수를 세기 시작한다. 맨 뒤에 있는 벤또로부터 3번째에 있는 요소이기 때문에 답이 저렇게 된다.
20
apple:first-of-type
:first-of-type는 형재 관계 중에서 첫번째로 등장하는 특정 태그를 선택한다.
<h1> 이 이곳 저곳에서 많이 사용된다면 맨 처음 등장하는 h1만 선택이 가능 한 것!
21
plate:nth-of-type(even)
:nth-of-type(odd)도 똑같이 사용이 가능하다.
앞에서 나온 수열을 이용해서 색을 바꾸는 것 보다 이것이 더 잘 적용이 된다.
모던 웹 디자인을 위한 html+css입문이라는 책에서는 158페이지에 수열을 이용해서 리스트에 무늬를 주는 예제가 나와 있지만
내가 사용하는 워크스페이스에서는 (c9) 이런 방식 보다는 nth-of-type이 적용이 잘 된다. 루비온레일즈라 그런가 아님 css가 css3가 아닐 수도있겠다. 왜인지는 모르게 오류가 남
하지만 제대로 실행이 된다면 결과는 똑같음
22
plate:nth-of-type(2n+3)
diner에서의 설명은 이러하다.
span:nth-of-type(6n+2) selects every 6th instance of a
an+b라고 한다면
b의 값부터 시작해서 6번째 오는 모든 요소를 선택하는 선택자 라는 것
그래서 답은 3번째 플레이트, 5번째 플레이트를 선택해야 하니 b의 값은 3이 될 것이고 b로부터 a의 플레이트는 2번째에 위치하니 a의 값은 2가 된다.
내가 설명을 잘 못하네.. ㅋㅋ 설명이 더 어려움
23
plate apple:only-of-type
diner의 설명은
p span:only-of-type selects a
그렇기 때문에 only-of-type은 잘 사용하지 않을 것 같다. 왜냐하면
p 에 span이 하나라면 저렇게 긴 문장을 사용하지 않고 p>span{}이렇게 스타일을 지정하는 것이 쉬워보이기 때문이다.
plate>apple 이렇게 쓰겠지...
걍 알고만 넘어가자
24
.small:last-of-type
오랜지와 사과는 같은 클래스(small)를 공유하고 있다.
하지만 오랜지와 애플이라는 기본적인 태그가 다르니 :last-of-type로 선택자를 지정 할 경우 가장 뒤에 있는 요소가 선택된다.
25
bento:empty
div:empty selects all empty
빈 테그를 선택한다.
:empty{ border:hidden; }
이렇게 숨길 경우 사용하는건가?
:empty테그는 처음 보는데 사용 예제가 궁금
26
apple:not(.small)
:not(#fancy) selects all elements that do not have id="fancy"
div:not(:first-child) selects every
:not(.big, .medium) selects all elements that do not have class="big" or class="medium"
작지 않은 스타일을 가진 사과 테그 선택
27
[for]
a[href] selects all
[type] selects all elements that have a type="anything". attribute
이런 방식으로 하면 input 타입의 스타일도 바꿀 수 있다.
28
plate[for]
for을 가지고 있는 plate 테그,
내가 href를 가지고 있는 a태그의 속성을 바꾸고 싶다면 a[href]
29
bento[for="Vitaly"]
<bento for="Vitaly">
특정 링크를 가지고 있는 경우 이렇게 속성을 지정할 수 있음
input[type="checkbox"] selects all checkbox input elements.
30.
[for^="Sa"]
diner에서의 설명은
Select all elements with an attribute value that starts with specific characters
[attribute^="value"]
.toy[category^="Swim"] selects elements with class toy and either category="Swimwear or category="Swimming"
^을 사용해서 링크나 다른 요소가 특정 value로 시작할 경우를 선택 가능
루비 코드가 html에 해당url 을 넘겨 주면 그것도 이런 방식으로 작동이 가능한가?
31.
[for$="to"]
Select all elements with an attribute value that ends with specific characters
[attribute$="value"]
img[src$=".jpg"] selects all images display a .jpg image
32.
[for*="bb"]
중간에 bb가 들어가는 for 속성을 가진 모든것(*)을 선택하는 선택자
Select all elements with an attribute value that contains specific characters anywhere
A useful selector if you can identify a common pattern in things like class, href or srcattributes.
영어 때문에 이해가 힘든 분들이 도움이 되셨으면 좋겠다.