레이아웃 만들기
웹디자인 기능사 실기 뿌시기
해당 그림처럼 출력이 되게끔 만드는 것이 웹 디자인 실기 입니다. 해당 그림에서는 이미지가 멈춰 있지만 실제론 이미지 3장이 번갈아 가면서 출력이 됩니다. 그부분에 대해 오늘 공부해보도록 하겠습니다.
Html, CSS, Jquery 사용 방법
일단 레이아웃 부터 잡고 시작해야 합니다.
아래와 같이 html로 먼저 레이아웃을 잡고 시작합니다. 코드를 살펴 보자면
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<body>
<div id="wrap">
<header id="header">
<h1 class="logo">
<a href="#">유진건설</a>
</h1>
<nav class="nav">
<ul>
<li><a href="#">회사소개</a>
<ul>
<li><a href="#">인사말</a></li>
<li><a href="#">조직구성도</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</li>
<li><a href="#">사업영역</a>
<ul>
<li><a href="#">전원주택</a></li>
<li><a href="#">도시재생</a></li>
<li><a href="#">인테리어</a></li>
</ul>
</li>
<li><a href="#">입주정보</a>
<ul>
<li><a href="#">입주단지</a></li>
<li><a href="#">입주캘린더</a></li>
</ul>
</li>
<li><a href="#">고객센터</a>
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">건축상담</a></li>
<li><a href="#">홍보자료실</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- //header -->
<article id="slider">
<div class="slider-wrap">
<div class="slider s1">
<a href="#"><img src="images/banner01.jpg" alt="미래를 구축하는 혁신"></a>
<div class="text">
<h2>미래를 구축하는 혁신</h2>
<p>여러분의 비전을 현실로 만들어드립니다.</p>
</div>
</div>
<div class="slider s2">
<img src="images/banner02.jpg" alt="최상의 퀄리티로">
<div class="text">
<h2>최상의 퀄리티로</h2>
<p>고객 만족을 넘어 고객 감동 추구</p>
</div>
</div>
<div class="slider s3">
<img src="images/banner03.jpg" alt="지속 가능한 건축을 선도">
<div class="text">
<h2>지속 가능한 건축을 선도</h2>
<p>환경을 생각하는 건설 솔류션</p>
</div>
</div>
</div>
</article>
<!-- //slider -->
<main id="main">
<section class="notice">
<h3>공지사항</h3>
<div>
<ul>
<li><a href="#">미래를 건설하는 혁신적인</a><span>2024.04.16</span></li>
<li><a href="#">유진 건설 승진자 명단</a><span>2024.04.17</span></li>
<li><a href="#">유진 건설 세미나실 이용 안내</a><span>2024.04.18</span></li>
<li><a href="#">소방훈련 계획 일자</a><span>2024.04.19</span></li>
</ul>
</div>
</section>
<!-- //notice -->
<section class="gallery">
<h3>갤러리</h3>
<ul>
<li><a href="#">
<img src="images/gallery01.jpg" alt="건축 이미지1">
</a>
</li>
<li><a href="#">
<img src="images/gallery02.jpg" alt="건축 이미지2">
</a>
</li>
<li><a href="#">
<img src="images/gallery03.jpg" alt="건축 이미지3">
</a>
</li>
</ul>
</section>
<!-- //gallery -->
<section class="link">
<h3>이벤트 바로가기</h3>
<a href="#">바로가기</a>
</section>
<!-- //link -->
</main>
<!-- //main -->
<footer id="footer">
<div class="left">
<div class="menu">
<ul>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">저작권보호정책</a></li>
<li><a href="#">이메일무단수집거부</a></li>
<li><a href="#">CCTV설치 및 운영</a></li>
</ul>
</div>
<div class="copy">
COPYRIGHT 2024, All Rights Reserve
</div>
</div>
<div class="right">
<select>
<option value="1">가나 건설회사</option>
<option value="2">다라 건설회사</option>
<option value="3">마바 건설회사</option>
</select>
</div>
</footer>
<!-- //footer -->
</div>
이런식으로 코드가 짜인것을 볼 수 있습니다. 하지만 html만 이렇게 해놨다고 해서 그림처럼 나오는것은 아닙니다. css까지 해줘야 해당 그림처럼 나올 것입니다.
그러면 css를 살펴 보도록 하겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
@charset "UTF-8";
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
#wrap {
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
#header {
width: 100%;
display: flex;
background-color: #85b5aa97;
position: relative;
z-index: 1000;
}
#header .logo {
width: 20%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
#header .logo a {
color: #1ac09c;
}
#header .nav {
width: 80%;
height: 100px;
display: flex;
justify-content: right;
}
#header .nav>ul {
display: flex;
margin-top: 60px;
}
#header .nav>ul>li>a {
width: 100%;
padding: 10px 40px;
display: inline-block;
background-color: #85b5aaa2;
}
#header .nav>ul>li>ul {
text-align: center;
display: none;
}
#header .nav>ul>li>a:hover {
background-color: #51c8acbb;
}
#header .nav>ul>li>ul>li {
background-color: #73beace8;
}
#header .nav>ul>li>ul>li>a {
width: 100%;
padding: 10px 40px;
display: inline-block;
}
#header .nav>ul>li>ul>li>a:hover {
background-color: #2cba99d6;
}
#slider {
width: 100%;
height: 300px;
background-color: #bbb;
}
.slider-wrap {
display: flex;
}
.slider-wrap .slider {
position: relative;
}
.slider-wrap .slider img {
vertical-align: top;
}
.slider-wrap .slider .text {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
padding: 10px 20px;
}
#main {
width: 100%;
display: flex;
}
#main .notice {
width: 33.3333%;
height: 200px;
padding: 20px;
background-color: #89c4b6d6;
}
#main .notice h3 {
font-size: 24px;
margin-bottom: 10px;
}
#main .notice li {
display: flex;
justify-content: space-evenly;
line-height: 1.8;
}
#main .notice li a {
width: 70%;
}
#main .notice li a:hover {
text-decoration: underline;
text-underline-position: under;
}
#main .notice li span {
width: 30%;
text-align: right;
}
#main .gallery {
width: 33.3333%;
height: 200px;
padding: 20px
}
#main .gallery h3 {
font-size: 24px;
margin-bottom: 10px;
}
#main .gallery ul {
display: flex;
}
#main .gallery ul li {
margin-right: 15px;
transition: all 0.3s;
}
#main .gallery ul li:hover {
opacity: 0.4;
}
#main .gallery ul li img {
vertical-align: top;
}
#main .link {
width: 33.3333%;
height: 200px;
background-image: url(../images/event.jpg);
background-size: cover;
background-position: center;
padding: 20px;
position: relative;
;
}
#main .link h3 {
color: #fff;
}
#main .link a {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #fff;
text-align: center;
line-height: 100px;
border-radius: 50%;
font-size: 20px;
transition: all 0.3;
}
#main .link a:hover {
background-color: rgba(255, 255, 255, 0.4);
}
#footer {
width: 100%;
height: 100px;
display: flex;
background-color: #ddd;
}
#footer .left {
width: 80%;
}
#footer .left .menu {
padding: 20px;
}
#footer .left .menu ul {
display: flex;
justify-content: center;
}
#footer .left .menu li {
padding: 3px 10px;
}
#footer .left .menu li a:hover {
text-decoration: underline;
text-underline-position: under;
}
#footer .left .copy {
text-align: center;
}
#footer .right {
height: 20%;
}
#footer .right select {
border: 1px solid #000;
padding: 10px 20px;
font-size: 16px;
margin-top: 30px;
}
코드를 딱 보면 어렵다고 생각이 들 수도있지만 레이아웃 잡는 부분만 기억하고 계시면 만드는건 쉬울 것입니다. 이렇게 레이아웃을 다 만드시고 이제 홈페이지 안에 기능을 구현해야 하는데 그나마 외우기도 쉽고 어렵지 않은 jquery를 사용 하도록 하겠습니다.
jquery를 사용 하기 전 그 함수를 불러 줄수있는 스크립트를 선언해 줘야합니다. 저흰 google에서 제공해준 jquery를 사용할 것입니다.
1
2
3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
이렇게 스크립트를 먼저 선언해 준 후 이제 본격적으로 기능을 구현해 주시면 됩니다. 먼저 1차 메뉴를 클릭하면 alert 되는것 부터 천천히 보여드리면서 어떻게 작동되는지 보도록 하겠습니다.
1
2
3
4
5
$(function () {
$(".nav>ul>li").click(function() {
alert("실행")
});
});
해당 코드를 해석해 보면 .nav>ul>li에 있는 메뉴를 클릭 하게 되면 “실행” 이라는 문구가 나오게 해달라는 뜻입니다.
그 전에 Jquery를 사용 하기 위해
1
$(function (){})
사용하겠다고 선언을 해줘야 합니다.
다음 문제로 1차 메뉴에 hover 했을 때 1차 메뉴 배경색을 빨간색으로 변하게 할 것입니다. ````javascript $(".nav>ul>li").mouseover(function() { $(".nav>ul>li>a").css("backgroundColor", "red"); 혹은 $(".nav>ul>li").mouseover(function(){ $(this).find("a").css("backgroundColor", "red"); }); }) ```` 코드를 살펴보게 된다면 .nav>ul>li에 마우스를 갖다 대었을때 li밑에 a를 찾고 백그라운드를 빨강색으로 변경 하라는 뜻입니다.
이제 사진 슬라이드가 왼쪽에서 오른쪽으로 넘어가게 만드는 Jquery를 살펴 보도록 하겠습니다. ````javascript $(function () { let currentIndex = 0; $(".slider-wrap").append(".slider").first().clone(true); //첫번쨰 이미지를 복사하여 마지막에 추가 setInterval(() => { currentIndex++; // 현재 이미지 1씩 증가 $(".slider-wrap").animate({ marginLeft: -currentIndex * 100 + "%" }, 600); if (currentIndex == 3) { // 마지막 이미지 일때 setTimeout(() => { $(".slider-wrap").animate({ marginLeft: 0 }, 0); // 애니메이션 정지 currentIndex = 0; // 현재 이미지를 초기화 }, 700); } }, 3000); }); ```` 해당 코드를 보면 let currentIndex = 0 으로 선언하였고 $(".slider-wrap)에서
.append(".slider").first().clone(true)를 한것을 볼 수 있는데 이 코드를 해석하자면 슬라이더 첫번째 사진을 복사 할것인가?
Yes (true) 이런식으로 만들어진 것이다.
그 후 setInterval() 코드를 사용해 몇초에 한번씩 불러오겠다 라는 함수를 선언해 주면 된다.
bcurrentIndex++를 사용해 현재 이미지를 1씩증가 시켜 주었고, $(".slider-wrap").animate를 사용해 marginLeft: 를 -currentIndex * 100 + "%" 하였던 것이다.
숫자로 표현하자면 -100% 를 뜻하게 된것이다.
그렇게 1,2,3 까지 넘어가서 마지막 이미지 일때 animate marginLeft :0 을 주어서 애니메이션을 정지 시키고 currentIndex =0 으로 주어서 현재 이미지를 초기화 시키게 된것이다.
이렇게 해서 이미지 슬라이드가 작동되는 원리를 알게되었습니다. 그럼 #### 다음시간에 계속! 
This post is licensed under CC BY 4.0 by the author.