“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
💜 웹디자인 기능사 실기 연습
웹디자인 기능사 실기 연습용으로 레이아웃을 짜보았습니다.
기본 레이아웃틀만 하나씩 정리해보겠습니다.
A-1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹디자인 기능사 실기 A유형 1번 레이아웃</title>
<link rel="stylesheet" href="/webd/css/webd.css">
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 1200px;
margin: 0 auto;
}
.header {
display: flex;
width: 100%;
height: 100px;
}
.header .logo {
width: 30%;
height: 100px;
background-color: #5fb1aa;
}
.header .nav {
width: 70%;
height: 100px;
background-color: #61c7be;
}
.slider {
width: 100%;
height: 300px;
background-color: #498f89;
}
.section {
width: 100%;
display: flex;
height: 200px;
}
.section .sec1 {
width: 33.333%;
background-color: #359189;
}
.section .sec2 {
width: 33.333%;
background-color: #27bdb0;
}
.section .sec3 {
width: 33.333%;
background-color: #154b46;
}
.footer {
/* width: 100%; */
height: 100px;
display: flex;
}
.footer .foot1 {
width: 20%;
background-color: #8bbfbb;
}
.footer .foot2 {
width: 60%;
background-color: #1c756f;
}
.footer .foot3 {
width: 20%;
background-color: #21beb4;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<div class="logo">로고</div>
<div class="nav">메뉴</div>
</div>
<div class="slider">이미지 슬라이드</div>
<div class="section">
<div class="sec1">공지사항</div>
<div class="sec2">배너</div>
<div class="sec3">바로가기</div>
</div>
<div class="footer">
<div class="foot1">로고</div>
<div class="foot2">COPYRIGHT</div>
<div class="foot3">SNS</div>
</div>
</div>
</body>
</html>
일단 기본 틀만 만들어 정리했습니다.
width값은 1200px로 가운데정렬 해주고
구조는 wrap안에 header, slider, section, footer로 나누어 작업해줬습니다.
B-1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹디자인 기능사 실기 B유형 1번 레이아웃</title>
<link rel="stylesheet" href="/webd/css/webd.css">
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 700px;
/* background-color: #ccc; */
}
#header {
width: 100%;
height: 100px;
background-color: #60a2a2;
}
#header .container {
display: flex;
}
#header h1 {
width: 20%;
background-color: #7bbdbd;
}
#header nav {
width: 80%;
background-color: #6fbebe;
}
#slider {
width: 100%;
height: 300px;
/* background-color: #b0c958; */
}
#contents {
width: 100%;
height: 200px;
/* background-color: #daddd0; */
}
#contents .container {
display: flex;
}
#contents .content1 {
width: 33.3333%;
background-color: #58b5b5;
}
#contents .content2 {
width: 33.3333%;
background-color: #1c5757;
}
#contents .content3 {
width: 33.3333%;
background-color: #33bdbd;
}
#footer {
width: 100%;
height: 100px;
background-color: #52b0b0;
}
#footer .container {
display: flex;
}
#footer .footer1 {
width: 20%;
background-color: #94cdcd;
}
#footer .footer2 {
width: 80%;
}
#footer .footer2-1 {
width: 100%;
height: 50px;
background-color: #49e0e0;
}
#footer .footer2-2 {
width: 100%;
height: 50px;
background-color: #11b0b0;
}
.container {
width: 1200px;
height: inherit;
margin: 0 auto;
background-color: #50cece;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="container">
<h1>로고</h1>
<nav>메뉴</nav>
</div>
</div>
<div id="slider">
<div class="container">이미지 슬라이드</div>
</div>
<div id="contents">
<div class="container">
<div class="content1">공지사항</div>
<div class="content2">배너</div>
<div class="content3">바로가기</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="footer1">로고</div>
<div class="footer2">
<div class="footer2-1">하단메뉴</div>
<div class="footer2-2">COPYRIGHT</div>
</div>
</div>
</div>
</div>
</body>
</html>
A-1과 크게 다를 건 없습니다.
비슷하게 구역을 나눠주고
안에 container로 한번 더 구역을 잡아줘
header와 footer는 브라우저 전체 넓이인 100%가 되게 해줍니다.
C-1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹디자인 기능사 실기 C유형 1번 레이아웃</title>
<link rel="stylesheet" href="/webd/css/webd.css">
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 1000px;
height: 650px;
background-color: #ccc;
display: flex;
flex-wrap: wrap;
}
.aside {
width: 20%;
}
.aside h2 {
width: 100%;
height: 100px;
background-color: #9cce37;
}
.aside nav {
width: 100%;
height: 550px;
background-color: #83ad2f;
}
.main {
width: 80%;
}
.slider {
width: 100%;
height: 350px;
background-color: #8c9c6c;
}
.contents {
display: flex;
width: 100%;
height: 200px;
background-color: #b8d67b;
}
.content1 {
width: 33.333%;
background-color: #799247;
}
.content2 {
width: 33.333%;
background-color: #8fcd14;
}
.content3 {
width: 33.333%;
background-color: #799247;
}
.footer {
width: 100%;
height: 100px;
display: flex;
}
.footer1 {
width: 20%;
height: 100%;
background-color: #becca3;
}
.footer2 {
width: 80%;
height: 100%;
background-color: #a1ba6f;
}
.footer2-1 {
width: 100%;
height: 50%;
background-color: #9ec949;
}
.footer2-2 {
width: 100%;
height: 50%;
background-color: #5e7b26;
}
</style>
</head>
<body>
<div class="wrap">
<div class="aside">
<h2>로고</h2>
<nav>메뉴</nav>
</div>
<div class="main">
<div class="slider">이미지 슬라이드</div>
<div class="contents">
<div class="content1">공지사항</div>
<div class="content2">배너</div>
<div class="content3">바로가기</div>
</div>
<div class="footer">
<div class="footer1">로고</div>
<div class="footer2">
<div class="footer2-1">하단메뉴</div>
<div class="footer2-2">COPYRIGHT</div>
</div>
</div>
</div>
</div>
</body>
</html>
c는 a와 비슷한 구조인데
왼쪽 정렬에
사이드에 메뉴가 있는 형식입니다.
wrap안에 크게 2구역으로 나누어 작업해줬습니다.
D-1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹디자인 기능사 실기 D유형 1번 레이아웃</title>
<link rel="stylesheet" href="/webd/css/webd.css">
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
display: flex;
flex-wrap: wrap;
}
#aside {
width: 200px;
height: 850px;
background-color: #d698db;
}
#aside h1 {
width: 100%;
height: 100px;
background-color: #e482eb;
}
#aside nav {
width: 100%;
height: 750px;
background-color: #c95bd1;
}
#main {
width: calc(100% - 200px);
height: 850px;
background-color: #c389c7;
}
#slider {
width: 100%;
height: 400px;
background-color: #d364db;
position: relative;
}
#slider .link {
position: absolute;
width: 100px;
height: 300px;
right: 0;
top: 0;
background-color: #fff;
}
#banner {
width: 100%;
height: 200px;
background-color: #c941d3ad;
}
#contents {
width: 100%;
height: 250px;
background-color: #9f4ca573;
}
#footer {
display: flex;
width: 100%;
height: 100px;
background-color: #d49dd863;
}
.footer1 {
width: 200px;
height: 100px;
background: #b361b963;
}
.footer2 {
display: flex;
width: calc(100% - 200px);
height: 100px;
}
.footer2-1 {
width: 80%;
height: 100px;
background: #dc83e363;
}
.footer2-2 {
width: 20%;
height: 100px;
background: #e733f463;
}
</style>
</head>
<body>
<div id="wrap">
<aside id="aside">
<h1>로고</h1>
<nav>메뉴</nav>
</aside>
<main id="main">
<section id="slider">이미지 슬라이드
<!-- <div class="slider_srwp"></div> -->
<div class="link">링크</div>
</section>
<section id="banner">배너</section>
<section id="contents">공지사항</section>
</main>
<footer id="footer">
<div class="footer1">로고</div>
<div class="footer2">
<div class="footer2-1">COPYRIGHT</div>
<div class="footer2-2">SNS</div>
</div>
</footer>
</div>
</body>
</html>
D는 브라우저 전체 넓이를 다 채우고
사이드 메뉴바부분은 200px로 고정되게 작업해줘야 합니다.
200px을 뺀 나머지의 부분을
width값에 calc(100% - 200px)을 해주면 고정이 됩니다.
c부분은 이미지 슬라이드부분 안에 링크영역을 지정해주고
css로 상단에 고정되게 작업해줍니다.
E-1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹디자인 기능사 실기 E유형 1번 레이아웃</title>
<link rel="stylesheet" href="/webd/css/webd.css">
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.aside {
width: 200px;
height: calc(100% - 120px);
}
.aside1 {
width: 100%;
height: 100%;
/* background-color: #d7acac; */
}
.aside1-1 {
width: 100%;
height: 120px;
background-color: #d7acac;
}
.aside1-2 {
width: 100%;
height: calc(100% - 120px);
background-color: #ba9494;
}
.section {
width: 400px;
height: calc(100% - 120px);
background-color: #000;
}
.sec1 {
width: 100%;
height: 21%;
background-color: #c89a9a;
}
.sec2 {
width: 100%;
height: 29%;
background-color: #885f5f;
}
.sec3 {
width: 100%;
height: 29%;
background-color: #ab3434;
}
.sec4 {
width: 100%;
height: 21%;
background-color: #c89a9a;
}
.img {
width: calc(100% - 600px);
height: calc(100% - 120px);
background-color: #ccc;
}
.footer {
display: flex;
width: 100%;
height: 120px;
}
.footer1 {
width: 200px;
height: 120px;
background-color: #8f4444;
}
.footer2 {
width: calc(100% - 200px);
height: 120px;
}
.footer2-1 {
height: 50%;
background-color: #9b6161;
}
.footer2-2 {
height: 50%;
background-color: #ab7e7e;
}
</style>
</head>
<body>
<div class="wrap">
<div class="aside">
<div class="aside1">
<div class="aside1-1">로고</div>
<div class="aside1-2">메뉴</div>
</div>
</div>
<div class="section">
<div class="sec1">배너</div>
<div class="sec2">공지사항</div>
<div class="sec3">갤러리</div>
<div class="sec4">링크</div>
</div>
<div class="img">이미지 슬라이드</div>
<div class="footer">
<div class="footer1">로고</div>
<div class="footer2">
<div class="footer2-1">하단메뉴</div>
<div class="footer2-2">COPYRIGHT</div>
</div>
</div>
</div>
</body>
</html>
D와 비슷합니다.
다만 E에서는 고정되는 구역이 2군데입니다.
구역을 잘 잡아서 width값에 calc를 넣어줘 작업합니다.
반응형