1. 유형별 와이어프레임 분석
* 'width ・ height 100%' 의미 : 브라우저 가득
| Type | 와이어프레임 | wrap 영역 | contents 영역 | 반응형 |
| A |  |
width 1200px (가운데 정렬) |
N/A | 반응형X (크기 고정, 가운데 정렬) |
| B |  |
width 100% | width 1200px (가운데 정렬) |
일부 반응형 (A, D 영역만; 화면에 꽉참) |
| C |  |
width 1000px (왼쪽 정렬) |
N/A | 반응형X (크기 고정, 가운데 정렬) |
| D |  |
width 100% | calc 함수 계산 (B 영역) |
반응형O (전체영역; 화면에 꽉참) |
| E |  |
width 100%, height 100% |
calc 함수 계산 (B 영역) |
반응형O (전체영역; 화면에 꽉참) |
| F |  |
width 100% | width 1340px (가운데 정렬) height 임의 지정 (C 영역) *C 영역의 Link 위치가 B 영역의 위치랑 겹치게 |
반응형O (전체영역; 화면에 꽉참) |
[유형별 레이아웃 CSS 분석]
A 유형; 반응형X(크기 고정, 가운데 정렬)
body{ width : 1200px; }
header{ width: 1200px; height: 100px; }
.hwrap{ width: 1200px; height: 100px; } /* 종속 */
.bwrap{ width: 1200px; height: 500px; }
.slide{ width: 1200px; height: 300px; }
.contents{ width: 1200px; height: 200px; }
footer{ width: 1200px; height: 100px; }
B 유형; 일부 반응형(A, D 영역만; 화면에 꽉참)
html, body{ min-width: 1200px; } /* 가로 반응형 레이아웃: html, body에 min-width 만 부여 */
header{ width: 100%; height: 100px; }
.hwrap{ width: 1200px; height: 100px; } /* 동등 */
.bwrap{ width: 1200px; height: 500px; }
.slide{ width: 1200px; height: 300px; }
.contents{ width: 1200px; height: 200px; }
footer{ width: 100%; height: 100px; }
.fwrap{ width: 1200px; height: 100px;} /* 동등 */ /* footer와 동등한 계층의 .fwrap을 생성하여 진짜 내용물이 들어갈 공간을 선언함 */ /*.fwrap 내에 가로로 또다른 영역 나눔이 생긴다면 .logo와 동일한 계층의.site로 한번 더 묶어줌*/
C 유형; 반응형X(크기 고정, 가운데 정렬)
body{ width: 1000px; height: 650px; } /* 세로형 레이아웃은 body에서 부터 height 부여 */
header{ float: left; } /* 세로형 레이아웃은 header에 float만 부여 */
.hwrap{ width: 200px; height: 650px; float: left; } /* 종속 */
.bwrap{ width: 800px; height: 550px; float: right; }
.slide{ width: 800px; height:350px; float: right; }
.contents{ width: 800px; height: 200px; float: right; }
footer{ float: right; } /*footer 영역이 body width 100 %보다 더 작다면 일단 오른쪽으로 보냄. 크기는 .fwrap에서 처리*/
.fwrap{ width: 800px; height: 100px; float: right; }. /* 종속 */ /*반응형 footer가 아니어도 footer 영역이 body width 100%가 아니라면(더 작다면) .fwrap으로 한번 더 묶어줌*/
D 유형; 반응형(전체영역; 화면에 꽉참)
body{ min-width: 1200px; min-height: 950px; }. /* 세로 반응형 레이아웃: body에 min-width, min-height 부여 */
header{ float: left; } /* 세로형 레이아웃은 header에 float만 부여 */
.hwrap{ width: 200px; height: 850px; float: left; } /* 종속 */
/* calc(~%) 로 크기 계산하는 레이아웃은 % 기준이 body가 되어야 하므로 .bwrap 같은걸로 한번 더 묶지 않기! */
.slide{ width: calc(100% - 200px); height: 400px; float: right; }
.contents{ width: calc(100% - 200px); height: 200px; float: right; }
footer{ width: 100%; height: 100px; float: right; }
E 유형; 반응형(전체영역; 화면에 꽉참)
body{ width : 100%; height: 100vh; min-width: 1000px; min-height: 820px;} /* 세로 반응형 레이아웃: body에 min-width, min-height 부여 */
header{ float: left; } /* 종속 */ //* 세로형 레이아웃은 header에 float만 부여 */
.hwrap{ width: 200px; height: calc(100% - 100px); min-height: 720px; float: left; }
.bwrap{ width: calc(100% - 200px); height: calc(100vh - 100px); min-height: 720px; float: right; }. /* %는 .bwrap 안묶는게 좋지만, 이 경우는 계산이 가능하므로 묶어도 됨 */
.contents{ width: 400px; height: 100%; float: left; } /* .bwrap 기준으로 높이 100% */
.slide{ width: calc(100% - 400px); height: 100%; float: right; }
footer{ width: 100%; height: 100px; float: left; }
F 유형; 반응형(전체영역; 화면에 꽉참)
html, body{ min-width: 1340px; }. /* 가로 반응형 레이아웃: html, body에 min-width 만 부여 */
header{ width: 1340px; height: 100px; }
.hwrap{ width: 1340px; height: 100px; } /* 종속 */
.slide{ width: 100%; height: 350px; } /* B, C 크기가 달라서(반응형 여부 차이) 둘을 .bwrap 으로 묶을 수 X */
.contents{ width: 1340px; height: 550px; margin-top: -100px; } /* C를 위로 올려서 B와 겹치게 함 */
footer{ width: 1340px; height: 120px; }
2. 컨텐츠 유형 분석
1) 주조색/보조색 & 배경색/텍스트색
① 배경색 ・ 텍스트색 지정
② 주조색 ・ 보조색 자유롭게
➂ 주조색 지정 ・ 보조색 자유롭게
➃ 주조색 ・ 보조색 지정
2) 로고
| 로고 제공 여부 | 추가 조건 |
| 로고 제공 | 종횡비 유지 |
| 색상 변경 & 종횡비 유지 | |
| 직접 디자인 | 심벌 제공 |
| 심벌 미제공 → 심벌&로고명 디자인 or 심벌 없이 로고명만 디자인 |
* 로고가 주어지더라도, 웹 분위기에 맞게 색채 & 채도(회색조; ctrl shift U) 변경해야함
3) 메뉴
| 순번 | 상단 메뉴 구성 | 상단 메뉴 방향 | 마우스 오버시 |
| 1) |  |
가로 |
- 아래로 - 전체 펼쳐짐 |
| 2) |  |
- 아래로 - 전체 펼쳐짐 - 서브메뉴의 width가 본문의 100%를 차지 |
|
| 3) |  |
- 아래로 - 마우스 오버한 메뉴만 펼쳐짐 |
|
| 4) |  |
- 아래로 - 마우스 오버한 메뉴만 펼쳐짐 - 서브메뉴의 width가 메인메뉴 전체 width와 같음 |
|
| 5) |  |
세로 | - 아래로 - 마우스 오버한 메뉴만 펼쳐짐 |
| 6) |  |
- 옆으로 - 마우스 오버한 메뉴만 펼쳐짐 |
|
| 7) |  |
- 옆으로 - 전체 펼쳐짐 - 서브메뉴의 width가 본문의 80%를 차지 |
[내비게이션 HTML 분석]
=====1) [가로메뉴]아래로, 전체 펼쳐짐=====
=====3) [가로메뉴]아래로, 마우스 오버한 메뉴만 펼쳐짐=====
=====4) [가로메뉴]아래로, 마우스 오버한 메뉴만 펼쳐짐 (+ 서브메뉴 width : 메인메뉴 전체 width)=====
=====5) [세로메뉴]아래로, 마우스 오버한 메뉴만 펼쳐짐=====
=====6) [세로메뉴]옆으로, 마우스 오버한 메뉴만 펼쳐짐=====
<header>
<div class="hwrap">
<div class="logo">
<a href="#"><img src="images/logo.png" alt="로고"></a>
</div>
<nav class="navig">
<ul class="menu">
<li><a href="#">개인</a>
<ul class="submenu">
<li><a href="#">조회</a></li>
<li><a href="#">이체</a></li>
<li><a href="#">공과금</a></li>
<li><a href="#">예금/신탁</a></li>
</ul>
</li>
<li><a href="#">기업</a>
<ul class="submenu">
<li><a href="#">조회</a></li>
<li><a href="#">이체</a></li>
<li><a href="#">전자결제</a></li>
<li><a href="#">수표/어음</a></li>
</ul>
</li>
<li><a href="#">금융상품</a>
<ul class="submenu">
<li><a href="#">저축상품</a></li>
<li><a href="#">대출상품</a></li>
<li><a href="#">투자상품</a></li>
</ul>
</li>
<li><a href="#">카드</a>
<ul class="submenu">
<li><a href="#">카드정보</a></li>
<li><a href="#">카드신청</a></li>
<li><a href="#">이용내역조회</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
=====2) [가로메뉴]아래로, 전체 펼쳐짐 (+ 서브메뉴 width : 본문의 100%)=====
=====7) [세로메뉴]옆으로, 전체 펼쳐짐 (+ 서브메뉴 width : 본문의 80%)=====
<header>
<div class="hwrap">
<div class="logo">
<a href="#"><img src="images/logo.png" alt="로고"></a>
</div>
<div id="navigbg"></div> /*이게 차이점*/
<nav class="navig">
<ul class="menu">
<li><a href="#">해외여행</a>
<ul class="submenu" >
<li><a href="#">동남아/대만</a></li>
<li><a href="#">중국/홍콩</a></li>
<li><a href="#">유럽/두바이</a></li>
<li><a href="#">미주/하와이</a></li>
</ul>
</li>
<li><a href="#">국내여행</a>
<ul class="submenu">
<li><a href="#">서울/경기</a></li>
<li><a href="#">강원</a></li>
<li><a href="#">충청</a></li>
<li><a href="#">경상/전라</a></li>
</ul>
</li>
<li><a href="#">제주도</a>
<ul class="submenu">
<li><a href="#">버스여행</a></li>
<li><a href="#">자유여행</a></li>
<li><a href="#">호텔/펜션</a></li>
</ul>
</li>
<li><a href="#">렌터카</a>
<ul class="submenu">
<li><a href="#">국내 렌터카</a></li>
<li><a href="#">국외 렌터카</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>[내비게이션 CSS 분석]
*hover: 걍 다 a 한테 주기
.navigbg{
width: 1200px or calc(100% - 200px);
height: 200px;
position: absolute;
top/left;
z-index: 2;
background-color: #333;
display: none;
}
.navig{
[가로메뉴]
float(right), width(전체), margin;
[세로메뉴]
float(left), width(전체=한 칸), margin;
}
.menu{x}
.menu>li{
[가로메뉴]
float(left), width;
[세로메뉴]
float(left), width;
+ {7} height /*7 : li에 height 주기*/
}
.menu>li>a{
[가로메뉴]
height, line-height, background-color...;
[세로메뉴]
height(7은 x), line-height, background-color...; /*7제외 세로메뉴 : a에 height 주기*/
}
.submenu{
[가로메뉴]
display(none);
+ {1, 2} width, height(전체), position(absolute), z-index, background-color; /*.submenu에 heigt(전체) & background-color 해줘야 빈공간도 색 채워짐*/
+ {3} width, position(absolute), z-index; /*전체 떨어지는 메뉴 빼고는 height & background 참기 -> a 에서 부여*/ /*전체 heigh를 부여하지 않아 딱 a 갯수만큼 height 펼쳐짐*/
+ {4} width /*여기에 position(absolute)부여하는 순간 3처럼 됨*/ /*전체 떨어지는 메뉴 빼고는 height & background 참기 -> a 에서 부여*/ /*전체 heigh를 부여하지 않아 딱 a 갯수만큼 height 펼쳐짐*/
[세로메뉴]
display(none)
+ {5} width; /*전체 heigh를 부여하지 않아 딱 a 갯수만큼 height 펼쳐짐*/
+ {6} width, height(전체), position(absolute), z-index, top/left, background-color;
+ {7} width(900px; 180*5), "position(relative)", "z-index(3)", top/left; /*absolute로 변경시 글자 가로로 겹침*/ /*float은 부여하든 안하든 노상관*/
}
.submenu>li{
[가로메뉴]
x
[세로메뉴]
x
+ {7} float(left), width, height; /*7 : li에 height 주기*/ /*float 빼는 순간 글자 세로로 겹침*/
}
.submenu>li>a{
[가로메뉴]
height, line-height, background-color,...;
[세로메뉴]
height(7은 x), line-height, background-color(7은 x),...;
}| 순번 | .navigbg | .navig | .menu | .submenu | hover |
| 1) | - |  |
 |
 |
