가오리의 코딩일기

https://www.youtube.com/watch?v=qEkjC6GCrg4&list=PL-eeIUD86IjSyxTbGT7wY3Hie_HA5bKvg&index=8 Simple, One Page Design A free landing page theme with video background Get Started html, body { margin: 0; padding: 0; } h1, p { margin: 0; } a { color: inherit; text-decoration: none; } #main { background: url(./bg-img.jpeg) no-repeat; background-size: cover; background-position: center center; width: 1..

https://www.youtube.com/watch?v=33UvhCoPrmc&list=PL-eeIUD86IjSyxTbGT7wY3Hie_HA5bKvg&index=4 DESIGN HOME BEDROOM DINING KITCHEN BACKYARD DESIGN YOUR HOUSE Subscribe Easy Youtube Channel to watch more videos, press t he bell icon to get latest updates. WATCH VIDEOS @font-face { font-family: abster; src: url(./font/abster-webfont.woff) format("woff"); } * { margin: 0; padding: 0; box-sizing: border..

LEVEL1 .tower-group-1{ display: flex; justify-context: center; } LEVEL2 .tower-group-1{ display:flex; justify-content: flex-end; } .tower-group-2{ display:flex; justify-content: center; } .tower-group-3{ display:flex; justify-content: flex-end; } LEVEL3 .tower-group-1{ display:flex; justify-content: center; } .tower-group-2{ display:flex; justify-content: space-between; } LEVEL4 .tower-group-1{ ..

LEVEL21 plate:nth-of-type(even){ } LEVEL22 plate:nth-of-type(2n+3){ } LEVEL23 plate .small:only-of-type{ } LEVEL24 .small:last-of-type{ } LEVEL25 bento:empty{ } LEVEL26 :not(.small, plate){ } LEVEL27 [for]{ } LEVEL28 plate[for]{ } LEVEL29 bento[for="Vitaly"]{ } LEVEL30 [for^="Sa"]{ } → ^= : 접두사로 "Sa"를 가진다 LEVEL31 [for$="ato"]{ } → $= : 접미사로 "ato"를 가진다 LEVEL32 [for*="obb"]{ } → *= : 뒤에 오는 문자열이 적어..

LEVEL11 plate *{ } LEVEL12 plate + apple{ } → plate 바로 뒤에 있는 apple LEVEL13 bento ~ pickle{ } LEVEL14 plate > apple{ } LEVEL15 orange:first-child{ } LEVEL16 plate :only-child{ } LEVEL17 .small:last-child{ } LEVEL18 plate:nth-child(3){ } → 3 : 앞을 기준으로 3번째 LEVEL19 bento:nth-last-child(3){ } → (3) : 뒤에서 세 번째 LEVEL20 apple:first-of-type{ }

LEVEL1 plate{ } LEVEL2 bento{ } LEVEL3 #fancy{ } LEVEL4 plate apple{ } LEVEL5 #fancy pickle{ } LEVEL6 .small{ } LEVEL7 orange.small{ } LEVEL8 bento orange.small{ } LEVEL9 plate, bento{ } LEVEL10 *{ }

LEVEL15 #garden{ display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%; } #water{ grid-column: 2/6; grid-row: 1/6; } LEVEL16 #garden{ display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%; } #water{ grid-area: 1/2/4/6; } LEVEL17 #garden{ display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-templa..

LEVEL1 #garden{ display: grid; grid-template-columns: 20% 20% 20% 20% 20%; gird-template-rows: 20% 20% 20% 20% 20%; } #water{ grid-column-start: 3; } LEVEL2 #garden{ display: grid; grid-template-columns: 20% 20% 20% 20% 20%; gird-template-rows: 20% 20% 20% 20% 20%; } #poison{ grid-column-start: 5; } LEVEL3 #garden{ display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20..

LEVEL13 #pond{ display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-end; } LEVEL14 #pond{ display: flex; } .yellow{ order:2; } LEVEL15 #pond{ display: flex; } .red{ order: -1; } LEVEL16 #pond{ display: flex; align-items: flex-start; } .yellow{ align-self: flex-end; } LEVEL17 #pond{ display: felx; align-items: flex-start; } .yellow{ order: 1; align-self: felx-end..

LEVEL1 #pond{ display: flex; justify-content: flex-end; } LEVEL2 #pond{ display: flex; justify-content : center; } LEVEL3 #pond{ display : flex; justify-content : space-around; } LEVEL4 #pond{ display : flex; justify-content : space-between; } LEVEL5 #pond{ display :flex; align-items: flex-end; } LEVEL6 #pond{ display : flex; justify-content : center; align-items: center; } LEVEL7 #pond{ display..