전체 글 (894) 썸네일형 리스트형 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 속성 8장 예제 - position 속성으로 요소 위치 저장하기 DOCTYPE html> position 속성으로 요소 위치 지정하기 * { margin:0; padding:0; } p { width:300px; border:3px solid balck; padding:10px; background-color: beige; } #static {position:static;} #relative-1 { position:relative;} #relative-2 { position:relative; /*포지셔닝- relatvie*/ left:100px; /*왼쪽에서 100px 떨어지게 */ top:-50px; /*위쪽에서 -50px 떨어지게 (위로이동)*/ } #fixed { width:100px; height:100px; background-color:#222; posit.. 8장 예제 - 텍스트 요소 자유롭게 배치하기 DOCTYPE html> 텍스트 요소 자유롭게 배치하기 *{ margin:0; /* 마진 초기화 */ padding:0; /* 패딩 초기화 */ } p { width:300px; /* 너비 - 300px */ border:1px solid #ccc; /* 테두리 - 1픽셀 회색 실선 */ padding:10px; /* 네방향 패딩 10px */ } #pos1 { position:absolute; /*포지셔닝- absolute*/ left:50px; /*왼쪽에서 50px 떨어지게 */ top:50px; /*위쪽에서 50px 떨어지게 */ } #pos2 { position:absolute; right:100px; top:100px; } #pos3 { position:absolute; left:100px; b.. 8장 실습 4 DOCTYPE html> 3단 레이아웃 만들기 #container { width: 1200px; /*내용 전체의 너비*/ margin: 20px auto; /*내용 화면 가운데 배치하도록 좌우 마진 auto */ } #header { width: 100%; /*부모 요소의 너비와 똑같게 */ height: 120px; /*헤더의 높이*/ background-color: #acacac; } #left-sidebar { width: 250px; /*사이드바의 너비*/ height: 600px; /*사이드바의 높이*/ background-color: #e9e9e9; float: left; /*왼쪽으로 플로팅 */ } #contents { width: 800px; /*본문 너비*/ height: 600px; /.. 이전 1 ··· 106 107 108 109 110 111 112 다음
