css (72) 썸네일형 리스트형 9장 실습1 DOCTYPE html> 문서 전체에 배경 이미지 넣기 body { background:url("bg5.jpg")left top no-repeat fixed; background-size:cover; } h1 { margin-top:150px; font-size:80px; text-align:center; color:#fff; text-shadow:2px 2px #000; } Do it! 9장 예제 - 배경 이미지 크기 조절하기 DOCTYPE html> 배경 이미지 크기 조절하기 #container { width:1100px; margin:50px auto; } .box { float:left; border:1px solid #222; width:300px; height:300px; margin:20px; background:url("bg2.png") no-repeat left top; /*배경 이미지를 반복하지 않고 왼쪽 상단에 위치 */ } #bg1 {background-size:auto;} /*원래 배경 이미지 크기로 표시 */ #bg2 {background-size:200px;} /*너비는 200px 높이는 자동 계산 */ #bg3 {background-size:50%;} /*너비는 요소 기준으로 50%,높이는 자동 계산.. 9장 예제 - 배경 이미지 배치하고 고정하기 DOCTYPE html> 배경 이미지 배치하고 고정하기 body { background-image:url("bg2.png"); /*문서 전체 배경 이미지 */ background-repeat:no-repeat; /*배경 이미지 반복 안함 */ background-position:right top; /*배경 이미지를 오른쪽 상단에 위치 */ background-attachment:fixed; /*배경 이미지 고정 */ } div { width:400px; height:250px; padding: 20px; border: 20px solid rgba(204, 204, 204, 0.493); margin-bottom:20px; overflow:auto; background-image:url("bg3.png").. 9장 예제 - 불릿 대신 배경 이미지 사용하기 DOCTYPE html> 불릿 대신 배경 이미지 사용하기 ul { list-style-type:none; /*불릿 없앰 */ margin-left:-30px; /*왼쪽 여백 -30px */ } li { background-image:url("book-icon.png"); /*배경 이미지 삽입*/ background-repeat:no-repeat; /*배경 이미지 반복 안함 */ background-position:left center; /*배경 이미지 위치 */ padding-left: 50px; line-height: 40px; } 이지스 퍼블리싱 회사소개 도서 자료실 동영상강의 8장 마무리 문제 3 DOCTYPE html> 연습문제 3 a:link, a:visited { color:black; text-decoration: none; } a:hover { background-color:#000; color:#fff; } nav ul { list-style-type:none; } nav ul li { float:left; display:block; padding:10px 20px; background-color:#ccc; } 메뉴1 메뉴2 메뉴3 메뉴4 8장 마무리 문제 2 DOCTYPE html> 마무리문제 2 section{ width:800px; margin:0 auto; } h2 { font-size:1.5em; } h3 { font-size:1.0em; } p{ line-height:20px; font-size:12px; } article { float:left; width:350px; height:200px; margin:10px; padding:10px; border:1px solid #ccc; } footer { clear:left; width:100%; height:50px; background-color:#222; } footer>p { color:white; font-size:0.9em; text-align:center; line-height:50px; .. 8장 마무리 문제 1 DOCTYPE html> 마무리 문제 1 #circle { border-radius:50%; border:1px solid #ccc; box-shadow:5px 5px 30px 2px #000 } 8장 실습 5 DOCTYPE html> CSS float 속성 * { box-sizing: border-box; margin:0; padding:0; } #contents { background:url("bg.jpg") no-repeat; background-size:cover; width:800px; height:500px; margin:0 auto; position:relative; } h1 { color:#fff; font-size:120px; text-shadow: 2px 3px 0 #000; position:absolute; right:100px; bottom:100px; } CSS3 결과: CSS float 속성 이전 1 ··· 4 5 6 7 8 9 다음
