반응형
웹디자인 기능사 실기 유형별 레이아웃 정리!
웹디자인 기능사 실기 A~E 유형별로 레이아웃을 만들어봤습니다.
웹디자인 기능사 실기 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>
<style>
*{
padding: 0;
margin: 0 auto;
}
.header {
display: flex;
width: 1200px;
height: 100px;
}
.header__1 {
width: 20%;
background-color: #ad0000;
}
.header__2 {
width: 80%;
background-color: #ff2d2d;
}
.main {
width: 1200px;
height: 300px;
background-color: #ff8a04;
}
.banner {
width: 1200px;
height: 200px;
background-color: #d16666;
display: flex;
}
.banner__1 {
width: 33.3333%;
background-color: #d0ff00;
}
.banner__2 {
width: 33.3333%;
background-color: #04ff19;
}
.banner__3 {
width: 33.3333%;
background-color: #00f195;
}
.footer {
width: 1200px;
height: 100px;
display: flex;
}
.footer1 {
width: 20%;
background-color: #2f00ff;
}
.footer2 {
width: 60%;
background-color: #ea00ff;
}
.footer3 {
width: 20%;
background-color: #ff096f;
}
</style>
</head>
<body>
<div id="wrap">
<div class="header">
<div class="header__1">로고</div>
<div class="header__2"></div>
</div>
<div class="main">이미지 슬라이드</div>
<div class="banner">
<div class="banner__1">공지사항/갤러리</div>
<div class="banner__2">배너</div>
<div class="banner__3">바로가기</div>
</div>
<div class="footer">
<div class="footer1">로고</div>
<div class="footer2">COPYRIGHT</div>
<div class="footer3">SNS</div>
</div>
</div>
</body>
</html>
웹디자인 기능사 실기 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>
<style>
*{
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 700px;
}
#header {
width: 100%;
height: 100px;
background-color: #fa1b1b;
}
#header .container {
display: flex;
}
#header h1 {
width: 20%;
background-color: #fc6666;
}
#header nav {
width: 80%;
background-color: #720c0c;
}
#slider {
width: 100%;
height: 300px;
}
#contents {
width: 100%;
height: 200px;
}
#contents .container {
display: flex;
}
#contents .content1 {
width: 33.3333%;
background-color: #73d9f3;
}
#contents .content2 {
width: 33.3333%;
background-color: #2c8ba3;
}
#contents .content3 {
width: 33.3333%;
background-color: #0b4a5a;
}
#footer {
width: 100%;
height: 100px;
background-color: #fc07bf;
}
#footer .container {
display: flex;
}
#footer .footer1 {
width: 20%;
background-color: #f66bc0;
}
#footer .footer2 {
width: 80%;
height: 200px;
}
#footer .footer2-1 {
width: 100%;
height: 50px;
background-color: #f32f7a;
}
#footer .footer2-2 {
width: 100%;
height: 50px;
background-color: #d621cd;
}
.container {
width: 1200px;
height: inherit;
margin: 0 auto;
background-color: rgba(0,0,0,0.4);
}
</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>
웹디자인 기능사 실기 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>
<style>
*{
padding: 0;
margin: 0;
}
#wrap {
display: flex;
}
#aside {
width: 200px;
height: 650px;
background-color: #fd2020;
}
#main {
width: 800px;
height: 650px;
}
#slider {
width: 100%;
height: 350px;
background-color: #ffae00;
}
#banner {
display: flex;
width: 100%;
height: 200px;
/* background-color: #fff; */
}
.banner1 {
width: 33.3333%;
height: 200px;
background-color: #96ff7b;
}
.banner2 {
width: 33.3333%;
height: 200px;
background-color: #28fc4f;
}
.banner3 {
width: 33.3333%;
height: 200px;
background-color: #00ff91;
}
#footer {
width: 100%;
height: 100px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.footer1 {
width: 20%;
height: 100px;
background-color: #b905f0;
}
.footer2 {
width: 80%;
height: 50px;
background-color: #ff0055;
}
.footer3 {
width: 80%;
height: 50px;
background-color: #970636;
}
</style>
</head>
<body>
<div id="wrap">
<div id="aside">로고</div>
<div id="main">
<div id="slider">이미지 슬라이드</div>
<div id="banner">
<div class="banner1">공지사항/갤러리</div>
<div class="banner2">배너</div>
<div class="banner3">바로가기</div>
</div>
<div id="footer">
<div class="footer1">로고</div>
<div class="footer2">하단메뉴</div>
<div class="footer3">COPYRIGHT</div>
</div>
</div>
</div>
</body>
</html>
웹디자인 기능사 실기 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>
<style>
* {
padding: 0;
margin: 0;
}
#wrap {
display: flex;
flex-wrap: wrap;
}
#aside {
width: 200px;
height: 850px;
}
#aside h1 {
width: 100%;
height: 100px;
background-color: #ff0000;
}
#aside nav {
width: 100%;
height: 750px;
background-color: #a10d0d;
}
#main {
width: calc(100% - 200px);
height: 850px;
background-color: #0b91ff;
}
#slider {
width: 100%;
height: 400px;
background-color: #2282ff;
position: relative;
}
#slider .link {
position: absolute;
right: 0;
top: 0;
width: 100px;
height: 300px;
background-color: #6b60ca;
}
#banner {
width: 100%;
height: 200px;
background-color: #0b20e0;
}
#contents {
width: 100%;
height: 250px;
background-color: #5912ff;
}
#footer {
width: 100%;
height: 100px;
display: flex;
}
.footer1 {
width: 200px;
height: 100px;
background-color: #e100ff;
}
.footer2 {
width: calc(80% - 200px);
height: 100px;
background-color: #89009b;
}
.footer3 {
width: 20%;
height: 100px;
background-color: #ff00c3;
}
</style>
</head>
<body>
<div id="wrap">
<aside id="aside">
<h1>LOGO</h1>
<nav></nav>
</aside>
<main id="main">
<section id="slider">
<div class="link"></div>
</section>
<section id="banner"></section>
<section id="contents"></section>
</main>
<footer id="footer">
<div class="footer1">LOGO</div>
<div class="footer2"></div>
<div class="footer3">SNS</div>
</footer>
</div>
</body>
</html>
웹디자인 기능사 실기 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>
<style>
*{
padding: 0;
margin: 0;
}
#wrap {
height: 1000px;
}
#section {
display: flex;
height: calc(100% - 120px);
}
#aside {
width: 200px;
}
.aside1 {
width: 100%;
height: 15%;
background-color: #ff0000;
}
.aside2 {
width: 100%;
height: 85%;
background-color: #ff6200;
}
#main {
width: 400px;
}
.banner {
width: 100%;
height: 25%;
background-color: #e7fa34;
}
.notice {
width: 100%;
height: 25%;
background-color: #c8ff01;
}
.gall {
width: 100%;
height: 25%;
background-color: #00ff00;
}
.link {
width: 100%;
height: 25%;
background-color: #00ff66;
}
#slider {
width: calc(100% - 600px);
background-color: #00aeff;
}
#footer {
width: 100%;
display: flex;
}
.footer1 {
width: 200px;
height: 120px;
background-color: #aa00ff;
}
.footer2 {
width: calc(100% - 200px);
}
.footer2-1 {
width: 100%;
height: 60px;
background-color: #ac0095;
}
.footer2-2 {
width: 100%;
height: 60px;
background-color: #ff009d;
}
</style>
</head>
<body>
<div id="wrap">
<div id="section">
<div id="aside">
<div class="aside1">LOGO</div>
<div class="aside2"></div>
</div>
<div id="main">
<div class="banner">배너</div>
<div class="notice">공지사항</div>
<div class="gall">갤러리</div>
<div class="link">링크</div>
</div>
<div id="slider">이미지 슬라이드</div>
</div>
<div id="footer">
<div class="footer1">LOGO</div>
<div class="footer2">
<div class="footer2-1">하단메뉴</div>
<div class="footer2-2">COPYRIGHT</div>
</div>
</div>
</div>
</body>
</html>
웹디자인 기능사 실기 유형별 메뉴, 슬라이드 형태도 보고싶다면?
https://ehcjswo.tistory.com/96
웹디자인 기능사 실기 메뉴, 슬라이드 유형!
웹디자인 기능사 실기 메뉴, 슬라이드 유형! 웹디자인 기능사 실기 A~E 유형의 메뉴와 슬라이드를 만들어봤습니다. 단일메뉴, 전체메뉴 로고 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-
ehcjswo.tistory.com