분류 전체보기 (894) 썸네일형 리스트형 10장 예제 - 앵커 대상에 스타일 적용하기 DOCTYPE html> 앵커 대상에 스타일 적용하기 .container { width:960px; margin: 0 auto; } .navi { width:960px; height:60px; padding-bottom:10px; border-bottom:2px solid #ccc; } .navi ul{ list-style:none; padding-top:10px; padding-bottom:5px; } .navi ul li { float:left; /*요소를 문서의 왼쪽에 배치*/ width:150px; padding:10px; } .navi a:link, .navi a:visited { /*방문한 링크와 방문하지 않은 링크 설정*/ display:block; font-size:14px; color:#.. 10장 예제 - 가상 클래스를 사용해 링크 스타일 적용하기 DOCTYPE html> 가상 클래스 선택자를 사용해 링크 스타일 적용하기 .container { width:960px; margin: 0 auto; } .navi { width:960px; height:60px; padding-bottom:10px; border-bottom:2px solid #ccc; } .navi ul{ list-style:none; padding-top:10px; padding-bottom:5px; } .navi ul li { float:left; /*요소를 문서의 왼쪽에 배치*/ width:150px; padding:10px; } .navi a:link, .navi a:visited { /*방문한 링크와 방문하지 않은 링크 설정*/ display:block; font-size:1.. 10장 실습 2 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: 10px; } #signup ul li { li.. 10장 예제 - [속성^=값]연산자 / [속성$=값]연산자 /[속성*=값]연산자 1. [속성^=값]연산자 DOCTYPE html> 속성값의 시작 부분이 일치하는 요소에 스타일 적용하기 ul { list-style:none;} li { display:inline-block; margin:10px; } li a{ padding: 5px 20px; font-size:14px; color:blue; text-decoration:none; } a[title^=eng] { /*속성값이 "eng"로 시작하는 a 요소를 찾는 선택자 */ background:url("us.png") no-repeat left center; } a[title^=jap] { /*속성값이 "jap"로 시작하는 a 요소를 찾는 선택자 */ background:url("jp.png") no-repeat left center.. 10장 예제 - [속성~=값]선택자/ [속성 | 값] 선택자 1. [속성~= 값] 선택자 DOCTYPE html> 특정 속성값이 포함된 요소에 스타일 적용하기 ul{list-style:none;} li { display:inline-block; margin:10px; } li a { padding: 5px 20px; font-size:14px; color:blue; text-decoration:none; } .flat { background:#eee; border:1px solid #222; } a[class~="button"] { box-shadow:rgba(0,0,0,0.4) 4px 4px; border-radius:5px; border:1px solid #222; } 메뉴 1 메뉴 2 메뉴 3 메뉴 4 2. [속성 |=값]연산자 DOCTYPE html> ti.. 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원/.. 이전 1 ··· 104 105 106 107 108 109 110 ··· 112 다음