a |
| 2) |  |
 |
 |
 |
a |
| 3) | - |  |
 |
 |
li |
| 4) | - |  |
 |
 |
li |
| 5) | - |  |
 |
 |
a |
| 6) | - |  |
 |
 |
a |
| 7) |  |
- |  |
 |
a |
[내비게이션 CSS 예시]
=====1) [가로메뉴]아래로, 전체 펼쳐짐=====
.navig{
float:right;
width:800px;
height:100px;
z-index:1;
}
.menu{
float:right;
margin-top:30px;
margin-right:10px;
}
.menu>li{
float:left;
}
.menu>li>a{
width:180px;
height:40px;
line-height:40px;
font-size:16px;
font-weight:bold;
text-align:center;
background-color:#333333;
color:#ffffff;
}
.menu>li>a:hover{
background-color:#30a3f3;
}
.submenu{
width:180px;
height:160px;
position:absolute;
display:none;
z-index:1;
background:#ffffff;
}
.submenu>li>a{
width:180px;
height:40px;
line-height:40px;
font-size:14px;
font-weight:bold;
text-align:center;
background:#ffffff;
color:#333333;
}
.submenu>li>a:hover{
background-color:#30a3f3;
}
=====2) [가로메뉴]아래로, 전체 펼쳐짐 (+ 서브메뉴 width : 본문의 100%)=====
#navigbg{ /*차이점*/
width:1200px;
height:160px;
position:absolute;
display:none;
z-index:2;
top:100px;
background-color:#bbbbbb;
}
.navig{
float:right;
width:800px;
height:100px;
z-index:1;
}
.menu{
float:right;
margin-top:50px;
margin-right:0px;
}
.menu>li{
float:left;
}
.menu>li>a{
width:200px;
height:50px;
line-height:50px;
font-size:18px;
font-weight:bold;
text-align:center;
background-color:#333333;
color:#ffffff;
}
.menu>li>a:hover{
background-color:#006478;
}
.submenu{
width:200px;
height:160px;
position:absolute;
display:none;
z-index:3;
background-color:#bbbbbb;
}
.submenu>li>a{
width:200px;
height:40px;
line-height:40px;
font-size:16px;
font-weight:bold;
text-align:center;
background-color:#bbbbbb;
color:#333333;
}
.submenu>li>a:hover{
background-color:#006478;
}
=====3) [가로메뉴]아래로, 마우스 오버한 메뉴만 펼쳐짐=====
.navig{
float:right;
width:800px;
height:100px;
z-index:1;
}
.menu{
float:right;
margin-top:30px;
margin-right:10px;
}
.menu>li{
float:left;
}
.menu>li>a{
width:180px;
height:40x;
line-height:40px;
font-size:16px;
font-weight:bold;
text-align:center;
background-color:#333333;
color:#ffffff;
}
.menu>li>a:hover{
background-color:#30a3f3;
}
.submenu{
width:180px;
position:absolute;
display:none;
z-index:1;
}
.submenu>li>a{
height:40px;
line-height:40px;
font-size:14px;
font-weight:bold;
text-align:center;
background:#ffffff;
color:#333333;
}
.submenu>li>a:hover{
background-color:#30a3f3;
}
=====4) [가로메뉴]아래로, 마우스 오버한 메뉴만 펼쳐짐 (+ 서브메뉴 width : 메인메뉴 전체 width)=====
.navig{
float:right;
width:800px;
position:absolute;
right:0px;
top:30px;
background-color:#ffffff;
z-index:1;
}
.menu>li{
float:left;
width:200px;
background-color:#5e1742;
}
.menu>li>a{
line-height:40px;
font-size:16px;
font-weight:bold;
text-align:center;
color:#ffffff;
}
.menu>li:hover{ /*차이점*/
background-color:#c9463d;
}
.submenu{
display:none;
}
.submenu>li{ /*차이점*//*li에 hover 주기 위해 등장시킴*/
width:200px;
background-color:#ffffff;
}
.submenu>li>a{
line-height:35px;
font-size:14px;
font-weight:bold;
text-align:center;
}
.submenu>li:hover{ /*차이점*/
background-color:#c9463d;
}
=====5) [세로메뉴]아래로, 마우스 오버한 메뉴만 펼쳐짐=====
.navig {
float: left;
width: 200px;
}
.menu {
margin-top: 10px;
margin-left: 10px;
text-align: center;
}
.menu>li {
float: left;
width: 180px;
}
.menu>li>a {
line-height: 50px;
font-size: 16px;
font-weight: bold;
text-align: center;
background-color: #788402;
color: #ffffff;
}
.menu>li>a:hover {
background-color: #342628;
color: #feaa00;
}
.submenu {
float: left;
width: 100%;
display: none;
}
.submenu>li { /*차이점*/
width: 180px;
height: 50px;
}
.submenu>li>a {
line-height: 50px;
font-size: 14px;
font-weight: bold;
background-color: #cccccc;
color: #ffffff;
}
.submenu>li>a:hover {
background-color: #999999;
color: #feaa00;
}
=====6) [세로메뉴]옆으로, 마우스 오버한 메뉴만 펼쳐짐=====
.navig{
float:left;
top:100px;
left:10px;
position:absolute;
text-align:center;
z-index:1;
}
/*차이점*//*.menu 스타일은 따로 지정X*/
.menu>li{
float:left;
width:180px;
}
.menu>li>a{
width:180px;
height:40px;
line-height:40px;
font-size:16px;
font-weight:bold;
background-color:#333333;
color:#ffffff;
}
.menu>li>a:hover{
background-color:#eeeeee;
color:#000000;
}
.submenu{
float:left;
width:180px;
height:100%;
left:180px;
top:0px;
position:absolute;
background-color:#cccccc;
display:none;
z-index:1;
}
.submenu>li>a{
width:180px;
height:40px;
line-height:40px;
font-size:14px;
font-weight:bold;
background-color:#cccccc;
color:#ffffff;
}
.submenu>li>a:hover{
background-color:#999999;
color:#ffff00;
}
=====7) [세로메뉴]옆으로, 전체 펼쳐짐 (+ 서브메뉴 width : 본문의 80%)=====
#navigbg { /*차이점*/
width: calc(100% - 200px);
height: 250px;
position: absolute;
top: 150px;
left: 200px;
background-color: #353535;
opacity: 0.5;
z-index: 2;
display: none;
}
.menu{
float: left;
width: 190px;
margin-left: 10px;
}
.menu>li {
float: left;
width: 190px;
height: 50px;
}
.menu>li>a {
line-height: 50px;
font-size: 16px;
font-weight: bold;
text-align: center;
background-color: #ffffff;
color: #353535;
}
.menu>li>a:hover {
background-color: #776d70;
color: #ffffff;
}
.submenu {
width: 900px;
height: 50px;
position: relative;
top: -50px;
left: 190px;
z-index: 3;
display: none;
}
.submenu>li { /*차이점*/
float: left;
width: 180px;
height: 50px;
display: inline;
}
.submenu>li>a {
line-height: 50px;
font-size: 14px;
font-weight: bold;
text-align: center;
color: #ffffff;
}
.submenu>li>a:hover {
background-color: #333333;
color: #ffff00;
}* .navig{z-index: 1;}. #navigbg{z-index: 2;} .submenu{z-index: 3;}
[내비게이션 jQuery 분석]
=====1) [가로메뉴]아래로, 전체 펼쳐짐=====
$('.menu>li').mouseover(function(){
$('.submenu').stop().slideDown(500);
}).mouseout(function(){
$('.submenu').stop().slideUp(500);
});
=====3) [가로메뉴]아래로, 마우스 오버한 메뉴만 펼쳐짐=====
=====4) [가로메뉴]아래로, 마우스 오버한 메뉴만 펼쳐짐 (+ 서브메뉴 width : 메인메뉴 전체 width)=====
=====5) [세로메뉴]아래로, 마우스 오버한 메뉴만 펼쳐짐=====
=====6) [세로메뉴]옆으로, 마우스 오버한 메뉴만 펼쳐짐=====
$('.menu>li').mouseover(function(){
$(this).find('.submenu').stop().slideDown(500);
}).mouseout(function(){
$(this).find('.submenu').stop().slideUp(500);
//6) .submenu를 옆으로 밀어서 slideDown되게 하려면, .submenu 의 css 속성에서 'position: absolute;' 로 위치를 설정
//6) .submenu{ float:left; width:180px; height:100%; position:absolute; top:0px; left:180px; z-index:1; display:none; }
});
=====2) [가로메뉴]아래로, 전체 펼쳐짐 (+ 서브메뉴 width : 본문의 100%)=====
=====7) [세로메뉴]옆으로, 전체 펼쳐짐 (+ 서브메뉴 width : 본문의 80%)=====
$('.menu>li').mouseover(function(){
$('.submenu').stop().slideDown(500);
$("#navigbg").stop().slideDown(500);
}).mouseout(function(){
$('.submenu').stop().slideUp(500);
$("#navigbg").stop().slideUp(500);
});
//.submenu 의 width가 본문의 100%가 되게 하려면, <div id="navigbg"></div> 를 추가생성
//#navigbg{ width:1200px; height:160px; position:absolute; top:100px; z-index:2; display: none; }
4) 슬라이드
| 슬라이드 이동 방향 |
| 가로 |
| 세로 |
| fadeIn ・ fadeOut |
[슬라이드 HTML 분석]
=====가로/세로 방향 슬라이드=====
<div class="bwrap">
<div class="slide">
<div class="slidelist">
<ul>
<li>
<a href="#">
<span>대표 은행, 코리아은행</span>
<img src="images/img1.jpg" alt="이미지1">
</a>
</li>
<li>
<a href="#">
<span>차원이 다른 코리아은행</span>
<img src="images/img2.jpg" alt="이미지2">
</a>
</li>
<li>
<a href="#">
<span>더욱 쉬운 오픈뱅킹 서비스</span>
<img src="images/img3.jpg" alt="이미지3">
</a>
</li>
</ul>
</div>
</div>
=====fadeIn · fadeOut 슬라이드=====
<div class="slide">
<a href="#"> <!-- .slidelist, ul, li 없이 바로 a -->
<img src="images/img1.jpg" alt="이미지1">
<span class="imgtext">World Festival 1</span>
</a>
<a href="#">
<img src="images/img2.jpg" alt="이미지2">
<span class="imgtext">World Festival 2</span>
</a>
<a href="#">
<img src="images/img3.jpg" alt="이미지3">
<span class="imgtext">World Festival 3</span>
</a>
</div>[슬라이드 CSS 분석]
=====가로 방향 슬라이드=====
.bwrap{
width:1200px;
height:500px;
}
.slide{
width:1200px;
height:300px;
position:relative;
overflow:hidden;
}
.slidelist{
width:3600px;
}
.slidelist ul li{
width:1200px;
float:left;
}
.slidelist span{
width:500px;
height:50px;
position:absolute;
text-align:center;
color:#ffffff;
font-weight:bold;
line-height:50px;
background-color:rgba(40,40,40,0.5);
margin-left:350px;
margin-top:125px;
}
=====세로 방향 슬라이드=====
.bwrap{
width:1200px;
height:500px;
}
.slide{
width:1200px;
height:300px;
position:relative;
overflow:hidden;
}
.slidelist{
height:900px;
}
.slidelist ul li{
height:300px;
float:left;
}
.slidelist span{
width:500px;
height:50px;
position:absolute;
text-align:center;
color:#ffffff;
font-weight:bold;
line-height:50px;
background-color:rgba(40,40,40,0.5);
margin-left:350px;
margin-top:125px;
}
=====fadeIn · fadeOut 슬라이드=====
.slide{
float:right;
width:800px;
height:350px;
position:relative;
}
.imgslide>a{
display:block;
position:absolute;
}
.imgslide span{
width:160px;
text-align:center;
color:#ffffff;
font-weight:bold;
left:40%;
top:45%;
position:absolute;
background-color:rgba(200,200,200,0.5);
}[슬라이드 jQuery 분석]
=====가로 방향 슬라이드=====
setInterval(function(){
$('.slidelist').delay(2000);
$('.slidelist').animate({marginLeft: -1200});
$('.slidelist').delay(2000);
$('.slidelist').animate({marginLeft: -2400});
$('.slidelist').delay(2000);
$('.slidelist').animate({marginLeft: 0}); //marginLeft: -3600 에는 빈공간만 나옴. 처음 0 위치로 돌아가야 첫 번째 슬라이드가 나옴
$('.slidelist').delay(2000);
});
=====세로 방향 슬라이드=====
setInterval(function(){
$('.slidelist').delay(2000);
$('.slidelist').animate({marginTop: -300});
$('.slidelist').delay(2000);
$('.slidelist').animate({marginTop: -600});
$('.slidelist').delay(2000);
$('.slidelist').animate({marginTop: 0});
$('.slidelist').delay(2000);
});
=====fadeIn・fadeOut 슬라이드=====
$('.slide a:gt(0)').hide();
setInterval(function(){
$('.slide a:first-child')
.fadeOut(1000)
.next('a')
.fadeIn(1000)
.end()
.appendTo('.slide');
}, 3000);
5) 탭
| 탭 미구현 | 탭 구현 |
 |
 |
