- [ifp_html_css] 할로윈2022년 06월 03일
- 홍유진
- 작성자
- 2022.06.03.오전03:27
[실행 화면]
[html 소스]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About Me</title> <style> </style> </head> <body> <div class="wrapper"> <div class="header"> <img class="profile" src="./image/halloween-profile.png"> <h1>Jack-O'-Lantern</h1> <p> 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. </p> </div> <div class="contents"> <div class="section"> <h2>Information</h2> <ul> <li>jack@veamcamp.cpm</li> <li>000-3234-2344</li> <li>Seoul, Korea</li> </ul> </div> <div class="section skills"> <h2>Skills</h2> <ul> <li>Photoshop</li> <li>Web Front-End</li> <li>Euducation</li> </ul> </div> </div> <div class="footer"> HAPPY HALLOWEEN </div> </div> </body> </html>[css 소스]
body { background-attachment: fixed; height: 100vh; background-image: url(./image/halloween-background.gif); background-repeat: no-repeat; background-size : cover; background-color: #666; } /*div { text-align: center; }*/ h1, h2, ul, p { padding: 0; margin: 0; } li { list-style-type: none; } .wrapper { background-color: #ddd; width: 800px; margin: 50px auto; } .header { background-image: url(./image/halloween-header-bg.png); color: white; height: 400px; text-align: center; } .header .profile { margin-top: 50px; } .header h1{ color: violet; margin: 10px; } .header p { width: 400px; background-color: black; color: #888; margin: 0 auto; padding: 2px; border-radius: 5px; } .section { background-image: url(./image/icon-information.png); background-repeat: no-repeat; background-position: right 30px center; background-color: white; margin: 20px; padding: 20px; } .section.skills { background-image: url(./image/icon-skills.png); } .section h2 { color: orangered; margin-bottom: 20px; } .section li { padding: 10px 50px 10px; background-image: url(./image/icon-jack2.png); background-repeat: no-repeat; } .section li:hover { color: orangered; background-image: url(./image/icon-jack.png); } .footer { background-color: black; color: violet; padding: 20px 0; text-align: center; letter-spacing: 5px; text-indent: 5px; }: html부터 틀을 잡은 후 css로 꾸며주기 !! 순서대로 차근차근 해야 했던 실습이다. 아직 padding이랑 margin이 어렵다
'Web Frontend > HTML_CSS' 카테고리의 다른 글
[ifp_html_css] CSS diner 01 ~ 10 (0) 2022.06.03 [ifp_css_html] 나누기 (0) 2022.06.03 [ifp_html_css] Statue (0) 2022.06.02 [ifp_html_css] Kiwi & Strawberry (0) 2022.06.02 [ifp_html_css_study] Orange (0) 2022.06.02 다음글이전글이전 글이 없습니다.댓글
스킨 업데이트 안내
현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)