728x90
반응형
1) html의 기본 구조를 잡은 후 요구사항에 적혀있는 것들을 토대로 css 기본을 잡아줍니다.
@charset "UTF-8";
* {margin:0;padding:0;background-color:#fff;color:#333;
font-family:'맑은고딕', sans-serif;font-size:16px;box-sizing:border-box;}
ul,ol,dl {list-style:none;}
a {text-decoration:none;}
img {border:none;}2) 와이어 프레임에 맞게 태그를 작성합니다.
브라우져 전체 넓이에 1200px 넓이로 가운데 정렬, 높이값을 각각 맞춰 계산해서 css를 작성합니다.
<body>
<div id="wrap">
<header class="header"></header>
<div class="container"></div>
<footer class="footer"></footer>
</div>
</body>
</html>#wrap {width:1200px;height:700px;margin:0 auto;}
.header {width:100%;height:100px;}
.container {width:100%;height:500px;}
.footer {width:100%;height:100px;}3) header 부분을 먼저 작성합니다. 로고는 시험 요구에 맞는 사이즈로.
nav 넓이와 높이는 임의로 정합니다. 스타일은 상황에 맞게 입혀줍니다.
<header class="header">
<h1 class="logo"><a href="#"><img src="../images/logo.png" alrt="로고"></a></h1>
<nav class="nav">
<ul class="nav-menu-group">
<li class="nav-menu-list">
<a href="#">메인메뉴</a>
<ul class="sub-menu-group">
<li class="sub-menu-list">
<a href="#">서브메뉴</a>
</li>
<li class="sub-menu-list">
<a href="#">서브메뉴</a>
</li>
<li class="sub-menu-list">
<a href="#">서브메뉴</a>
</li>
<li class="sub-menu-list">
<a href="#">서브메뉴</a>
</li>
</ul>
</li>
//li는 문제에 나온 갯수대로 작성한다.
</ul>
</nav>
</header>.logo {float:left;width:200px;height:40px;}
.logo > img {width:100%;height:100%;}
.nav {width:600px;margin-left:auto;}
.nav-menu-group {display:flex;width:600px;height:40px;text-align:center;line-height:2.3;font-weight:bold;}
.nav-menu-list {display:inline-block;width:150px;height:40px;}
.nav-menu-list a {display:inline-block;width:100%;height:100%;}
.nav-menu-list:hover > a {background:#ce896a;color:#fff;}
.sub-menu-group {display:none;}
.sub-menu-list {display:inline-block;width:150px;height:40px;}
.sub-menu-list a {display:inline-block;width:100%;height:100%;}
.sub-menu-list:hover > a {background:#cc7b56;color:#fff;} $('.nav-menu-list').mouseover(function () {
$('.sub-menu-group').stop().slideDown(800);
});
$('.nav-menu-list').mouseleave(function () {
$('.sub-menu-group').stop().slideUp(800);
});4) 슬라이드는 위 또는 아래로 작동해야 합니다. (just쇼핑몰)
<div class="slide-wrap">
<ul class="slide-group">
<li class="slide-list">
<p class="slide-txt">슬라이드 내용</p>
<a href="#">
<img src="../images/slide1.jpg" alt="슬라이드1">
</a>
</li>
<li class="slide-list">
<p class="slide-txt">슬라이드 내용</p>
<a href="#">
<img src="../images/slide2.jpg" alt="슬라이드2">
</a>
</li>
<li class="slide-list">
<p class="slide-txt">슬라이드 내용</p>
<a href="#">
<img src="../images/slide3.jpg" alt="슬라이드3">
</a>
</li>
</ul>
</div>.slide-wrap {position:relative;width:100%;height:300px;overflow:hidden;}
.slide-group {position:absolute;}
.slide-list {position:relative;}
.slide-txt {position:absolute;top:50%;left:50%;
display:inline-block;width:150px;height:40px;background:#fff;
color:#333;font-weight:bold;text-align:center;line-height:2.5;transform:translate(-50%,-50%);}setInterval(function () {
$('.slide-group').animate({ 'marginTop': '-300px' }, function () {
$('.slide-list:first').appendTo('.slide-group');
$('.slide-group').css('margin-top','0px');
});
},3000);5) 탭 메뉴를 만들고, 공지사항과 갤러리를 작성합니다. 각 넓이는 임의로 만듭니다.
<div class="tab-box">
<ul class="tab-group">
<li class="tab-list active"><a href="#">공지사항</a></li>
<li class="tab-list"><a href="#">갤러리</a></li>
</ul>
<ul class="notice-group tab-list-group">
<li class="notice-list">
<a href="#">공지사항</a>
</li>
<li class="notice-list">
<a href="#">공지사항</a>
</li>
<li class="notice-list">
<a href="#">공지사항</a>
</li>
</ul>
<ul class="gallery-group tab-list-group">
<li class="gallery-item">
<a href="#"><img src="../20220523/images/gallery01.png" alt="갤러리1"></a>
</li>
<li class="gallery-item">
<a href="#"><img src="../20220523/images/gallery02.png" alt="갤러리2"></a>
</li>
<li class="gallery-item">
<a href="#"><img src="../20220523/images/gallery03.png" alt="갤러리3"></a>
</li>
</ul>
</div>.tab-box {width:33.333%;height:100%;}
.tab-group {display:flex;}
.tab-list {display:inline-block;width:100px;height:50px;}
.tab-list > a {display:inline-block;width:100%;height:100%;font-weight:bold;text-align:center;line-height:3;}
.tab-list.active a {background:pink;color:#fff;}
.notice-group {height:100%;}
.notice-list {display:inline-block;width:100%;height:50px;padding:10px;border:1px solid;}
.notice-list a {display:inline-block;width:100%;height:100%;}
.gallery-group {}
.gallery-group:after {display:block;content:'';clear:both;}
.gallery-item {float:left;width:120px;height:120px;margin-right:11px;}
.gallery-item img {width:100%;height:100%;}
.tab-list-group {display:none;} //tab
$('.tab-list-group').eq(0).show();
$('.tab-list').click(function () {
var tabItem = $(this);
$('.tab-group').find('.tab-list').removeClass('active');
$('.tab-list-group').hide();
var idx = tabItem.index();
tabItem.addClass('active');
$('.tab-list-group').eq(idx).show();
});6) 공지사항 첫 번째를 누르면 팝업이 뜨고, 팝업의 닫기 버튼을 누르면 팝업이 닫혀야 한다.
<div class="modal-bg"></div>
<div class="modal-wrap">
<div class="modal-head">
<h2 class="modal-title">타이틀</h2>
<button type="button" class="btn-close"><span>닫기</span></button>
</div>
<div class="modal-body">
<p>여기에 내용이 들어갑니다.</p>
</div>
</div>.modal-bg {display:none;width:100%;height:100%;background:rgb(0, 0, 0, 0.7);
position:fixed;top:0;right:0;left:0;}
.modal-wrap {display:none;width:500px;height:500px;padding:10px;
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;z-index:1;}
.modal-head {display:flex;justify-content: space-between;}
.modal-body {padding:20px 0 0 0;}//popup
$('.notice-list.first').click(function () {
$('.modal-bg').show();
$('.modal-wrap').show();
});
$('.btn-close').click(function () {
$('.modal-bg').hide();
$('.modal-wrap').hide();
});7) 푸터도 시험 내용에 맞게 작성합니다.
<footer class="footer">
<div class="footer-logo">
<a href="#"><img src="../20220523/images/footer_logo.png" alt="푸터로고"></a>
</div>
<p class="capyright">Copyright All right reserved JUST 쇼핑몰</p>
<div class="sns-box">
<a href="#"><img src="../20220523/images/facebook.webp" alt="sns1"></a>
<a href="#"><img src="../20220523/images/instagram.webp" alt="sns2"></a>
<a href="#"><img src="../20220523/images/twitter.webp" alt="sns3"></a>
</div>
</footer>.footer {display:flex;justify-content:space-between;
align-items:center;width:100%;height:100px;background:#ddd;}
.footer-logo {width:200px;height:40px;}
.footer-logo img {width:100%;height:100%;}
.sns-box img {width:30px;height:30px;margin-right:10px;}
[자격증] - [웹디자인기능사] 웹디자인 기능사 실기 준비
[웹디자인기능사] 웹디자인 기능사 실기 준비
1, 웹디자인 기능사 실기 시험장에는 보통 코드에디터가 설치되어있고, 기본적으로 emmet이 있습니다. 가끔 단축키가 지원되지 않는 시험장이 있는데, 그럴 경우에는 html 구조부터 코딩해야 합니
sevendays.tistory.com
[자격증] - [웹디자인기능사] 웹디자인 기능사 실기 문제풀이 (A-2 그린복지재단)
[웹디자인기능사] 웹디자인 기능사 실기 문제풀이 (A-2 그린복지재단)
1) 기본구조 잡는 것과 css 기본 잡는 것은 A-1과 비슷합니다. A-1을 참고해주세요. 2) 이번 nav영역은 background가 깔립니다. 구조를 작성할 때 까먹지 말고 함께 해주세요. 재단소개 설립취지 연혁 찾
sevendays.tistory.com
[자격증] - [웹디자인기능사] 웹디자인 기능사 실기 C-1 해운대빛축제
[웹디자인기능사] 웹디자인 기능사 실기 C-1 해운대빛축제
1) 와이어프레임을 참고하여 html과 css 기초 구조를 잡아줍니다. 2) 앞서 했던 A유형과는 달리 nav 영역이 왼쪽에 있고 세로로 떨어지는 형태입니다. 이용안내 이용방법 이용시간 이용요금 이벤트
sevendays.tistory.com
'자격증' 카테고리의 다른 글
| [네트워크 관리사 2급] 네트워크 관리사 독학 / 네관사 2급 실기 준비 / 실기 독학 (0) | 2023.01.18 |
|---|---|
| [네트워크 관리사 2급] 네트워크 관리사 독학 / 네관사 2급 준비 / 공부방법 (0) | 2023.01.17 |
| [웹디자인기능사] 웹디자인 기능사 실기 C-1 해운대빛축제 (0) | 2022.06.03 |
| [웹디자인기능사] 웹디자인 기능사 실기 문제풀이 (A-2 그린복지재단) (0) | 2022.06.02 |
| [웹디자인기능사] 웹디자인 기능사 실기 준비 (0) | 2022.05.23 |