STUDY/자격증

JUST 쇼핑몰 문제풀이 4. 슬라이더/ 탭메뉴/ 배너/ 바로가기 (2019 웹디자인 기능사 실기 공개문제)

NightOwl 2019. 3. 28. 23:37
728x90

 

Header는 완료 되었고 이제 헤더 아래부분의 슬라이더의 CSS를 입력한다.

가로길이 1200px의 이미지 3장이 옆으로 스르륵 흘러가야 하기때문에 3600px의 슬라이더 창을 만들어 준다.

슬라이더, 내용 부분 CSS

슬라이더가 완성되었고, 아래 컨텐츠 부분에는 크게 세부분으로 나뉘어 진다.

시각적으로 보여주기 위해 background-color를 임의로 주어봤다.

 

결과물

이렇게 CSS가 먹히고 있다.

나는 아래 컨텐츠 부분이 위 슬라이더랑 너무 딱 붙어있는것 같아서 나중에 MARGIN값을 주었다.

 

공지사항 탭메뉴 css

한 공간안에 탭 메뉴 형식으로 공지사항과 갤러리 두가지의 li 메뉴가 있다.

li.notice , li.gallery로 구분하여 CSS를 사용 하고

notice 스타일을 잡을동안 gallery는 display:none; 을 임시로 걸어두었다.

 

탭 메뉴 HTML 코드 수정

공지사항 제목은 왼쪽정렬, 날짜는 오른쪽 정렬 하기 위해서 html 코드를 다시 건드렸다.

각각 p , span으로 싸주었다.

 

탭메뉴 갤러리 스타일 css

갤러리 스타일을 잡을때는 마찬가지로 공지사항은 잠시 display:none 해두고 잡는다.

 

탭메뉴 결과

사진 세장을 나열하는 방식으로 css는 두줄로 간단하게 끝낸다.

 

쓸데없이 CSS 높이 조정

 

높이 조정 결과물

그냥 떼놓고 싶었다.ㅋㅋ

 

JUST 쇼핑몰 탭메뉴, 배너, 바로가기메뉴 CSS

중간 배너 영역은 <img>태그 하나만 채워줬다.

오른쪽 바로가기 메뉴는 백그라운드에 이미지를 깔고

a 태그로 바로가기 버튼을 만들었다.

 

 

JUST 쇼핑몰 문제 풀이 예시 (footer 제외)

오늘까지의 결과.

이제 Footer하고 JS파일만 작성하면 끝이 난다.

 

HTML 코드

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JUST 쇼핑몰</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="script/jquery-1.12.4.js"></script>
<script src="script/js.js"></script>
</head>
<body>
	<header id="header">
		<h1><a href="#none" class="logo">JUST 쇼핑몰</a></h1>
		<div class="gnb_wrap">
			<nav>
				<ul class="gnb">
					<li><a href="#none">탑</a>
						<ul class="gnb2">
							<li><a href="#none">블라우스</a></li>
							<li><a href="#none">티</a></li>
							<li><a href="#none">셔츠</a></li>
							<li><a href="#none">니트</a></li>						
						</ul>
					</li>
					<li><a href="#none">아우터</a>
						<ul class="gnb2">
							<li><a href="#none">자켓</a></li>
							<li><a href="#none">코트</a></li>
							<li><a href="#none">가디건</a></li>
							<li><a href="#none">머플러</a></li>		
						</ul>
					</li>
					<li><a href="#none">팬츠</a>
						<ul class="gnb2">
							<li><a href="#none">청바지</a></li>
							<li><a href="#none">짧은바지</a></li>
							<li><a href="#none">긴바지</a></li>
							<li><a href="#none">레깅스</a></li>	
						</ul>
					</li>
					<li><a href="#none">악세서리</a>
						<ul class="gnb2">
							<li><a href="#none">귀고리</a></li>
							<li><a href="#none">목걸이</a></li>
							<li><a href="#none">반지</a></li>
							<li><a href="#none">팔찌</a></li>	
						</ul>
					</li>
				</ul>
			</nav>		
		</div>
	</header>
	<section id="container">
		<div id="main_visual">
			<div class="slider">
				<img src="images/slide_1.jpg" alt="온라인/오프라인 봄 신상품 입고 및 오늘 하루 최대 10%세일에 관한 옷걸이에 옷이 걸려있는 모습" />
				<img src="images/slide_2.jpg" alt="160cm 인생팬츠 JUST 팬츠에 관한 모델이 바지를 입고 앉아있는 모습" />
				<img src="images/slide_3.jpg" alt="DAILY ITEM 기획전에 관련된 사진" />
			</div>
		</div>
		<div id="main_contents">
			<ul class="tap_wrap">
				<li class="notice"><a href="#none">공지사항</a>
					<ul>
						<li><a href="#none"><p>네번째 공지사항 입니다.</p><span>2019.03.28</span></a></li>
						<li><a href="#none"><p>세번째 공지사항 입니다.</p><span>2019.03.28</span></a></li>
						<li><a href="#none"><p>두번째 공지사항 입니다.</p><span>2019.03.28</span></a></li>
						<li><a href="#none"><p>첫번째 공지사항 입니다.</p><span>2019.03.28</span></a></li>

					</ul>
				</li>
				<li class="gallery"><a href="#none">갤러리</a>
					<ul>
						<li><a href="#"><img src="images/gallery_1.jpg" alt="갤러리"></a></li>
						<li><a href="#"><img src="images/gallery_2.jpg" alt="갤러리"></a></li>
						<li><a href="#"><img src="images/gallery_3.jpg" alt="갤러리"></a></li>			
					</ul>
				</li>
			</ul>
			<div class="banner_wrap">
				<img src="images/banner_1.jpg" alt="DRESS 1+1 보러가기에 관한 이미지" />
			</div>
			<div class="go_link">
				<a href="#none">앱 설치 바로가기</a>
			</div>
		</div>
	</section>
	<footer id="footer">
		<a href="#" class="logo">JUST 쇼핑몰</a>
		<div class="copyright">
			<address>서울특별시 중앙로 223 2F JUST 쇼핑몰</address>
			COPYRIGHT BY TBBROTHER. ALL RIGHT RESERVED.
		</div>
		<ul class="sns_wrap">
			<li><a href="#none">Twitter</a></li>
			<li><a href="#none">Facebook</a></li>
			<li><a href="#none">instagram</a></li>
		</ul>
	</footer>
