분류 전체보기 (894) 썸네일형 리스트형 8장 실습 3 DOCTYPE html> CSS 레이아웃 - 2단 레이아웃 * { margin:0; padding:0; box-sizing: border-box; } #container { width:1200px; /*내용 전체의 너비*/ margin:20px auto; /*내용 화면 가운데 배치하도록 좌우 마진 auto */ } #header { width:100%; /*부모 요소의 너비와 똑같게 */ height:120px; /*헤더의 높이 */ background-color:#acacac; } #sidebar{ width:300px; /*사이드바의 너비*/ height:600px; /*사이드바의 높이*/ background-color:#e9e9e9; float:left; /*왼쪽으로 플로팅*/ } #contents.. 8장 예제 - 수평 내비게이션 만들기 DOCTYPE html> 수평 내비게이션 만들기 * {box-sizing:border-box;} /* 모든 요소에 테두리까지 포함한 너빗값 지정 */ nav ul {list-style:none;} /* 불릿이나 숫자 번호 없앰*/ nav ul li{ display:inline-block; /*인라인 레벨 요소와 블록 레벨 요소 모두 지정 */ padding:20px; /*패딩값 20px */ margin:0 20px; /*마진값 20px */ border:1px solid #222; /*메뉴에 테두리 지정 */ } menu 1 menu 2 menu 3 menu 4 결과: 수평 내비게이션 만들기 8장 실습 2 DOCTYPE html> 박스 모델 영역에 여백 추가하고 중앙에 배치하기 body {background-color:black;} #container { background-color:white; width:600px; padding:20px; margin:20px auto; } div { border:1px solid #222; /*테두리 */ padding:20px; /*패딩*/ margin-bottom:30px;/*마진*/ } #description { border-top-left-radius:30px; border-top-right-radius:30px; } #package { border-bottom-left-radius:30px; border-bottom-right-radius:30px; } t.. 8장 예제 -마진중첩 이해하기 DOCTYPE html> 마진중첩이해하기 div { width:200px; height:100px; margin:30px; } #box1 {background:red;} #box2 {background:blue;} #box3 {background:purple;} 결과 :마진중첩이해하기 8장 실습 1 DOCTYPE html> 박스모델 영역의 크기 정하고 테두리 그리기 table, th, td { border:1px solid #ccc; border-collapse: collapse; } th, td { padding:10px 20px; } div { border:1px solid #222; /* 테두리 */ } #container { width:600px; /* 컨테이너의 너비 */ border:solid; } 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다. 혈액순환,감기예방등에 좋은 것으로 알려져 있다. 레드향 샐러드 레시피 재료:레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g 드레싱:올리브유.. 7장 마무리 문제 4 DOCTYPE html> 마무리 문제 4 #container { /* 전체 콘텐츠를 감싸는 div */ width:650px; /* 너비 */ margin:0 auto; /* 가로로 중앙에 배치 */ padding:5px; /* 테두리와 내용 사이의 패딩 여백 */ } #check { /* 텍스트 부분을 감싸는 div */ width:640px; /* 너비 - 그림 너비 값에 맞춤 */ border:1px solid #ccc; /* 테두리 */ } h1 { color: white; /* 글자색 */ font-size: 1em; /* 글자 크기 */ background: #222; /* 배경색 */ margin: 0; /* 제목과 다른 요소 간의 마진 여백 */ padding: 10px; /* 테두리와 제.. 7장 마무리 문제 3 DOCTYPE html> 마무리문제 3 table { caption-side:bottom; border:1px solid black; border-collapse:collapse; } td,th { padding:10px; border:1px solid black; } .heading { background-color:#eee; } 2019 국민 독서실태 구분 성인 독서자 종이책 6.1권 0.2권 전자책 1.2권 7.1권 오디오북 0.2권 5.5권 결과 :마무리문제 3 7장 마무리 문제 2 DOCTYPE html> 마무리 문제 2 .container { width:300px; height:70px; margin:0 auto; background-color:#444; } h1 { text-align: center; line-height: 70px; color:white; text-shadow:3px 2px 5px black; } 웹 개발 기초 결과 :마무리 문제 2 이전 1 ··· 107 108 109 110 111 112 다음