전체 글 (894) 썸네일형 리스트형 10장 마무리 문제 2 DOCTYPE html> 마무리 문제 2 * { box-sizing:border-box; /*테두리까지 포함해서 너빗값 지정*/ } .top-menu { margin:50px auto; padding:0; list-style:none; width:605px; height:35px; box-shadow:0 3px 4px #8b8b8b; background-color:#dadada; } .top-menu li { float:left; border-right:1px solid #929292; } .top-menu li a:link { /*방문하지 않은 링크에 스타일 적용*/ color:black; text-decoration:none; text-align:center; display:block; width:1.. 10장 마무리 문제 1 DOCTYPE html> 연습문제 1 img { margin-right:50px; border:1px solid #ccc; box-shadow: 2px 2px 5px #ccc; } img:first-of-type { border: 2px solid #f00; } 10장 실습 3 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 { line-height.. 10장 예제 - 가상요소를 사용해 스타일 적용하기 DOCTYPE html> 가상 요소를 사용해 스타일 적용하기 li.new::after { content:"NEW!!"; font-size:x-small; padding :2px 4px; margin:0 10px; border-radius:2px; background:#f00; color:#fff; } .container { width:960px; margin:0 auto; } ul li { margin:15px; } 제품 목록 제품 A 제품 B 제품 C 제품 D 10장 예제 - 열에 번갈아 가며 배경색 적용하기 DOCTYPE html> 열에 번갈아 가며 배경색 적용하기 #container { text-align:center; color:#2b2b2b; } table, tb, th { border:1px solid #ccc; } table { width:200px; margin:0 auto; border-collapse:collapse; /*표와 셀의 테두리를 합쳐 하나로 표시 */ } td { text-align:left; padding:10px; padding-left:20px; } table tr:nth-of-type(2n+1) { /* 홀수 번째 열에만 스타일 적용 */ background:lightgray; color:black; } 웹 개발 HTML CSS Javascirpt React node.js 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.. 이전 1 ··· 103 104 105 106 107 108 109 ··· 112 다음
