css (72) 썸네일형 리스트형 10장 예제- 위치에 따라 자식 요소 선택하기 DOCTYPE html> 위치에 따라 자식 요소 선택하기 .container{ width:960px; margin 0 auto; } .navi { width:960; height:60px; padding-bottom:10px; border-bottom:2px solid #ccc; } .navi ul { list-style:none; padding-top:10px; padding-bottom:5px; } .navi ul li { display:inline-block; width:150px; padding:10px; } .navi a:link, .navi a:visited { font-size:14px; padding:10px; text-decoration:none; } .navi a:hover, .navi.. 10장 예제 - not 선택자로 라디오 필드를 제외한 텍스트 필드 선택하기 DOCTYPE html> not 선택자로 라디오 필드를 제외한 텍스트 필드 선택하기 .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 { display:inline-block; width:150px; padding:10px; } .navi a:link, .navi a:visited { font-size:14px; padding:10px; text-decoration:none; } .n.. 10장 예제 - 선택된 라디오 버튼의 스타일 적용하기 DOCTYPE html> 선택된 라디오 버튼의 스타일 적용하기 #signup input:checked+label { /*input 요소에 checked 속성이 추가되었을때 label 요소의 스타일 */ color:red; /*글자색을 빨간색으로 지정*/ font-weight:bold; /*글꼴을 굵게 지정 */ } #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-weig.. 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.. 이전 1 2 3 4 5 6 7 8 9 다음
