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.

w3에서는 이렇게 설명이 나옴

콘솔에 한번 쳐볼까?

ul안에 리스트를 4개 만들고 ul *:only-child를 하니 적용이 안됨

only child는 안에 하나만 있을 경우 사용이 가능한 것 같다. 

ul *{} / ul > *{} 은 적용이 되는 것을 보니 워킹스페이스 상의 문제는 아닌 듯 하다.

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 span, starting from (and including) the second instance.

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 spanwithin any p if it is the only span in there.

그렇기 때문에 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 div elements.

 빈 테그를 선택한다.

: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 divthat is not a first child.

:not(.big, .medium) selects all elements that do not have class="big" or class="medium"

작지 않은 스타일을 가진 사과 테그 선택

27

[for]

a[href] selects all a elements that have a href="anything" attribute.

[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

[attribute*="value"]

A useful selector if you can identify a common pattern in things like class, href or srcattributes.

img[src*="/thumbnails/"] selects all image elements that show images from the "thumbnails" folder.

[class*="heading"] selects all elements with "heading" in their class, like class="main-heading" and class="sub-heading"

영어 때문에 이해가 힘든 분들이 도움이 되셨으면 좋겠다.