문제웹 사이트이 성능은 사용자 경험에 큰 영향을 미치는다. 특히 웹 페이지의 로딩 속도는 사용자 이탈률을 줄이고 SEO 성능을 향상시키는데 중요하다. 그런데 최근 작업한 프로젝트에서 페이지 로딩 속도가 느리다는 피드백을 받았다. 네트워크를 확인해보니 속도가 414ms였다.  PageSpeed Insights  사이트에 들어가서 확인해보니 웹 페이지의 가장 큰 문제는 1. 누적 레이아웃 이동(CLS) 2. 큰 이미지 파일로 인해 발생하는 로딩 지연이었다. 해결 방법문제를 해결하기 위해 세 가지 접근 방식을 사용했다.1. 이미지 최적화 : 이미지 파일의 크기를 줄이고, 필요한 경우에만 로드되도록 설정한다.2. 폰트 최적화 : 웹 폰트 로딩 시 발생하는 레이아웃 이동을 방지한다.3. 이미지 프리로딩 : 주요 ..

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

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.