css (72) 썸네일형 리스트형 10장 예제 -[속성]선택자 /[속성=속성값]선택자 1. [속성] 선택자 DOCTYPE html> 요소 중에서 링크가 있는 요소만 스타일 적용하기 ul { list-style:none; } li { width:120px; display:inline-block; /*인라인 레벨요소와 블록 레벨 요소의 속성을 모두 가지고 있음*/ margin :10px; } li a{ padding: 5px 20px; font-size:14px; text-decoration:none; /*텍스트에 줄을 표시하지 않음 */ font-size:bold; } a[href] { /*href 속성이 있는 a 요소를 찾는 선택자 */ background:yellow; /*배경색으로 노란색으로 */ border:1px solid #ccc; /*테두리를 지정 */ font-weight:n.. 10장 실습 1 DOCTYPE html> 폼에서 레이블 요소 정렬하기 *{ margin:0; padding:0; } body{ background:#ccc; padding:20px; } #signup { background:#fff; border:1px solid #222; border-radius:5px; /*둥근 테두리 만들기 */ padding:20px; width:400px; margin:30px auto; } #signup fieldset { /*하위 연산자 - 상위요소 하위요소*/ border:1px solid #ccc; margin-bottom:30px; } #signup legend { font-size:16px; font-weight:bold; padding-left:5px; padding-bottom:.. 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; } h1+p { background-color:#222; /*배경색은 검은색으로 */ color:#fff; /* 글자색은 흰색으로 */ } 예약방법&이용요금 아직 온라인 예약 신청이 준비되지 않았습니다. 전화(000-0000-0000)로 문의하시기 바랍니다. 가족실(2~4인):60,000원/일 도미토리(4인 공용):25,000원/.. 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%); } 이전 1 ··· 3 4 5 6 7 8 9 다음
