DOCTYPE html> HTML - Responsive Web body { font-size: 2em; font-weight: bold; text-align: center; line-height: 2.5; } #header {background-color: #faa;} #nav {background-color: #afa;} #sidebar {background-color: #aaf;} #content {background-color: #ffa; height: 300px;} #footer {background-color: #faf;} /* ----------------------------------------------- */ /* 화면 크기에 따라 총 3가지 형태의 레이아웃을 출력하는데 */ /* 반..

DOCTYPE html> CSS - transform property #container > div { float: left; width: 200px; height: 200px; margin: 50px; border: 5px solid black; font-size: 2em; font-weight: bold; text-align: center; line-height: 200px; } #container > div > div { width: 100%; height: 100%; background-color: yellowgreen; } /* 이동 */ #translate { transform: translate(30px, 50px); transform: translate(-50%, -50%); /* 백분율 ..

DOCTYPE html> CSS - animation property #container { width: 800px; height: 600px; border: 5px solid black; margin: 20px auto; } #container > div { width: 100px; height: 100px; background-color: yellowgreen; position: relative; top: 0; left: 0; /* 애니메이션 효과 적용 */ animation-name: effect; /* 애니메이션 진행 시간 */ animation-duration: 1s; /* 애니메이션 반복 횟수 */ animation-iteration-count: 2; animation-iteration-cou..

DOCTYPE html> Page Title #box1 { width: 400px; height: 400px; margin: 20px auto; background-color: yellowgreen; /* transition 속성 */ /* - 스타일 속성 값이 바뀔 때 */ /* 시간에 따라 서서히 변화되도록 */ /* 지정하는 속성 */ /* 진행 시간 */ transition-duration: 1000ms; /* 1s = 1000ms */ /* 적용 속성 */ transition-property: width, height; /* 대기 시간 */ transition-delay: 1s; /* 속도 함수 */ transition-timing-function: ease; transition-timing-f..

DOCTYPE html> HTML - Fluid Layout body { font-size: 2em; font-weight: bold; text-align: center; line-height: 2.5; } #header {background-color: #faa;} #nav {background-color: #afa;} #sidebar {background-color: #aaf; height: 500px; line-height: 500px;} #content {background-color: #ffa; height: 500px; line-height: 500px;} #footer {background-color: #faf;} /* ----------------------------------------..

DOCTYPE html> File01 - One True Layout /* 레이아웃의 모든 구성들을 포함하고 크기와 위치를 결정하는 요소 */ #container { /* 모든 영역의 너비를 고정 */ width: 1080px; /* 브라우저 중앙에 배치 */ margin: 0 auto; background-color: darkgray; font-size: 2em; font-weight: bold; text-align: center; line-height: 2.5; } /* 헤더 영역 */ #header {background-color: #faa;} /* 네비게이션 영역 */ #nav {background-color: #afa;} /* 사이드바 + 컨텐츠 영역 */ #wrap {background-col..