sticky 를 이용한 웹 소개 페이지 만들기

티스토리 뷰

HTML , CSS , JS

sticky 를 이용한 웹 소개 페이지 만들기

플레지 2019. 6. 1. 15:40

오늘은 이와 같은 페이지를 만들어보겠습니다.

얼마 전에 유튜브로 sticky를 이용하여 홈페이지 화면을 만드는 영상을 보았습니다. 본영상을 바탕으로 최대한 비슷하게 구현해보겠습니다.

wallpaper은 pixabay에 있는 사진을 이용하였습니다.

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
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
261
262
263
264
265
266
267
268
269
270
271
272
273
274

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
 
 
 
<header>
<h2>
I see the fifth season.
</h2>
<p>
    You know, if it's love, it's love
They can tell.
without confusion
He said he can recognize it.
Now I'm sure who he is.
</p>
</header>
 
 
<div class="main-area">
    <div class="main-left">
        <div class="sticky">
        <ul>
            <li> <a href="https://qwe2--kind.repl.co/"> Home </a> </li>
            <li> <a href="https://qwe2--kind.repl.co/"> About </a> </li>
            <li> <a href="https://qwe2--kind.repl.co/"> contact </a> </li>
            <li> <a href="https://qwe2--kind.repl.co/"> exit </a> </li>
            <li> <a href="https://qwe2--kind.repl.co/"> address </a> </li>
        </ul>
        </div> <!-- sticky -->
    </div> <!-- main-left -->
 
 
<div class="main-right">
 
    <div class="right-one">
    <div class="Section">
            <h2> Section1 </h2>
        <div class="line"> </div>
    </div>
    </div>
 
<div class="topic1">
    <h2> topic1 </h2>
<p> I think it's you, white in my heart. 
Fluttering the petals.
I think it's you. I think it's you. 
It's piled up again and again
 
And you sprout a little bud. 
Zaroudry, who grew up.
in dark green 
You fill my sky,
 
And you're a little bit of a man of my heart. 
The perceptual change is from you.
I feel like I've changed.
 
far back there behind the tree 
I see the fifth season.
It's the first thrill I've ever felt. 
Your name makes me jump.
 
You know, if it's love, they can tell right away.
They're not confused. They're always able to figure it out.
Now I know who he is.
I was sure. </p>
</div>
 
<div class="topic1">
    <h2> topic1 </h2>
<p> lalalalalala you bloom on me 
as dizzy as a haze
lalalalalala, you're coming to me. 
a wide-eyed dream
 
I think it's you. The low whistle. 
The sound of calling me from somewhere.
Every time I step on my foot,
This is somewhere else.
 
It's like you're the one who's dying. 
a fine painting even in the sunset
It's like everything's different.
 
over your shoulder 
I see the fifth season.
It's the first thrill I've ever felt. 
Your smile makes my heart beat.
 
It's obvious that love can tell right away.
They're not confused. They're always able to figure it out.
Now I know who he is.
I was sure. </p>
</div>
 
 
 
<div class="topic1">
    <h2> topic1 </h2>
<p> lalalalalala you bloom on me 
as dizzy as a haze
lalalalalala, you're coming to me. 
a wide-eyed dream
 
I think it's you. The low whistle. 
The sound of calling me from somewhere.
Every time I step on my foot,
This is somewhere else.
 
It's like you're the one who's dying. 
a fine painting even in the sunset
It's like everything's different.
 
over your shoulder 
I see the fifth season.
It's the first thrill I've ever felt. 
Your smile makes my heart beat.
 
It's obvious that love can tell right away.
They're not confused. They're always able to figure it out.
Now I know who he is.
I was sure. </p>
</div>
 
 
    <div class="right-two">
    <div class="Section">
            <h2> Section2 </h2>
    <div class="line" > </div>
    </div>
    </div>
 
 
<div class="topic2">
    <h2> topic2 </h2>
<p> lalalalalala you bloom on me 
as dizzy as a haze
lalalalalala, you're coming to me. 
Slowly across the horizon.
 
Come on up to me. You're going to have to do it now. 
It'll stay in my heart.
I've been imagining it all this time, yeah
 
I was wondering what love feels like. 
I don't know if you're
That's when someone said something nice to me.
 
You know, if it's love, they can tell right away.
They're not confused. They're always able to figure it out.
Now I'm going to tell you who he is. 
I was sure.
 
You bloom on me. (Ah) 
as dizzy as a haze
You're coming to me. (Ah) 
a wide-eyed dream
 
a dream of love</p>
</div>
 
<div class="topic2">
    <h2> topic2 </h2>
<p> lalalalalala you bloom on me 
as dizzy as a haze
lalalalalala, you're coming to me. 
Slowly across the horizon.
 
Come on up to me. You're going to have to do it now. 
It'll stay in my heart.
I've been imagining it all this time, yeah
 
I was wondering what love feels like. 
I don't know if you're
That's when someone said something nice to me.
 
You know, if it's love, they can tell right away.
They're not confused. They're always able to figure it out.
Now I'm going to tell you who he is. 
I was sure.
 
You bloom on me. (Ah) 
as dizzy as a haze
You're coming to me. (Ah) 
a wide-eyed dream
 
a dream of love </p>
</div>
 
 
 
<div class="topic2">
    <h2> topic2 </h2>
<p> lalalalalala you bloom on me 
as dizzy as a haze
lalalalalala, you're coming to me. 
Slowly across the horizon.
 
Come on up to me. You're going to have to do it now. 
It'll stay in my heart.
I've been imagining it all this time, yeah
 
I was wondering what love feels like. 
I don't know if you're
That's when someone said something nice to me.
 
