1. box-sizing 속성들에 대하여 설명하시오.
- border-box : The border size cant go out from the original size limitation.
- content-box : defalt value.
2. margin 과 padding의 차이는?
- margin : making distance
- padding : making bigger
3. 아래의 속성에 대하여 설명하시오.
- background-image : setting image on background
- background-size : setting the size of the background image
- background-repeat : setting how does the image repeat
4.요안도라 header 부분을 구현하시오.
<!-- code --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>JOANDORA</title> <style> #banner { width: 600px; height: 150px; background-image: url("images/bg2.png"); text-align: right; padding: 1em; font-size: 1.5em; font-weight: bold; text-shadow: 3px 3px #000000; } #banner ul { padding-top: 1em; } #banner ul:nth-child(1) li { list-style: none; } #banner ul:nth-child(1) li:nth-child(1) { color: ivory; font-size: 2em; } #banner ul:nth-child(1) li:nth-child(2) { color: yellow; } #header_buttons { width: 616px; height: 30px; background-color: black; padding: 1em; } #header_buttons ul { line-height: 0; } #header_buttons ul li { display: inline; padding: 1.8em; } #header_buttons ul li a:link, #header_buttons ul li a:visited { color: white; text-decoration: none; } #header_buttons ul li a:hover { color: blue; } </style> </head> <body> <div id="header"> <div id="banner"> <ul> <li>Joandora</li> <li>가장 제주다운 수산리집</li> </ul> </div> <div id="header_buttons"> <ul> <li><a href="#">이용 안내</a></li> <li><a href="#">객실 소개</a></li> <li><a href="#">예약 방법</a></li> <li><a href="#">예약하기</a></li> </ul> </div> </div> <div id="content"></div> <div id="footer"></div> </body> </html>
Brave but clumsy