- index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="week2.css"> <title>About Me</title> </head> <body> <div class="wrapper"> <div class="header"> <img src="./images/halloween-profile.png" alt=" " style="margin:40px auto 0px; padding:0px auto"> <h1>Jack-O'-Lantern</h1> <div style="color: white; background-color: rgba(0,0,0,0.7); width: 400px; text-align: center; height: 110px; margin:auto;"> 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. </div> </div> <div class="contents"> <div class="section"> <h2>Information</h2> <img src="./images/icon-information.png" alt=" " style="float:right;"> <ul> <li>jack@veamcamp.com</li> <li>000-3234-2344</li> <li>Seoul,korea</li> </ul> </div> <div class="section_skills"> <h2>Skills</h2> <img src="./images/icon-skills.png" alt=" " style="float:right;"> <ul> <li>Photoshop</li> <li>Web Front-End</li> <li>Education</li> </ul> </div> </div> <div class="footer"> HAPPY HALLOWEEN </div> </div> </body> </html> - style.css
body{ margin: 10px; /*외부 여백, 테두리 위*/ padding: 0px; /*내부 여백*/ background-image: url(./images/halloween-background.gif); } img{ margin: auto; padding: auto; /*가운데*/} h1{ color: orchid; } .header{ background-image: url(./images/halloween-header-bg.png); width: 780px; height: 400px; margin: auto; border: none; /*테두리 없음*/ text-align: center; } h2{ color:#ff4500;} ul{ list-style-image: url(./images/icon-jack2.png); list-style-position: insdie; /*들여쓰기?*/ } li:hover{ color: orange; list-style-image: url(./images/icon-jack.png); } .section{ width: 710px; height: 200px; background-color: white; margin: auto; padding: 15px ; text-align: left; border: 15px solid #dcdcdc; border-bottom: 8px; /*바닥 테두리*/ } .section_skills{ width: 710px; height: 200px; background-color: white; margin: auto; padding: 15px; border: 15px solid #dcdcdc; text-align: left; } .footer{ width: 780px; margin: auto; padding: 2px; border: none; color: orchid; background-color: rgba(0,0,0,0.7); text-align: center; }
가오리의 코딩일기