| 공지사항/갤러리를 따로 분리배치하여 제작 (클릭 이벤트X) |
공지사항/갤러리를 클릭 이벤트로 제작 |
[contents HTML 분석]
=====탭 구현X=====
<div class="contents">
<div class="notice">
<div class="tab"><h4>공지사항</h4></div>
<ul>
<li>
<a href="#">Vallery Festival 공지1<span>2022.03.01</span></a>
</li>
<li>
<a href="#">Vallery Festival 공지2<span>2022.03.01</span></a>
</li>
<li>
<a href="#">Vallery Festival 공지3<span>2022.03.01</span></a>
</li>
<li>
<a href="#">Vallery Festival 공지4<span>2022.03.01</span></a>
</li>
</ul>
</div>
<div class="gallery">
<div class="tab"><h4>갤러리</h4></div>
<ul>
<li><a href="#"><img src="images/gallery1.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/gallery2.jpg" alt="2"></a></li>
<li><a href="#"><img src="images/gallery3.jpg" alt="3"></a></li>
</ul>
</div>
<div class="shortcut">
<a href="#">
<img src="images/shortcut.jpg" alt="바로가기">
<span class="sctext">바로가기</span>
</a>
</div>
</div>
=====탭 구현O=====
<div class="contents">
<ul class="tabmenu">
<li class="active">
<a href="#">공지사항</a>
<div class="notice">
<ul>
<li>
<a href="#">
대한은행 홈페이지 개편 안내
<span>2022.03.01</span>
</a>
</li>
<li>
<a href="#">
종합생활금융 플랫폼 코리아은행
<span>2022.03.01</span>
</a>
</li>
<li>
<a href="#">
시스템 정기 점검 안내
<span>2022.03.01</span>
</a>
</li>
<li>
<a href="#">
오픈뱅킹 앱 사용법 안내
<span>2020.03.01</span>
</a>
</li>
</ul>
</div>
</li>
<li><a href="#">갤러리</a>
<div class="gallery">
<ul>
<li>
<a href="#"><img src="images/gallery1.jpg" alt="갤러리1"></a>
</li>
<li>
<a href="#"><img src="images/gallery2.jpg" alt="갤러리2"></a>
</li>
<li>
<a href="#"><img src="images/gallery3.jpg" alt="갤러리3"></a>
</li>
</ul>
</div>
</li>
</ul>
<div class="otherwrap"> <!-- otherwrap:banner와 shortcut 묶어줌 -->
<div class="banner">
<a href="#">
<h4 class="bntext">배너</h4>
<img src="images/banner.jpg" alt="배너">
</a>
</div>
<div class="shortcut">
<a href="#">
<h4 class="sctext">바로가기</h4>
<img src="images/shortcut.jpg" alt="바로가기">
</a>
</div>
</div>
</div>
</div>[contents CSS 분석]
=====탭 구현X=====
.contents{ /* C영역: 공지사항+갤러리+바로가기 영역 */
float:right;
width:800px;
height:200px;
}
.notice{
float:left;
width:300px;
height:200px;
}
.tab{
float:left;
width:300px;
}
.notice h4{
float:left;
height:50px;
line-height:50px;
}
.notice ul{
float:left;
width:280px;
height:30px;
line-height:30px;
font-size:14px;
}
.notice li span{
float:right;
}
.notice li:hover{
font-weight:bold;
}
.gallery{
float:left;
width:300px;
height:200px;
}
.gallery h4{
float:left;
height:50px;
line-height:50px;
}
.gallery ul li{
float:left;
padding:10px;
margin-top:10px;
}
.gallery img{
width:80px;
height:80px;
}
.gallery li:hover{
opacity:0.5;
}
.shortcut{
float:right;
width:200px;
height:200px;
}
.shortcut img{
float:right;
width:180px;
height:180px;
padding:10px;
}
.sctext{
width:100px;
text-align:center;
font-weight:bold;
position:absolute;
background-color:rgba(255,255,255,0.5);
margin-top:85px;
margin-left:50px;
}
=====탭 구현O=====
.contents{
float:left;
width:1200px;
height:200px;
position:absolute;
}
.tabmenu{
float:left;
width:395px;
height:180px;
margin-top:10px;
margin-bottom:10px;
}
.tabmenu>li{
float:left;
width:100px;
line-height:30px;
}
.tabmenu>li>a{
display:block;
font-size:16px;
text-align:center;
background-color:#cccccc;
border:1px solid #dddddd;
border-bottom:none;
}
.tabmenu>li>a:hover{
background-color:#eeeeee;
}
.tabmenu>li:first-child a{
border-right:none;
}
.tabmenu>li.active>a{
background-color:#ffffff;
}
.tabmenu>li div{
position:absolute;
left:0px;
height:0px;
overflow:hidden;
}
.tabmenu>li.active div{
width:393px;
height:148px;
border:1px solid #dddddd;
z-index:1;
}
.notice ul{
float:left;
width:393px;
margin-top:12px;
margin-bottom:12px;
}
.notice li{
height:32px;
line-height:32px;
font-size:15px;
margin-left:10px;
margin-right:10px;
}
.notice li:nth-child(2n){
background-color:#cccccc;
}
.notice li span{
float:right;
}
.notice li:hover{
font-weight:bold;
}
.gallery li{
float:left;
margin-top:15px;
margin-left:5px;
}
.gallery img{
width:100px;
height:100px;
padding:10px;
}
.gallery li:hover{
opacity:0.5;
}
.otherwrap{
float:right;
width:800px;
height:200px;
}
.banner{
float:left;
width:395px;
height:180px;
margin-top:10px;
margin-bottom:10px;
}
.banner img{
float:left;
width:395px;
height:180px;
}
.bntext{
float:left;
width:300px;
height:40px;
position:absolute;
text-align:center;
color:#ffffff;
font-weight:bold;
line-height:40px;
background-color:rgba(40,40,40,0.3);
left:450px;
top:80px;
}
.banner img:hover{
opacity:0.5;
}
.shortcut{
float:right;
width:400px;
height:180px;
margin-top:10px;
margin-bottom:10px;
}
.shortcut img{
float:right;
width:400px;
height:180px;
}
.sctext{
float:right;
width:300px;
height:40px;
position:absolute;
text-align:center;
color:#ffffff;
font-weight:bold;
line-height:40px;
background-color:rgba(40,40,40,0.3);
left:850px;
top:80px;
}
.shortcut img:hover{
opacity:0.5;
}[contents jQuery 분석]
=====탭 구현X=====
N/A
=====탭 구현O=====
$(function(){
$('.tabmenu>li>a').click(function(){
$(this).parent().addClass("active") //a의 부모요소는 li; li에 class 'active'를 추가
.siblings().removeClass("active") //li의 다른 형제요소를 찾은 뒤 class 'active' 삭제
return false; //click 이벤트 처리를 중단하고 함수를 호출한 곳으로 즉시 돌아가도록 함
});
});
/*HTML의 요소들은 중첩되어 있음. 따라서 a 요소를 클릭하면 이 요소를 감싸고 있는 부모 요소들도 클릭한 것처럼 이벤트에 반응함('이벤트 버블링').
∴ 현재 이벤트를 중지하고 그 이벤트가 부모 요소에 전달되지 않도록 하기 위해 return false를 사용.
BUT, 자바스크립트 해석기가 retuen false를 만나는 즉시 코드 실행을 중지하기 때문에 return false 다음에 다른 문장을 쓰지 않도록 주의(무소용 돼버림)*/
6) 팝업
모든 타입 : 공지사항 첫 번째 컨텐츠 클릭시 팝업 등장 & 레이어 팝업(기존 창 위에 레이어 형태로 겹쳐진 팝업(새창x)
| 레이어 팝업 | 모달 레이어 팝업 |
 |
 |
| 기존 창 위에 레이어 형태로 팝업이 등장 | 기존 창 위에 레이어 형태로 팝업이 등장 BUT 기존 창은 작동(클릭) 안됨 |
[레이어/모달 레이어 팝업 HTML 분석]
<div id="layer"> /*모달 레이어 팝업의 경우 id="modal"*/
<div class="layerup"> /*모달 레이어 팝업의 경우 class="modalup"*/
<div class="uptitle">무궁화 축제</div>
<div class="upbody">
무궁무궁 무궁화 무궁화는 우리꽃
피고 지고 또 피어 무궁화라네~
광복절을 맞이하여 무궁화 축제가 열립니다.
무궁화 전시, 무궁화 체험, 공연 등 많은 참여를 바랍니다.
</div>
<button>X 닫기</button>
</div>
</div>[레이어 팝업 CSS 분석]
=====레이어 팝업=====
#layer{
position: absolute;
z-index: 1;
display: none;
}
#layer.active{
display: block;
}
.layerup{
background-color: #ffffff;
width: 500px;
height: 400px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
=====모달 레이어 팝업=====
#modal{
background-color: rgba(0, 0, 0, 0.6);
width: 100%; //레이어 팝업과 다르게, 모달 레이어 팝업은 그 크기를 지정함(화면 전체)
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
diaplay: none;
}
#modal.active{
display: block;
}
.modalup{
background-color: #ffffff;
width: 500px;
height: 400px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}[레이어 팝업 jQuery 분석]
=====레이어 팝업=====
$('.notice li:first').click(function(){ //'.notice li:first' : .notice 요소의 후손 요소(li) 중 첫 번째 요소를 클릭(first-child ・ first-of-type 은 자식 요소)
$("#layer").addClass("active"); //<div id="layer"></div> 안에 팝업 요소들 all 포함되어있음. 이게 나타나야(display: block;) 그 요소들이 보이게 됨
});
$('button').click(function(){
$("#layer").removeClass("active");
});
=====모달 레이어 팝업=====
$('.notice li:first').click(function(){
$("#modal").addClass("active");
});
$('button').click(function(){
$("#modal").removeClass("active");
});
7) 갤러리
모든 타입 : 마우스 오버시 opacity 조절
출처 : https://lpla.tistory.com/4, https://graykick.tistory.com/8, 「이기적 웹디자인기능사 실기 기본서」
