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
728x90
반응형
'자격증' 카테고리의 다른 글
| [네트워크 관리사 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 |