1. Flexbox

Flexbox Froggy - https://flexboxfroggy.com/#ko

1.1 문제 풀이

1. justify-content: flex-end;
2. justify-content: center;
3. justify-content: space-around;
4. justify-content: space-between;
5. align-items: flex-end;

6. justify-content: center;
    align-items: center;

7. justify-content: space-around;
    align-items: flex-end;

8. flex-direction: row-reverse;
9. flex-direction: column;

10. flex-direction: row-reverse;
     justify-content: flex-end;

11. flex-direction: column;
     justify-content: flex-end;

12. flex-direction: column-reverse;
     justify-content: space-between;

13. flex-direction: row-reverse;
     justify-content: center;
     align-items: flex-end;

14. order: 1;
15. order: -1;
16. align-self: flex-end;

17. order: 1;
     align-self: flex-end;

18. flex-wrap: wrap;

19. flex-direction: column;
     flex-wrap: wrap;

20. flex-flow: column wrap;
21. align-content: flex-start;
22. align-content: flex-end;

23. flex-direction: column-reverse;
     align-content: center;

24. flex-direction: column-reverse;
     flex-wrap: wrap-reverse;
     justify-content: center;
     align-content: space-between;

2. grid

Grid Garden - https://cssgridgarden.com/#ko

• 문제 풀이

1. grid-column-start: 3;
2. grid-column-start: 5;
3. grid-column-end: 4;
4. grid-column-end: 2;
5. grid-column-end: -2;
6. grid-column-start: -3;
7. grid-column-end: span 2;
8. grid-column-end: span 5;
9. grid-column-start: span 3;
10. grid-column: 4 / 6;
11. grid-column: 2 / span 3;
12. grid-row-start: 3;
13. grid-row: 3 / span 3;

14. grid-column: 2;
     grid-row: 5;

15. grid-column: 2 / span 4;
     grid-row: 1 / span 5;

16. grid-area: 1 / 2 / 4 / 6;
17. grid-area: 2 / 3 / 5 / 6;
18. order: 1;
19. order: -1;
20. grid-template-columns: 50% 50%;
21. grid-template-columns: repeat(8, 12.5%);
22. grid-template-columns: 100px 3em 40%;
23. grid-template-columns: 1fr 5fr;
24. grid-template-columns: 50px repeat(3, 1fr) 50px;
25. grid-template-columns: 75px 3fr 2fr;
26. grid-template-rows: repeat(4, 12.5px) 1fr;

• 해설: 5개의 행 중 물이 채워지지 않을 50px을 4개 행으로 분할하여 생성한 뒤,
  마지막 행을 전부 물로 채우기 위해 repeat(4개 행, 50px / 4) 1fr(1개 행)으로 작성

27. grid-template: 60% 40% / 200px;
28. grid-template: 1fr 50px / 20% 80%;

3. css 선택자

CSS Dinner - https://flukeout.github.io/

1. plate
2. bento
3. #fancy
4. plate apple
5. #fancy pickle
6. .small
7. orange.small
8. bento orange.small
9. plate, bento
10. *
11. plate *
12. plate + apple
13. bento ~ pickle
14. plate > apple
15. orange:first-child
16. plate > *:only-child

• only-child: plate에서 하나의 자식만 있는 것 전부 선택

17. .small:last-child
18. plate:nth-child(3)
19. bento:nth-last-child(3)
20. apple:first-of-type
21. plate:nth-of-type(even)
22. plate:nth-of-type(2n + 3)
23. plate apple:only-of-type
24. .small:last-of-type

• last-of-type: 클래스가 small인 것 중 마지막 요소 전부 선택

25. bento:empty

• empty: 자식 없는 요소 선택

26. apple:not(.small)
27. [for]

• [attribute]: 속성을 가진 요소 선택

28. plate[for]
29. [for="Vitaly"]
30. [for^="Sa"]

• [attribute^="value"]: 속성값이 "value"로 시작하는 요소 선택

31. [for$="ato"]

• [attribute$="value"]: 속성값이 "value"로 끝나는 요소 선택

32. [for*="obb"]

• [attribute*="value"]: 속성값 "value"를 포함한 요소 선택

📖 참고자료

Level 26 is difficult to understand #73
[CSS] CSS Diner - CSS Selector 연습하기