css (72) 썸네일형 리스트형 8장 예제 - position 속성으로 요소 위치 저장하기 DOCTYPE html> position 속성으로 요소 위치 지정하기 * { margin:0; padding:0; } p { width:300px; border:3px solid balck; padding:10px; background-color: beige; } #static {position:static;} #relative-1 { position:relative;} #relative-2 { position:relative; /*포지셔닝- relatvie*/ left:100px; /*왼쪽에서 100px 떨어지게 */ top:-50px; /*위쪽에서 -50px 떨어지게 (위로이동)*/ } #fixed { width:100px; height:100px; background-color:#222; posit.. 8장 예제 - 텍스트 요소 자유롭게 배치하기 DOCTYPE html> 텍스트 요소 자유롭게 배치하기 *{ margin:0; /* 마진 초기화 */ padding:0; /* 패딩 초기화 */ } p { width:300px; /* 너비 - 300px */ border:1px solid #ccc; /* 테두리 - 1픽셀 회색 실선 */ padding:10px; /* 네방향 패딩 10px */ } #pos1 { position:absolute; /*포지셔닝- absolute*/ left:50px; /*왼쪽에서 50px 떨어지게 */ top:50px; /*위쪽에서 50px 떨어지게 */ } #pos2 { position:absolute; right:100px; top:100px; } #pos3 { position:absolute; left:100px; b.. 8장 실습 4 DOCTYPE html> 3단 레이아웃 만들기 #container { width: 1200px; /*내용 전체의 너비*/ margin: 20px auto; /*내용 화면 가운데 배치하도록 좌우 마진 auto */ } #header { width: 100%; /*부모 요소의 너비와 똑같게 */ height: 120px; /*헤더의 높이*/ background-color: #acacac; } #left-sidebar { width: 250px; /*사이드바의 너비*/ height: 600px; /*사이드바의 높이*/ background-color: #e9e9e9; float: left; /*왼쪽으로 플로팅 */ } #contents { width: 800px; /*본문 너비*/ height: 600px; /.. 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 드레싱:올리브유.. 이전 1 ··· 5 6 7 8 9 다음