You know, if it's love, they can tell right away.
They're not confused. They're always able to figure it out.
Now I'm going to tell you who he is. 
I was sure.
 
You bloom on me. (Ah) 
as dizzy as a haze
You're coming to me. (Ah) 
a wide-eyed dream
 
a dream of love </p>
</div>
 
 
     <div class="right-three">
    <div class="Section">
            <h2> Section3 </h2>
    <div class="line" > </div>
    </div>
     </div>
 
 
<div class="topic3">
    <h2> topic3 </h2>
<p> ARIN accomplishes this by carrying out its core service, which is the management and distribution of Internet number resources such as Internet Protocol (IP) addresses and Autonomous System Numbers (ASNs). ARIN manages these resources within its service region, which is comprised of Canada, the United States, and many Caribbean and North Atlantic islands. ARIN also coordinates policy development by the community and advances the Internet through informational outreach </p>
</div>
 
<div class="topic3">
    <h2> topic3 </h2>
 
<p> ARIN accomplishes this by carrying out its core service, which is the management and distribution of Internet number resources such as Internet Protocol (IP) addresses and Autonomous System Numbers (ASNs). ARIN manages these resources within its service region, which is comprised of Canada, the United States, and many Caribbean and North Atlantic islands. ARIN also coordinates policy development by the community and advances the Internet through informational outreach </p>
</div>
 
 
 
<div class="topic3">
    <h2> topic3 </h2>
 
<p> ARIN accomplishes this by carrying out its core service, which is the management and distribution of Internet number resources such as Internet Protocol (IP) addresses and Autonomous System Numbers (ASNs). ARIN manages these resources within its service region, which is comprised of Canada, the United States, and many Caribbean and North Atlantic islands. ARIN also coordinates policy development by the community and advances the Internet through informational outreach </p>
</div>
 
 
 
 
 
 
</div> <!--  main-right  -->
 
</div> <!-- main-area -->
 
 
<footer>
    <p> ‘비밀정원’을 작곡했던 스티븐리(Steven Lee)와 "불꽃놀이"로 함께 호흡을 맞춘 스웨덴 싱어송라이터 캐롤라인 구스타브슨 (Caroline Gustavsson), 트와이스, 동방신기, 태연 등 여러 국내외 아티스트들의 악곡을 제작한 영국 프로듀서 조로렌스 (Joe Lawrence)가 의기투합하여 만든 곡으로 화려하면서도 감성적인 오케스트레이션과 두근거리는 느낌의 올개닉(Organic) 드럼사운드의 클래식한 사운드를 배경으로, 그 위에 모던 일렉트로닉 댄스음악 사운드를 녹여낸 곡이다. 소녀에게 다가온 두근거리는 사랑의 감정을 다섯 번 째 계절로 비유한 서정적인 가사와 오마이걸의 풍성하고 감성적인 보컬이 곡의 분위기를 배가 시킨다.
 </p>
</footer>
 
 
  </body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter

 

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

*{
    padding : 0;
    margin: 0;
}
 
header{
    background-image:url("land.jpg") ;
    background-position: center center;
    background-size:cover;
    height: 100vh;
    width: 100% ;
    text-align: center;
    color: #222;
    font-weight: bold;
}
header h2{
 
 
    font-size: 100px;
    padding-top: 30% ;
}
header p{
    font-size: 15px;
}
 
 
.main-left{
    width : 20%;
    height: 1700px;
    float: left;
    position: relative;
    background-color: #666;
}
 
.main-left .sticky{
    top :  50px;
    background: red;
    position: sticky;
    font-size: 40px;
    margin: 30px;
    width: 200px;
    height: 300px;
    align-items: center;
    justify-content: center;
}
 
.sticky ul{
    list-style: none;
    float: left;
    padding: 10px;
}
 
.sticky ul li a{
    text-decoration: none;
    color:aliceblue;
    font-weight: bold;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    border-bottom:  2px solid aliceblue;
 
}
 
.Section h2{
font-size: 40px;
}
 
.line{
    height: 3px;
    background-color: #222;
    display: inline-block;
    width: 80px;
    transform: translateY(-15px);
}
 
.main-right{
width: 80%;
height: 1700px;
float: right;
position: relative;
background-color:#666;
}
 
.main-right .Section{
    text-align: center;
}
 
.topic1, .topic2, .topic3 {
    width : 30%;
    float: left;
    margin: 0 15px;
    padding-bottom: 200px;
}
 
footer{
    clear: both;
    background-color: #222;
    color :aliceblue;
    font-size: 15px;
    text-align: center;
    vertical-align: middle;
    padding: 40px 80px;
    justify-items: center;
 
}
 
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter

 

*position : sticky라는 속성을 이용하여 화면 원하는 위치에 달라붙어 있을 수 있도록 하였습니다.

fixed 와 어떻게 다른지 공부가필요합니다.

완성 링크 : https://qwe2--kind.repl.co/

저작자표시

'HTML , CSS , JS' 카테고리의 다른 글

사이드바와 checkbox 를 이용한 페이지 만들기2 (0)	2019.06.02
사이드바와 checkbox 를 이용한 페이지 만들기 (0)	2019.06.01
버튼을 이용한 페이지 느낌 내기 (0)	2019.05.22
border-radius-property (0)	2019.05.15
CSS-border 속성(property) (0)	2019.05.15

공지사항

일상생활 가능한 덕후가 되려면 노력해야겠죠.

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			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

글 보관함

팡팡

티스토리 뷰

sticky 를 이용한 웹 소개 페이지 만들기

HTML

css

'HTML , CSS , JS' 카테고리의 다른 글

티스토리툴바