조회 수 8553 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

position: relative; 에 대해 알아보자.

 

relative는 기본적으로 형요소의 왼쪽 끝점을 기준으로 화면에 표시된다고 알고있지만 실제로 더 많은 내용을 이해하고 있어야 된다.

 

1. 수직방향 위치일때 고려해야 될 사항 

 

아래의 코드를 살펴보자. DIV 3개가 수직방향으로 위치해 있다. 각각에 대해 top: 10px; left 10px;을 선언하였다. 단순히 위의 설명대로 알고있다면 잘못된 디자인이 나오게 된다.

 

<style>
* {
    margin: 0px;
    padding: 0px;
}
.static {
    position: relative;
    width: 100px;
    height: 100px;
    border:1px solid red;
}
.pos1 {
    top: 10px;
    left: 10px;
}
.pos2 {
    top: 10px;
    left: 10px;
}
.pos3 {
    top: 10px;
    left: 10px;
}
</style>


    <div class="static pos1">0123456 789012 3456789</div>
    <div class="static pos2">ABCDEF GHIJKL MNO PQR STUVWXYZ</div>
    <div class="static pos3">가나다라마바사아 자카타파카하 ABCDEFGHIJKL MNO PQR</div>

 

 

9-1.png

 

위의 결과처럼 left로 10px떨어져 있는 것이 확인 된다. 하지만 수직으로 10px씩 떨어지지는 않는다는 것을 볼 수 있다. 왜? 10px이 벌어지지 않는 것일까? 왜? 첫번째 DIV만 top:10px이 적용된 것일까?

 

10px씩 상하간격을벌리기 위해 무엇을 하면될까?

 

아래 보정된 코드를 살펴보자.

 

<style>
* {
    margin: 0px;
    padding: 0px;
}
.static {
    position: relative;
    width: 100px;
    height: 100px;
    border:1px solid red;
}
.pos1 {
    top: 10px;
    left: 10px;
}
.pos2 {
    top: 20px;
    left: 10px;
}
.pos3 {
    top: 30px;
    left: 10px;
}
</style>


    <div class="static pos1">0123456 789012 3456789</div>
    <div class="static pos2">ABCDEF GHIJKL MNO PQR STUVWXYZ</div>
    <div class="static pos3">가나다라마바사아 자카타파카하 ABCDEFGHIJKL MNO PQR</div>

 

 

9-2.png

 

위의 결과를 보면 정확히 10px씩 상하로 벌어져 있는 것이 확인된다. 결과는 옿게 나왔지만 코드를 보면 더 이상하다.

 

13 라인에 top: 10px;은 정상반영되었다. 17 라인의 top: 20px;은 실제론 10px반영되었다. 21 라인의 top: 30px;는 실제론 10px반영되었다.

어떻게 이해해야 될까? 

 

정리하면

 

     13 라인의 top: 10px은 정상 반영이 맞다.

     17 라인의 top: 20px;은 13라인에서 10px을 소모하므로 20px-10px = 10px 이 표시된 것이다.

     21 라인의 top: 30px;는 13 라인과 17 라인에서 20px를 소모 시키고 나머지 10px가 표시된 것이다.

 

relative에서 수직방향의 DIV계산시 주의해야 될 내용이다.

 

그럼, 이런 현상이 수평방향으로도 나타날까? float:left 를 추가해 보자

 

아래의 코드를 살펴보자.

 

<style>
* {
    margin: 0px;
    padding: 0px;
}
.static {
    position: relative;
    float:left;
    width: 100px;
    height: 100px;
    border:1px solid red;
}
.pos1 {
    top: 10px;
    left: 10px;
}
.pos2 {
    top: 20px;
    left: 10px;
}
.pos3 {
    top: 30px;
    left: 10px;
}
</style>


    <div class="static pos1">0123456 789012 3456789</div>
    <div class="static pos2">ABCDEF GHIJKL MNO PQR STUVWXYZ</div>
    <div class="static pos3">가나다라마바사아 자카타파카하 ABCDEFGHIJKL MNO PQR</div>

 

9-3.png

 

 

위의 결과를 보면 top값은 정확히 일치하고 있다. 하지만, left: 10px한 값은 1번째 DIV를 빼고는 적용되지 않음을 알 수 있다. 수평으로 left: 10px;이 위에 설명된 경우처럼 작동되지 않음을 알 수 있다.

 

보정된 코드는 이미 예측이 가능하다. top은 10px로 맞추겠다.

 

<style>
* {
    margin: 0px;
    padding: 0px;
}
.static {
    position: relative;
    float:left;
    width: 100px;
    height: 100px;
    border:1px solid red;
}
.pos1 {
    top: 10px;
    left: 10px;
}
.pos2 {
    top: 10px;
    left: 20px;
}
.pos3 {
    top: 10px;
    left: 30px;
}
</style>


    <div class="static pos1">0123456 789012 3456789</div>
    <div class="static pos2">ABCDEF GHIJKL MNO PQR STUVWXYZ</div>
    <div class="static pos3">가나다라마바사아 자카타파카하 ABCDEFGHIJKL MNO PQR</div>

 

 

