뇨내

[CSS-Visual Studio Code] Position 본문

Web/CSS

[CSS-Visual Studio Code] Position

삐옥 2021. 12. 16. 12:07

 

 

 

 

 

 

 

 

 

 

 

Position

 

1. padding

2. margin
3. position 

4. trasform > CSS3

 

position: static | absolute | relative | fixed ;

position
: 요소의 위치를 지정하는 속성
- 좌표값 사용
- x(left), y(top)
- 좌표를 지정하는 방식이 여러개 제공(좌표계 > 기준점)

1. position: static
- 정적 좌표
- 기본값
- FlowLayout 방식
- 워드 프로세스 방식
- 코딩 순서대로 출력되는 방식
   위 -> 아래,
   왼쪽 -> 오른쪽
- 좌표값 지원 안됨(left, top 사용 불가능)
 
2. position: absolute
- 절대 좌표
- 기준점: 문서의 좌측 상단
- 모든 태그가 동일하게 문서의 좌측 상단을 원점으로 함
- 원래있던 공간 사라짐
- * 기준점(원점): 자신의 직계 조상 중 가장 처음으로 만나는 태그 중 position이 static이 아닌 태그를 원점으로 한다.
  계속 상위 체크를 해야한다.★
 
3. position: relative
- 상대 좌표
- 기준점(원점)
- 태그가 저마다 각각 자신의 원래 위치를 원점으로 한다.
- 원래 있던 공간 유지
 
4. position: fixed
- 고정 좌표
- 기준점(원점) : 브라우저 화면 좌측 상단
- 스크롤에 반응하지 않고 화면에 고정
- 원래 있던 공간이 사라짐

 

 

 설 명

 

1. 기본 = 틀이되는 코드

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 
        .box {
            border: 10px solid black;
            width: 200px;
            height: 200px;
        }
 
        #box1 { background-color: tomato ; }
        #box2 { background-color: gold; }
        #box3 { background-color: cornflowerblue; }
 
    </style>
</head>
<body>
 
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
    
</body>
</html>
 cs

 

 

초기상태

2. static

 

 

3. absolute

 

 

4. relative

 

 

5. fixed

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'Web > CSS' 카테고리의 다른 글

[VSCode] Tab키로 문장 끝으로 편리하게 이동하는 방법/해결 방법  (1) 2021.12.24
[CSS-Visual Studio Code] WebFont 웹 폰트  (0) 2021.12.17
[CSS-Visual Studio Code] shadow 그림자  (0) 2021.12.17
[CSS-Visual Studio Code] Alignment 정렬  (0) 2021.12.16
[CSS-Visual Studio Code] Float  (0) 2021.12.16
'Web/CSS' Related Articles more
Comments