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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

어느 요소의 위치를 잡을 때 사용되는 것이 position이다. 간혹 float와의 차이를 묻는 분들이 계신데 float와 position은 의미부터가 다르다.

 

float는 요소를 먼저 나온 요소의 오른쪽으로 정렬할지 왼쪽으로 정렬할지에 대한 문제이고, position은 화면의 어떤 부분에 위치시킬지에 대한 문제를 다루는 속성이다. 그러므로 둘간의 속성의 차이를 어려워할 필요가 없다.

 

position속성

position속성값나열~static, relative, absolute, fixed등 설명~~~~~~~~~~~~~~~~~~~~

 

 

position: static;

 

static에서 많이 실수 하는 것이 top, left값을 주고 반영 하려하는 점이다. static은 top, left등의 위치속성이 반영되지 않는다. 왜냐하면 일반적인 block요소처럼 화면을 차지하고 처리되기 때문이다. 

 

아래의 예를 보자.

 

<style>
* {
     margin: 0px;
     padding: 0px;
}
.static {
     position: static;
     width: 100px;
     height: 100px;
     border:1px solid red;
     top: 30%;
     left: 40%;
}
</style>

<div class="static">01234567890123456789</div>
<div class="static">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div class="static">가나다라마바사아자카타파카하01234567890123456789</div>

 

 

7-1.png

 

위의 예제에서 11, 12번째 줄을 눈여겨 보자 top, left값을 주었음에도 반영되지 않음을 알 수 있다.

 

주의해서 봐야할 것은 또 있다. 해당 DIV내용이 표시된 형태를 눈여겨 보자.

 

   1. 영어, 숫자는 박스 밖으로 표시되고 있다.

   2. 한글은 자동으로 박스안에 표시되고 있다.

   3. 한글안에 표함된 숫자는 박스 밖으로 표시되고 있다.

 

위의 예에서는 DIV안의 내용에 띄어쓰기가 없었다. 그럼 띄어쓰기를 한 경우에는 어떻게 표시될까?

 

<style>
* {
    margin: 0px;
    padding: 0px;
}
.static {
    position: static;
    width: 100px;
    height: 100px;
    border:1px solid red;
    top: 30%;
    left: 40%;
}
</style>

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

 

7-2.png

 

띄어쓰기가 된 경우 DIV박안에 문자들이 잘 정렬된 것을 확인 할 수 있다.

마지막 박스를 다시 보자. 한글과 숫자사이에 줄바꿈이 표시된 것을 확인 할 수 있다.

 

영어의 경우도 위처럼 표시될까? 아래의 예를 살펴보자.

 

<style>
* {
    margin: 0px;
    padding: 0px;
}
.static {
    position: static;
    width: 100px;
    height: 100px;
    border:1px solid red;
    top: 30%;
    left: 40%;
}
</style>

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


 

7-3.png

 

위의 결과처럼 영어는 붙어서 표시됨을 알 수 있다.

 

정리하면,

 

     1. 영어, 숫자는 띄어쓰기를 해도 공간이 들어가기 부족하면 다음줄에 표시된다.

     2. 한글은 띄어쓰기하면 차례대로 공간을 차지한다.   

 

DIV의 문자 표시방법을 잘 이해하자.

 

그럼 DIV안의 static은 어떻게 표시될까?

전체 DIV의 크기를 각 DIV의 크기보다 크게 하였다. 전체 DIV안에 자식 DIV요소들이 들어 갈까?

 

<style>
* {
    margin: 0px;
    padding: 0px;
}
.static {
    position: static;
    width: 100px;
    height: 100px;
    border:1px solid red;
}

.absolute {
    width: 350px;
    height: 120px;
    border: 1px solid blue;
}
</style>

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

 

7-4.png

 

부모 DIV안에 포함되지 않는 것을 알 수 있다. static을 부모안에 어떨게 포함 시킬까? 방법은 float이다.

 

<style>
* {
    margin: 0px;
    padding: 0px;
}
.static {
    position: static;
    float: left;
    width: 100px;
    height: 100px;
    border:1px solid red;
} 

.absolute {
    width: 350px;
    height: 120px;
    border: 1px solid blue;
}
</style>

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

 

7-5.png

 

부모 요소의 위치가 움직이면 따라 움직일까? 아래의 예를 확인해보자.

 

<style>
* {
    margin: 0px;
    padding: 0px;
}
.static {
    position: static;
    float: left;
    width: 100px;
    height: 100px;
    border:1px solid red;
}

.absolute {
    position: absolute;
    width: 350px;
    height: 120px;
    border: 1px solid blue;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -175px;
}
</style>

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

 

 

7-6.png

 

 

잘 이동됨을 알 수 있다. 

 

 

 

?

List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 134702
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 83944
39 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53803
38 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 24261
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
25 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8553
» HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7257
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