</body>
</html>





 

CSS 코드

 

@charset "utf-8";
/* 초기화 */
* {padding: 0; margin: 0; color: #222328;}
li{list-style: none;}
a{text-decoration: none;}
img{border: none;}

/* 시험지에서 제공된 가로 길이 1200px 및 가운데 정렬*/
body {width: 1200px; margin: 0 auto;}

#header {width: 100%; height: 100px;}
#header h1 {float: left;}
#header h1 a {display: block; width: 200px; height: 40px; background: url("../images/logo.png") no-repeat; text-indent: -99999px; margin-top: 30px;}

.gnb_wrap {float: right;}
.gnb_wrap .gnb {width: 600px;}
.gnb_wrap .gnb > li {float: left; position: relative; width: 150px; height: 40px; text-align: center; font-size: 24px; margin-top: 30px;}
.gnb_wrap .gnb > li > a {display: block;}
.gnb_wrap .gnb > li > .gnb2 {position: absolute; left: 0; top: 50px; width: 100%; text-align: center; background-color: rgba(255,255,255,0.8); display: none;}
.gnb_wrap .gnb > li > .gnb2.on {display: block;}
.gnb_wrap .gnb > li > .gnb2 > li {text-align: center; font-size: 20px; width: 100%; height: 40px;}


#container {width: 100%; height: 500px;}
#main_visual {width: 100%; height: 300px; position: relative; overflow: hidden;}
#main_visual .slider {width: 3600px; height: 300px;position: absolute; top: 0; left: 0; font-size: 0;}
#main_visual img {max-width: 100%; margin: 0;}

#main_contents {width: 100%; height: 200px;}
.tap_wrap {float: left; width: 440px; height: 190px; border: 1px solid #dad9d5; box-sizing: border-box; position: relative; margin-top: 10px; margin-right: 10px;}
.tap_wrap > li {width: 50%; background-color: #f2f2f2; border-bottom: 1px solid #dad9d5; border-left: 1px solid #dad9d5; box-sizing: border-box; float: left;}
.tap_wrap > li > a {display: block; font-size: 20px; text-align: center; vertical-align: middle; line-height: 38px;}

.tap_wrap > li > ul {position: absolute; top: 38px; left: 0; display: block; width: 100%;}
.tap_wrap > li.notice > ul {padding: 20px; box-sizing: border-box;}
.tap_wrap > li.notice > ul > li {line-height: 30px;}
.tap_wrap > li.notice > ul > li > a {display: block;}
.tap_wrap > li.notice > ul > li > a > span {float: right;}
.tap_wrap > li.notice > ul > li > a > p {float: left;}
.tap_wrap > li.gallery > ul {display: none; padding: 20px 0;}
.tap_wrap > li.gallery > ul > li {float: left; margin-left: 9px;}

.banner_wrap {float: left; width: 400px; height: 190px; text-align: center; margin-top: 10px; margin-right: 10px;}

.go_link {float: left; width: 340px; height: 180px; margin: 10px 0; background: url("../images/banner_2.jpg") no-repeat; position: relative;}
.go_link > a {border: 1px solid #FFC92C; padding: 5px; border-radius: 15px; background-color: #FFC92C; position: absolute; bottom: 5px; left: 108px; font-size: 13px;}

/*미완성입니다.*/
#footer {width: 100%; height: 100px;}
#footer > a.logo {display: block; width: 200px; height: 40px; background-image: url("../images/logo_footer.png"); text-indent: -999px; margin: 30px 10px; float: left;}
.copyright {width: 520px; margin: 30px 60px; float: left;}




728x90
저작자표시 비영리 변경금지

'STUDY > 자격증' 카테고리의 다른 글

열역학 기본 용어 정리  (0) 2020.02.22
JUST 쇼핑몰 문제풀이 6. JS, 제이쿼리 - 메뉴, 슬라이더 효과 (웹디자인 기능사 실기 공개문제)  (2) 2019.05.07
JUST 쇼핑몰 문제풀이 5. footer (2019 웹디자인 기능사 실기 공개문제)  (0) 2019.03.30
JUST 쇼핑몰 문제풀이 3. Header (2019 웹디자인 기능사 실기 공개문제)  (0) 2019.03.19
JUST 쇼핑몰 문제풀이 2. 포토샵 웹용 이미지 만들기 (2019 웹디자인 기능사 실기 공개문제)  (3) 2019.03.14
JUST 쇼핑몰 문제풀이 1. 요구사항 분석 및 HTML 구조짜기 (2019 웹디자인 기능사 실기 공개문제)  (2) 2019.03.13

'STUDY/자격증'의 다른글

  • 현재글JUST 쇼핑몰 문제풀이 4. 슬라이더/ 탭메뉴/ 배너/ 바로가기 (2019 웹디자인 기능사 실기 공개문제)

관련글

티스토리툴바