알찬코·2023년 12월 1일
0

목록 보기
4/5

# 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개 행)으로 작성
1. grid-template: 60% 40% / 200px;
2. 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에서 하나의 자식만 있는 것 전부 선택
1. .small:last-child
2. plate:nth-child(3)
3. bento:nth-last-child(3)
4. apple:first-of-type
5. plate:nth-of-type(even)
6. plate:nth-of-type(2n + 3)
7. plate apple:only-of-type
8. .small:last-of-type
• last-of-type: 클래스가 small인 것 중 마지막 요소 전부 선택
1. bento:empty
• empty: 자식 없는 요소 선택
1. apple:not(.small)
2. [for]
• [attribute]: 속성을 가진 요소 선택
1. plate[for]
2. [for="Vitaly"]
3. [for^="Sa"]
• [attribute^="value"]: 속성값이 "value"로 시작하는 요소 선택
1. [for$="ato"] • [attribute$="value"]: 속성값이 "value"로 끝나는 요소 선택
1. [for*="obb"]
• [attribute*="value"]: 속성값 "value"를 포함한 요소 선택