Front-endCSS

CSS 레이아웃 핵심속성 position

⏱ 읽기 소요 시간: 43 분

position 속성

position 속성 중에 relative, absolute가 거의 90%의 비율로 사용된다.

position: relative;

  • position: relative;는
    현재 이미지를 기준으로 변화를 주겠다는 의미이다.
  • relative는 주위 환경에 영향을 끼치지 않으면서
    위치를 조정한다.

position: absolute;

  • 부모에 relatvie를 주지 않으면,
    전체창 기준으로 position: absolute;를 준 요소가 배치된다.

  • 절대적인 기준점은 원래는 전체 창이다.

  • 부모로 계속 올라가다가 relatvie를 만나면,
    그 relative를 기준으로
    absolute 준 요소가 배치된다.

  • absolute 준 요소는 공간을 차지하지 못한다.

  • 자기가 차지하고 있는 공간을 다 버리고 뜬다.
  • 즉, 부모 요소에 상관없이 뜬다.

float속성과 position속성을 이용하여 예제를 만들어 봅시다.

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>WOOD</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <!-- 클래스의 장점: 여러 개를 만들어놓고
       재활용할 수 있다는 장점이 있다. -->
    <!-- wrapper의 역할은 동일하다. 가운데 정렬 -->
    <div class="header">
      <div class="wrapper">
        <div class="container">
          <!-- float할 요소는 마크업에서 뒤따라오는 요소들과 섞이는 성질이 있기 때문에
            오른쪽에 위치하고 있더라도 가장 상단에 마크업 해야 한다. -->
          <img class="container-bg" src="./images/axe.png" alt="" />
          <h1>OAK <span>LABORATORY</span></h1>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
            commodo ligula eget dolor. Aenean massa. Cum sociis natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
            Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
            aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
            imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
            mollis pretium. Integer tincidunt
          </p>
        </div>
      </div>
    </div>
    <div class="contents">
      <div class="wrapper">
        <ul class="grid">
          <li>
            <!-- li에는 class를 달지 않아도 됨
            li안에 li가 있는 게 아니므로
            왠만하면 class를 붙이는 게 좋음.
            type selector는 불안정한 부분이 많음
            -->
            <img src="./images/type-a.png" alt="" />
            <div class="grid-title">
              <h2>Tree House</h2>
              <a href="">Play</a>
            </div>
          </li>
          <li>
            <!-- li에는 class를 달지 않아도 됨
            li안에 li가 있는 게 아니므로
            왠만하면 class를 붙이는 게 좋음.
            type selector는 불안정한 부분이 많음
            -->
            <img src="./images/type-b.png" alt="" />
            <div class="grid-title">
              <h2>Furniture</h2>
              <a href="">Play</a>
            </div>
          </li>
          <li>
            <img src="./images/type-c.png" alt="" />
            <div class="grid-title">
              <h2>Wave Woods</h2>
              <a href="">Play</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer"><div class="wrapper">2015 © OAK LABORATORY</div></div>
  </body>
</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
/* CSS Reset */
body,
h1,
h2,
p,
ul {
  /* CSS 초기화를 위한 body */
  /* 브라우저마다 기본 설정된 margin이 있으므로  0으로 초기화해야 함*/
  /* margin 병합 현상을 해결하기 위해서 먼저 margin을 0으로 줘서 
  브라우저 내장 스타일인 margin에 조건에 맞는 margin이 0이라 존재하지 않아서
  마치 적용되지 않은 것처럼 보이는 것임 
  */
  margin: 0;
  padding: 0;
  /* p태그에는 padding이 없지만, 통상적으로 같이 묶어서 초기화하려고 묶어서 padding: 0을 줌.  */
}
li {
  list-style-type: none;
}
/* Common */
.wrapper {
  width: 960px;
  margin: 0 auto;
}

