* 참고 자료 : 코드잇 HTML/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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position</title>
<style>
.p1{
border: 1px solid red;
margin: 30px;
padding: 30px;
}
.p2{
border: 1px solid blue;
margin: 30px;
padding: 30px;
}
.p3{
border: 1px solid green;
margin: 30px;
padding: 30px;
}
b {
font-size: 28px;
background-color: orange;
}
</style>
</head>
<body>
<p class="p1">
Love, l-l-love, l-l-love
How you love to hate me
Kinda sad that you always been like that
See me making waves and you don't like that
Driving through your puddles goin' splish splash
(Splish, splash, splish, splash)
<b>Stressing over nothing </b>baby relax
While you gettin' angry, I'ma kick back
Only thing I think about is big stacks
(Racks, racks)
Negative days, negative nights
Baby, you're wasting all your time
I can't relate, I keep it light
No, no, no drama in my life
</p>
<p class="p2">
Wake up, yeah
Makeup, maybe
I need you, nah
I been good lately
Blowin' up
Workin' busy
You ain't worth my love
If you only love to hate me
Love, l-l-love, l-l-love
How you love to hate me
Love, l-l-love, l-l-love
You ain't worth my love
If you only love to hate me
I'ma let you fade into the background
Baby all my shows are gettin' too loud
Keep on turin' it up when you want me down (me down, me down, me down)
Negative days, negative nights
Baby you're wasting all your time
I can't relate, I keep light
No, no, no drama in my life
</p>
<p class="p3">
Wake up, yeah
Makeup, maybe
I need you, nah
I been good lately
Blowin' up
Workin' busy
You ain't worth my love
If you only love to hate me
Love, l-l-love, l-l-love
How you love to hate me
Love, l-l-love, l-l-love
You ain't worth my love
If you only love to hate me
Love to hate me, you hate to love me
I'm takin back what you've taken from me
You're mistaken honey, this something that
Remind me why I be alone, on my own
If I needed you, I'd have you that I know, hold up
I could do bad by myself, don't need help
One of a kind, the hand that I was dealt, like oh well
Felt, cupid was stupid, I should have knew it
'Cause I been through it, you wouldn't do it if it ain't foolish, stupid
</p>
</body>
</html>
|
cs |
이 코드를 가지고 relative포지션과 fixed포지션을 공부해보자.
1. relative 포지션
검사를 통해서 b태그의 포지션을 보면 static이라고 나와있다.
b태그 이외에도 모든 요소들은 기본적으로 static이다.
static 포지션은 원래 있어야 할 위치에 위치되어 있다는 뜻이다.
이제 b태그에
position: relative;
top: 30px;
을 추가해보자.
b태그가 원래있어야할 위치에서 이동을 했다.
relative가 한국말로 상대적인 이라는 뜻으로 위 코드는 원래 있어야 할 공간에서 이동해서 위로 30px의 공간을 주게 된다
margin과 다른 점?
(1) relative를 사용해 top에 30px left에 50px
(2) margin을 사용해 margin-top에 50px, margin-left에 30px
위의 두 사진을 비교해보면 알겠지만,
margin은 여유공간이 생기면 b태그 말고 다른 요소들이 맞춰서 같이 이동하는 반면
relative는 다른 요소들은 있던 곳에 그대로 있고 b태그만 원래 있던 위치를 비워두고 이동한다.
따라서 요소들이 겹치는 레이아웃을 하고 싶을 때에는 relative를 이용하면 된다.
2. fixed 포지션
b태그에 아래와 같이 적어보자.
position: fixed;
top: 30px;
left: 50px;
새로고침을 해보면
b태그가 위쪽으로 이동한 것을 확인할 수 있는데 relative포지션은 원래 요소의 위치를 기준으로 포지셔닝을 해주었지만 fixed포지션은 브라우저를 기준으로 포지셔닝해준다.
따라서 브라우저의 맨 위에서 30px 브라우저의 왼쪽에서 50px 위치로 이동한다.
fixed라는 것은 고정되어있다는 뜻이기에
스크롤을 내려도 그 자리에 고정이 되어있다.
또한 relative포지션은 요소가 이동을 하면 그 요소가 있던 원래 위치는 공백으로 비워두는 반면
fixed포지션은 원래 있던 곳과는 전혀 상관이 없어진다.
보통 fixed포지션은 내비게이션 바에 사용이 된다.
3. absolute 포지션
가장 가까운 포지셔닝이 된 조상 요소가 기준이 된다.
여기서 포지셔닝이 된 요소란 relative, fixed 등을 말한다. 반면에 static 같은 기본 포지션은 포지셔닝이 안된 요소라고 한다.
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position</title>
<style>
.red{
background-color: red;
width: 500px;
height: 500px;
}
.green{
background-color: green;
width: 300px;
height: 300px;
}
.blue{
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="red">
<div class="green">
<div class="blue">
</div>
</div>
</div>
</body>
</html>
|
cs |
이 코드를 가지고 absolute 포지션을 공부해보자.
green div를 relative 포지셔닝해보면,
position: relative;
top: 40px;
left: 90px;
green 박스 위로 40px 왼쪽으로 90px의 공간이 생겼다.
이제 blue div를 absolute로 포지셔닝해보자.
position: absolute;
bottom: 40px;
위에서 말했듯 absolute포지션은 가장 가까운 포지셔닝이 된 요소를 기준으로 한다.
blue div의 가장 가까운 조상은 green div이고 green div는 포지셔닝이 되어있기 때문에 blue div는
green div를 기준으로 아래에 40px공간을 주고 위치를 잡게 된다.
'웹 > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] 리스트, 리스트 스타일링 / 2021.09.09 (1) | 2021.09.09 |
|---|---|
| [HTML/CSS] display 디스플레이/ 2021.08.28 (1) | 2021.08.28 |
| [HTML/CSS] box-sizing / 2021.08.28 (0) | 2021.08.28 |
| [HTML/CSS] Border 테두리/ 2021.08.26 (0) | 2021.08.26 |
| [HTML/CSS] Width, Height, Overflow / 2021.08.26 (0) | 2021.08.26 |
