Flexbox Froggy - https://flexboxfroggy.com/#ko
justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;
align-items: flex-end;
justify-content: center;
align-items: center;
justify-content: space-around;
align-items: flex-end;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: row-reverse;
justify-content: flex-end;
flex-direction: column;
justify-content: flex-end;
flex-direction: column-reverse;
justify-content: space-between;
flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;
order: 1;
order: -1;
align-self: flex-end;
order: 1;
align-self: flex-end;
flex-wrap: wrap;
flex-direction: column;
flex-wrap: wrap;
flex-flow: column wrap;
align-content: flex-start;
align-content: flex-end;
flex-direction: column-reverse;
align-content: center;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;
Grid Garden - https://cssgridgarden.com/#ko
grid-column-start: 3;
grid-column-start: 5;
grid-column-end: 4;
grid-column-end: 2;
grid-column-end: -2;
grid-column-start: -3;
grid-column-end: span 2;
grid-column-end: span 5;
grid-column-start: span 3;
grid-column: 4 / 6;
grid-column: 2 / span 3;
grid-row-start: 3;
grid-row: 3 / span 3;
grid-column: 2;
grid-row: 5;
grid-column: 2 / span 4;
grid-row: 1 / span 5;
grid-area: 1 / 2 / 4 / 6;
grid-area: 2 / 3 / 5 / 6;
order: 1;
order: -1;
grid-template-columns: 50% 50%;
grid-template-columns: repeat(8, 12.5%);
grid-template-columns: 100px 3em 40%;
grid-template-columns: 1fr 5fr;
grid-template-columns: 50px repeat(3, 1fr) 50px;
grid-template-columns: 75px 3fr 2fr;
grid-template-rows: repeat(4, 12.5px) 1fr;
grid-template: 60% 40% / 200px;
grid-template: 1fr 50px / 20% 80%;
CSS Dinner - https://flukeout.github.io/
plate
bento
#fancy
plate apple
#fancy pickle
.small
orange.small
bento orange.small
plate, bento
*
plate *
plate + apple
bento ~ pickle
plate > apple
orange:first-child
plate > *:only-child
.small:last-child
plate:nth-child(3)
bento:nth-last-child(3)
apple:first-of-type
plate:nth-of-type(even)
plate:nth-of-type(2n + 3)
plate apple:only-of-type
.small:last-of-type
bento:empty
apple:not(.small)
[for]
plate[for]
[for="Vitaly"]
[for^="Sa"]
[for$="ato"]
[for*="obb"]
Level 26 is difficult to understand #73
[CSS] CSS Diner - CSS Selector 연습하기