/* Design */
body {
  /* 시각적인 디자인을 위한 body임.
    CSS Reset위한 body와 구분해야 협업할 때 좋다. 
    */
  /* 모든 페이지에 걸쳐진 배경색을 지정해준다. */
  /* 모든 페이지에 걸쳐진 전경색(homeground color)을 지정해준다. */
  background-color: #efefef;
  color: #999;
}
.header {
  background-image: url(images/header-bg.png);
  /* 배경색이 어둡기 때문에 전경색을 먼저 밝은 색으로 준다.  */
  color: orange;
  /* display: flow-root; */
  /* 1. display: flow-root;
  header 안의 모든 margin이 밖으로 삐져나가지 않고,
  header안에 위치하도록 함. But 브라우저 호환성 때문에 추천 X */
  overflow: hidden;
  /* container의 마진 병합 현상을 해결하기 위해서 부모인 header에
  overflow: hidden;을 줘서 해결한다. (이 용도로 만들어진 overflow: hidden;
  속성은 아니지만, 이렇게 사용한다. 야매나 트릭은 X)
  */
  /* .header에 overflow: hidden;이 있기 때문에
  float된 요소인 .container-bg의 높이를 읽을 수 있는 것이다. 
  */
}
.container {
  /* wrapper는 2~3개 정도라 공통적인 스타일이므로
 wrapper가 아니라 container에 스타일을 줘야 한다. */
  /* border-left:;, border-right: ;로 나눠서 적어도 됨 */
  border-width: 20px 20px 0 20px;
  border-style: 10px solid;
  padding: 50px;
  border-color: orange;
  overflow: hidden;
  /* 자식 요소인 .container-bg가 float된 요소라서 높이를 읽지 못하기 때문에
  부모 요소인 container에 overlfow: hidden;을 줘서 자식 요소의 높이를 읽게 한다.  */
  position: relative;
}
.container-bg {
  /* margin-bottom: 20px;
  /* 주위 환경에 영향을 끼치지 않으면서도 이 도끼 사진을
  아래쪽에 위치시키고 싶다. 
  이 도끼 사진을 이 container-bg가 차지하는 공간 안에서
  아래쪽에 위치시키려면
  -> 
  */
  /* position: relative; */
  /* 현재 이미지를 기준으로 변화를 주겠다.  */
  /* relative는 주위 환경에 영향을 끼치지 않으면서 
  위치를 조정한다.
  */
  /* left: 0;
  right: 0;
  top: 100px; */

  /* 도끼가 위로 가게 하고 싶다. */
  /* top에 음수값 주면 됨 */
  /* top: -100px;  */

  /* 도끼가 이미지가 잘린 이유?
  부모 요소인 container에 overflow: hidden을 줬기 때문에
  */
  /* 부모에 relatvie를 주지 않으면,
   전체창 기준으로 position: absolute;를 준 요소가 배치된다.
   */
  /* 절대적인 기준점이 원래는 전체 창이다. */
  /* 부모로 계속 올라가다가 relatvie를 만나면 그 relative를 기준으로
  absolute준 요소가 배치된다. 
   */
  position: absolute;
  /* absolute 준 요소는 공간을 차지하지 못한다. */
  right: -150px;
  bottom: 0;
  /* 자기가 차지하고 있는 공간을 다 버리고 뜬다.
  부모 요소에 상관없이 뜬다. */
  /* position 속성에서 relative, absolute가 거의 90% 사용된다. */
}

.container h1 {
  margin-bottom: 30px;
  letter-spacing: 10px;
  border-bottom: 5px solid;
  display: inline-block;
}
.container h1 span {
  /* h1은 기본 브라우저 내장 스타일이 bold이므로 
    굵기를 얇게 주고 싶은 span요소에 normal을 주면 됨  */
  font-weight: normal;
}
.container p {
  line-height: 1.7;
  /* inline요소의 높이는 line-height로 조절한다.  */
  /* line-height는 숫자만 적어야 함.(단위 x)
    -> 폰트 크기에 비례해서 늘어나고 줄어듬*/
  margin-right: 300px;
}
.contents {
  background-color: #ddd;
  padding: 30px 0;
}
.grid {
  /* background-color: yellow; */
  /* 자식 요소인.grid li의 높이를 읽기 위해서 overflow: hidden;을 한다.  */
  overflow: hidden;
}

.grid li {
  background-color: white;
  color: orange;
  float: left;
  width: 300px;
  margin-right: 30px;
  border-radius: 10px;
  /* 모서리를 둥글게 boder-radius를 줬을 때, 
  이미지가 너무 커서 border-radius가 안먹는 것처럼
  보이는 것임*/
  /* overflow: hidden;
을 줘서 넘치는 부분을 숨기며 네 모서리 모두 둥글게 보인다. 
  */
  overflow: hidden;
}
.grid li:last-child {
  margin-right: 0;
}
.grid li img {
  display: block;
  /* 빔캠프 유튜브를 참고   */
  border-bottom: 3px solid orange;
}

.grid-title {
  overflow: hidden;
}
.grid-title h2 {
  float: left;
  /* a태그의 이미지와 줄을 맞추기 위해서 padding을 주기 보다는 
    height를 고정값을 준 다음, line-height을 줘서 line중간에 텍스트가 오도록 한다. 
    */
  font-size: 14px;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
}

.grid-title a {
  float: right;
  background-image: url(./images/play.png);
  /* 크기가 작아서 배경이미지가 안나올 경우, 이미지 크기만큼 width, heigth값을 준다.  */
  width: 50px;
  height: 50px;
  /* 텍스트가 안보이게 하기 위해서 text-indent: -9999px;을 준다. */
  text-indent: -9999px;
}
.footer {
  text-align: center;
  padding: 20px;
  letter-spacing: 10px;
  text-indent: 10px;
  font-size: 12px;
  color: #bbb;
  margin-bottom: 100px;
}
Share