[실행화면] [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{ }

Level 1 palte { } Level 2 bento { } Level 3 #fancy { /*id 속성값은 #*/ } Level 4 plate apple { } Level 5 #fancy pickle { } Level 6 .small { } Level 7 orange.small { } Level 8 bento orange.small { } Level 9 plate, bento { } Level 10 * { }

[실행 화면] [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..

Statue of Liberty [실행 화면] [HTML 소스 코드] Statue of Liberty #New york #나에게 자유를 #탈옥 [CSS 소스 코드] div { background-color: white; width: 400px; padding: 30px; /*margin-left:auto; margin-right:auto; margin-top:130px; */ margin: 150px; /* 상하 좌우 margin: 130px auto 130px; 상 좌우 하 margin: 130px auto 130px auto; 상 우 하 좌 */ border: 10px whitesmoke solid; border-radius: 5px; } h1 { color: mediumaquamarine; marg..

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..