본문 바로가기

전체 글

 (894)
10장 예제 - 하위 선택자/ 자식 선택자 1. 하위 선택자를 사용하여 글자색 적용하기 DOCTYPE html> 하위 선택자를 사용하여 글자색 적용하기 body { background-color:#eee; } section { width:600px; margin: 20px auto; } p { width:500px; padding:10px; background-color:#fff; border:1px solid #ccc; line-height:2; } section p {color:blue;} /*section 요소의 모든 하위 p 요소를 파란색 글자로 지정 */ 예약방법 & 사용 요금 아직 온라인 예약 신청이 준비되지 않았습니다.전화(000-0000-0000)로 문의하시기 바랍니다. 가족실(2~4인):60,000원/일 도미토리(2~4인):25,..
9장 마무리 문제 3 DOCTYPE html> 마무리 문제 3 body { background-color:#02233b; } #container { width: 600px; height:700px; margin:0px auto; border:1px dotted gray; padding:20px; background:#fff url("mic.png") no-repeat right bottom; } img{ margin:30px 10px 30px 180px; } h1 { background-color:#004344; color:white; text-align:center; padding:20px; } h2 { text-align:center; font-style:italic; margin-bottom:50px; } h3{ col..
9장 마무리 문제 2 DOCTYPE html> 마무리 문제 2 .container { width:500px; padding:10px; border:1px solid #ccc; background:rgb(0,0,0); color:rgb(255,255,255); } h1{ font-size:17px; } p{ font-size:16px; line-height:25px; } 웹 디자인 트렌드를 따라잡는 비법 대공개 그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다.
9장 마무리 문제 1 마무리문제 1 body{ color:white; background:url('bg1.jpg') repeat-x left bottom fixed; background-color:gray; } h1 { margin-top:50px; font-size: 20px; } p { font-size: 16px; line-height: 25px; } 웹 디자인 트렌드를 따라잡는 비법 대공개! 그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다.
9장 예제- 그러데이션을 사용해 패턴 만들기 DOCTYPE html> 그러데이션을 사용해 패턴 만들기 div { width:500px; height:300px; border:1px solid #222; border-radius:10px; margin-bottom:30px; } .grad1{ background:red; background:repeating-linear-gradient(yellow,yellow 20px,red 20px,red 40px); } .grad2{ background:#ccc; background:repeating-radial-gradient(circle,white,white 10%,#ccc 10%,#ccc 20%); }
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")..

티스토리툴바