본문 바로가기

TUTORIAL


웹 표준 사이트 만들기(2019)

웹 표준 사이트 만들기(2019) - layout06 웹 표준 사이트 만들기(2019) - layout06 웹 표준 사이트를 만들기 위한 여섯 번째 시간입니다. 가장 기본이 되는 레이아웃 연습니다. 영상과 함께 따라하시면 도움이 됩니다. 샘플 보기 소스 다운 완성 소스 index.html style.css header banner contents footer header banner contents footer * { margin: 0; padding: 0; } #wrap { text-align: center; font-size: 30px; color: #fff; } #header { height: 140px; line-height: 140px; background: #ffe1e4; } #banner { height: 450px; line-height: 4..
웹 표준 사이트 만들기(2019) - layout05 웹 표준 사이트 만들기(2019) - layout05 웹 표준 사이트를 만들기 위한 다섯 번째 시간입니다. 가장 기본이 되는 레이아웃 연습니다. 영상과 함께 따라하시면 도움이 됩니다. 샘플 보기 소스 다운 완성 소스 index.html style.css header banner content footer header banner content footer * { margin: 0; padding: 0; } #wrap { width: 100%; height: 1000px; color: #fff; font-size: 30px; text-align: center; text-transform: uppercase; } #header-wrap { width: 100%; background-color: #8d6e63..
웹 표준 사이트 만들기(2019) - layout04 웹 표준 사이트 만들기(2019) - layout04 웹 표준 사이트를 만들기 위한 네 번째 시간입니다. 가장 기본이 되는 레이아웃 연습니다. 영상과 함께 따라하시면 도움이 됩니다. 샘플 보기 소스 다운 완성 소스 index.html style.css header nav side content1 content2 footer header nav side content1 content2 footer body { background-color: #ffe0b2; } #wrap { width: 1000px; height: 900px; margin: 0 auto; font-size: 30px; color: #fff; text-align: center; text-transform: uppercase; } .heade..
웹 표준 사이트 만들기(2019) - layout03 웹 표준 사이트 만들기(2019) - layout03 웹 표준 사이트를 만들기 위한 세 번째 시간입니다. 가장 기본이 되는 레이아웃 연습니다. 영상과 함께 따라하시면 도움이 됩니다. 샘플 보기 소스 다운 완성 소스 index.html style.css side header contents footer side header contents footer body { background-color: #d1c4e9; } #wrap { width: 1000px; height: 900px; margin: 0 auto; font-size: 40px; color: #fff; text-align: center; } .side { float: left; width: 300px; height: 900px; line-heig..
웹 표준 사이트 만들기(2019) - layout02 웹 표준 사이트 만들기(2019) - layout02 웹 표준 사이트를 만들기 위한 첫 번째 시간입니다. 가장 기본이 되는 레이아웃 연습니다. 영상과 함께 따라하시면 도움이 됩니다. 샘플 보기 소스 다운 완성 소스 index.html style.css HEADER NAV SIDE_LEFT CONTENTS SIDE_RIGHT FOOTER HEADER NAV SIDE_LEFT CONTENTS SIDE_RIGHT FOOTER body { background-color: #b3e5fc; } #wrap { width: 1000px; height: 900px; margin: 0 auto; font-size: 40px; color: #fff; text-align: center; } #header { width: 10..
웹 표준 사이트 만들기(2019) - layout01 웹 표준 사이트 만들기(2019) - layout01 웹 표준 사이트를 만들기 위한 첫 번째 시간입니다. 가장 기본이 되는 레이아웃 연습니다. 영상과 함께 따라하시면 도움이 됩니다. 샘플 보기 소스 다운 완성 소스 index.html style.css HEADER NAV SIDE CONTENTS FOOTER HEADER NAV SIDE CONTENTS FOOTER body { background: #c8e6c9; } #wrap { width: 1000px; height: 900px; margin: 0 auto; color: #fff; font-size: 40px; text-align: center; } #header { width: 1000px; height: 100px; line-height: 100p..