예제 5-2. 정적 배치 - position : static(디폴트). 예제 5-3. 상대 배치 - position : relative. 예제 5-4. 절대 배치 - position : absolute. 예제 5-5. 고정 배치 - position : fixed.

WEB/CSS3-CONCEPT 2017. 10. 31. 19:03 |

박스의 배치, position


1. 정적 배치 - position : static(디폴트)

2. 상대 배치 - position : relative

3. 절대 배치 - position : absolute

4. 고정 배치 - position : fixed

5. 유동 배치 - float : left 혹은 float : right


1. 정적 배치 - position : static(디폴트)

정적 배치는 웹 페이지가 작성된 순서대로 HTML 태그의 출력 위치를 정하는 방식으로, 브라우저의 디폴트 배치 방식이다.

콘텐츠 크기에 따라 브라우저에 의해 정해지므로 left, top, bottom, right, width, height 프로퍼티의 값은 위치에 영향을 주지않는다.


2. 상대 배치 - position : relative

'기본 위치'에서 프로퍼티의 값만큼 이동한 '상대 위치'에 배치된다.

* top과 bottom이 동시에 지정되면 bottom이 무시되며, left와 right가 동시에 지정되면 right가 무시된다.


예제 5-2. 상대 배치 - position : relative

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative 배치</title>
<style>
div {
    display : inline-block;
    height : 50px;
    width : 50px;
    border : 1px solid lightgray;
    text-align : center;
    color : white;
    background : red;
}
#down:hover {
    position : relative;
    left : 20px;
    top : 20px;
    background : green;
}
#up:hover {
    position : relative;
    right : 20px;
    bottom : 20px;
    background : green;
}
</style>
</head>
<body>
<h3>상대 배치, relative</h3>
<hr>
    <div>T</div>
    <div id="down">h</div>
    <div >a</div>
    <div>n</div>
    <div id="up">k</div>
    <div>s</div>
</body>
</html>
 
cs



3. 절대 배치 - position : absolute

부모 태그 안에서의 상대 좌표이다.


예제 5-3. 절대 배치 - position : absolute
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>절대 배치</title>
<style>
div {
    display : inline-block;
    position : absolute; /* 절대 배치 */
    border : 1px solid lightgray;
}
div > p { /* div의 자식 p */
    display : inline-block;
    position : absolute; /* 절대 배치 */
    height : 20px;
    width : 15px;
    background : lightgray;
}
</style>
</head>
<body>
<h3>Merry Christmas!</h3>
<hr>
<p>예수님이 탄생하셨습니다.</p>
<div>
    <img src="media/christmastree.png"
            width="200" height="200" alt="크리스마스 트리">
    <p style="left:50px; top:30px">M</p>
    <p style="left:100px; top:0px">E</p>
    <p style="left:100px; top:80px">R</p>
    <p style="left:150px; top:110px">R</p>
    <p style="left:30px; top:130px">Y</p>
</div>
</body>
</html>
 
cs

4. 고정 배치 - position : fixed

프로퍼티의 값으로 뷰포트의 특정 위치에 고정시키는 배치 방식.


예제 5-4. 고정 배치 - position : fixed

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>고정 배치</title>
<style>
#fixed {
    position : fixed;
    bottom : 10px;
    right : 10px;
    width : 100px;
    padding : 5px;
    background : red;
    color : white;
}
</style>
</head>
<body>
<h3>Merry Christmas!</h3>
<hr>
<img src="media/christmastree.png"
    width="300" height="300"
    alt="크리스마스 트리">
<div id="fixed">예수님이 탄생하셨습니다.
</div>
</body>
</html>
 
cs







저작자표시 비영리 동일조건

'WEB > CSS3-CONCEPT' 카테고리의 다른 글

예제 4-1. HTML 태그로만 작성한 웹 페이지  (0) 2017.11.04
예제 5-8. overflow 프로퍼티 활용  (0) 2017.10.31
예제 5-7. visibility로 텍스트 숨기기  (0) 2017.10.31
예제 5-6. z-index로 카드 쌓기  (0) 2017.10.31
예제 5-1. display 프로퍼티로 박스 유형 설정 // 고치기  (0) 2017.10.31
Posted by 너래쟁이
:

티스토리툴바