[실행 화면] [html 소스] The Best Colors Tomato #FF6347 Teal #008080 Burlywood #DEB887 Thistle #D7BFD7 [css 소스] body { height: 100vh; background-color:rgb(219, 217, 217); } h1 { text-align: center; margin-bottom: 50px; } .wrapper { width: 450px; margin: 0px auto; } .container { display: flex; justify-content: space-around; align-items: center; } .color { width: 200px; position: relative; margin-bottom:..

[실행화면] [html 소스] [CSS 소스] body { background-color: #ffe57f; } .wrapper { width: 600px; height: 600px; background-color: #ff9a8b; margin: 50px auto; border: 5px white solid; border-radius: 50%; display: flex; align-items: center; background-image: linear-gradient( 90deg, #ff9a8b 0%, #ff6a88 55%, #ff99ac 100%); } .big { width: 400px; height: 400px; background-color: #74ebd5; margin: 50px auto; bor..

Level 21 plate:nth-of-type(even){ } Level 22 plate:nth-of-type(2n+3){ } : 2번째 인스턴스부터 시작 Level 23 .small:only-of-type Level 24 .small:last-of-type{ } Level 25 bento:empty { } Level 26 :not(.small, plate){ } Level 27 [for] { } Level 28 plate[for] { } Level 29 bento[for="Vitaly"]{ } Level 30 [for^="Sa"]{ } : ^= : 접두사로 "Sa"를 가진다 Level 31 [for$="ato"]{ } : $= : 접미사로 "ato"를 가진다 Level 32 [for*="obb"]{ ..

Level 11 plate * { } Level 12 plate + apple { } Level 13 bento ~ pickle { } Level 14 plate > apple { } Level 15 orange:first-child { } Level 16 plate :only-child { } Level 17 .small:last-child { } Level 18 plate:nth-child(3) { } Level 19 bento:nth-last-child(3){ } Level 20 apple:first-of-type{ }

[실행 화면] [html 소스] [css 소스] body { background-color: tomato; } .wrapper { background-color: antiquewhite; width: 500px; height: 500px; margin: 150px auto; border: 5px black solid; } .wrapper div { background-color: teal; width: 100px; height: 100px; border: 3px white solid; margin: 50px auto; } .wrapper div.second { width: 400px; border: 3px white dashed; } : 경계선에서 점선은 dashed를 써야한다는 것을 알았다.

[실행 화면] [html 소스] Jack-O'-Lantern A jack-o'-lantern is a carved pumpkin, turnip, or other root vegetable lantern associated with Halloween. Its name comes from the phenomenon of a strange light flickering over peat bogs, called will-o'-the-wisp or jack-o'-lantern. Information jack@veamcamp.cpm 000-3234-2344 Seoul, Korea Skills Photoshop Web Front-End Euducation HAPPY HALLOWEEN [css 소스] body { ba..

Kiwi [실행 화면] [소스 코드] Kiwi Hi, this is kiwi's page. : 오렌지랑 다르게 css를 html 소스 style 안에다가 작성하였다. orange.css에 겹치는 내용들을 다 적어줘서 링크만 연결하면 된다. Strawberry [실행 화면] [소스 코드] Strawberry Hi, this is Strawberry's page.

Visual Studio Code 확장 프로그램 설치 Korean Language Pack for Visual Studio Code Live Server Material Icon Theme Material Theme Prettier - Code formatter Color Highlight Bracket Pair Colorizer IntelliSense for CSS class names in HTML Visual Studio IntelliCode Auto Rename Tag HTML Snippets Orange [HTML만 완성] [소스 코드] Orange Orange Kiwi Strawberry [태그, 속성] div : 사이트의 레이아웃(전체적인 틀)을 만들 때 주로 사용 h : 구획 제목 요소 h..