목록HTML+CSS+JavaScript (88)
가오리의 코딩일기
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..
https://www.youtube.com/watch?v=oYRda7UtuhA close HOME ABOUT COURSE BLOG CONTANT menu World's Biggest University Making website is now one of the easiest thing in the world. You just need to learn HTML, CSS, Javascript and you are good to go. Visit Us To know More Courses We Offer Lorem, ipsum dolor sit amet consectetur adipisicing elit. Intermediate Lorem ipsum dolor sit amet consectetur adipis..
close Play list imagesmode Random Love by Divay Kapoor play_arrow Play favorite add Matargasti Mohit Chauhan Attitude Lewis OfMan - Attitude Try Everthing Shalkira - Zootopia Sunflower Joseph Vincent - Sunflower * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Oswald", sans-serif; } body { background-color: white; } .wrapper { position: absolute; left: 50%; top: 50%; transform: t..