[css] flexbox, grid, 선택자 익히기

알찬코·2023년 12월 1일
0

HTML, CSS

목록 보기
4/5
post-thumbnail

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"를 포함한 요소 선택

📖 참고자료

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

0개의 댓글