9-4.png

 

 

이제 정상적으로 박스가 표시되고 있다.

 

부모로 감싸 이동이 가능한지도 확인해 보자.

 

<style>
* {
    margin: 0px;
    padding: 0px;
}
.static {
    position: relative;
    float:left;
    width: 100px;
    height: 100px;
    border:1px solid red;
}
.pos1 {
    top: 10px;
    left: 10px;
}
.pos2 {
    top: 10px;
    left: 20px;
}
.pos3 {
    top: 10px;
    left: 30px;
}
.main_box {
    position: absolute;
    top: 20%;
    left: 30%; 
    border: 1px solid blue;
}
</style>

<div class="main_box">
    <div class="static pos1">0123456 789012 3456789</div>
    <div class="static pos2">ABCDEF GHIJKL MNO PQR STUVWXYZ</div>
    <div class="static pos3">가나다라마바사아 자카타파카하 ABCDEFGHIJKL MNO PQR</div>
</div>

 

 

9-5.png

 

위의 그림을 잘 관찰하다. 일단 부모박스를 감싸 이동이 가능함을 알 수 있다. 

 

중요한 것은 부모박스의 크기를 선언하지 않았음에도 불구하고 자식 컨텐츠의 크기인 가로 306px(보더 포함), 세로 102px(보더를 포함)짜리 공간이 자동으로 생성됬음을 알 수 있다. 부모의 크기가 자식보다 작지만 자식박스가 밖으로 나가지 않는 것도 확인 할 수 있다.

 

진짜로 부모 DIV의 크기가 작아도 되는 것인가? 아래의 예를 살펴보자. 부모의 크기를 좌우 100px로 조정해 보았다.

 

<style>
* {
    margin: 0px;
    padding: 0px;
}
.static {
    position: relative;
    float:left;
    width: 100px;
    height: 100px;
    border:1px solid red;
}
.pos1 {
    top: 10px;
    left: 10px;
}
.pos2 {
    top: 10px;
    left: 20px;
}
.pos3 {
    top: 10px;
    left: 30px;
}
.main_box {
    position: absolute;
    top: 20%;
    left: 30%; 
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
</style>

<div class="main_box">
    <div class="static pos1">0123456 789012 3456789</div>
    <div class="static pos2">ABCDEF GHIJKL MNO PQR STUVWXYZ</div>
    <div class="static pos3">가나다라마바사아 자카타파카하 ABCDEFGHIJKL MNO PQR</div>
</div>

 

9-6.png

 

위의 그림처럼 박스 밑으로 떨어짐을 알 수 있다. 수직으로 내려져 top: 10px;이 반영되지 않는 이유는 위에서 이미 살펴보았다.

 

relative의 경우 부모의 크기는 컨텐츠의 크기만큼만 확보되면 된다. 306px, 102px으로 보정해 보았다.

이때 마진, 패딩등이 있으면 당연히 포함시켜야한다.

 

<style>
* {
    margin: 0px;
    padding: 0px;
}
.static {
    position: relative;
    float:left;
    width: 100px;
    height: 100px;
    border:1px solid red;
}
.pos1 {
    top: 10px;
    left: 10px;
}
.pos2 {
    top: 10px;
    left: 20px;
}
.pos3 {
    top: 10px;
    left: 30px;
}
.main_box {
    position: absolute;
    top: 20%;
    left: 30%; 
    width: 306px;
    height: 102px;
    border: 1px solid blue;
}
</style>

<div class="main_box">
    <div class="static pos1">0123456 789012 3456789</div>
    <div class="static pos2">ABCDEF GHIJKL MNO PQR STUVWXYZ</div>
    <div class="static pos3">가나다라마바사아 자카타파카하 ABCDEFGHIJKL MNO PQR</div>
</div>

 

 

9-5.png

 

 

위의 그림 처럼 정상적으로 표시된다. 당연히 relative의 이동기준점은 부모의 시작점이다.

 

relative속성을 사용할 때 위에 설명된 것들을 주의 하여 사용하자.

 

 

 

 

 

 

 

 

 

?

List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 134703
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 83949
39 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53803
38 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 24265
37 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19804
36 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19672
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16534
34 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15482
33 HTML Transition에 대해 알아보자. 8 2016.06.22 13707
32 SASS Sass 소개 2019.09.19 13118
31 HTML Form 요소 설명 4 2016.06.01 12831
30 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10580
29 HTML li 에 대해 알아보자. 2 file 2016.02.15 10342
28 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 10340
27 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 10127
26 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 9208
» HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8553
24 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7259
23 HTML class 에 대해 알아보자. 1 file 2016.02.16 6740
22 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 6204
Board Pagination Prev 1 2 3 Next
/ 3