HTML / CSS - 14 (2021.03.21) position정리

티스토리 뷰

HTML_CSS

HTML / CSS - 14 (2021.03.21) position정리

LHOIKTN 2021. 3. 22. 00:21

프로그래머스 메인 html/css

저번에 position에 대해 포스팅한 적이 있었는데 틀려서 비공개로 돌렸다.

position

position의 속성 값 중에서 static, relative, fixed, absolute에 대해 정리한다.

position:static;

position의 기본 값이다. 따로 포지션의 속성 값을 따로 정해주지 않았다면 해당 엘리먼트의 포지션 속성 값은 static이다.

그림을 사용해 이해를 돕는다.

positiopn_test.html

0.00MB

<!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>position_test</title>
    <style>
        *{margin: 0;
         padding: 0;}
        #big_box{ 
            margin: 100px 500px;
            width: 1500px;
            height: 1500px;
            background: gray;
        }
        #top_box{ 
            width: 1500px;
            height: 500px;
            
            background: yellowgreen;
        }

        #mid_box{ 
            width: 1500px;
            height: 500px;
            
            background: yellow;
        }
        #box_navy{ 
            width: 500px;
            height: 100px;
            background: navy;
        }
        #box_red{ 
            width:500px;
            height: 100px;
            background: red;
        }
        #box_black{ 
            width: 100px;
            height: 100px;
            background: black;
        }
        #box_pink{ 
            width: 500px;
            height: 100px;
            background: hotpink;
        }
        #box_tomato{ 
            width: 500px;
            height: 100px;
            background: tomato;
        }
        #bottom_box{ 
            width: 1500px;
            height: 500px;
            
            background: cyan;
        }
        
    </style>
</head>

<body>
    <div id="big_box">
        <div id="top_box"></div>

        <div id="mid_box">
            <div id="box_navy">1</div>
            <div id="box_red">2</div>
            <div id="box_black">3</div>
            <div id="box_pink">4</div>
            <div id="box_tomato">5</div>
        <div>
        
        <div id="bottom_box"><div>
    </div>
</body>
</html>

위 코드의 실행결과는 위와 같다. 검은색 박스에 변화를 주면서 살펴본다.

position:relative;

relative 속성값을 받은 element는 top, right, bottom, left 속성 값을 부여하여 이동할 수 있다. 현재 자신의 위치에서 상하좌우로 이동할 수 있다. 원래 갖고 있던 기본 속성 static 위치를 기준으로 잡고 상대적으로 위치를 정할 수 있다.

1) 검은색 박스에 position: relative; left: 200px;

검은색 박스가 왼쪽에 접하고 있는 노란색 mid_box의 왼쪽 선.

검은색 박스는 그 왼쪽 선을 기준으로 200px만큼 떨어지게 된다.

2) 검은색 박스에 bottom:100px;를 추가하여 위로 올려보자

검은색 박스의 bottom과 접하고 있는 분홍색 박스로부터 100px 떨어지게 되었다.

계속 접하고있는 어떤 객체를 찾고 있는데 굳이 닿아있는 객체를 계속 찾을 필요는 없다. 기존의 위치를 설명하기 위한 도구일 뿐이다.

객체를 기존의 위치에서 얼마만큼 떨어뜨린다고 생각하면 쉽다.

(처음에 positoin을 사용할 때 검은색 박스를 위로 이동해서 빈 공간이 생겼는데 왜 빨간색 박스와 분홍색 박스가 자동으로 붙지 않는지 이해를 못했다.)

다른 객체는 그대로 있고 검은 박스만 이동했을 뿐이다.

저 빈 공간을 없애고 빨간 박스와 분홍 박스를 붙이고 싶으면 검은색 박스에 margin-bottom:-100px; 을 주면 된다.

position:fixed;

절대좌표를 사용하여 지정한 위치에 고정시킨다. 기준은 좌상단 꼭지점이다. 화면에 어떤 위치에 딱! 고정되어 있다. 스크롤을 내려도 그 위치에 고정되어 화면에서 사라지지 않는다.

1) 검은색 박스에 position: fixed; left: 100px; top:100px;

배경을 보라색으로 칠해줬다. 검은 박스는 자리를 이탈하여 화면 기준 위에서 100px, 왼쪽에서 100px 떨어졌다. 주목할만한 점은 자신의 자리를 완전 이탈했다는 것이다. 위에 있는 relative에서는 이동을 해도 원래 자기 자리는 유지하고 있었는데 옆에 있는 그림을 보면 검은 박스는 자신의 자리를 완전 이탈하고 빨간 박스와 분홍색 박스가 붙어버렸다. 붙은 건 뭐 크게 상관없다. 그런데 검은색 자리가 빠진만큼 아래 하늘색 박스가 올라와서 노란색 박스를 덮어버렸다. 연두색, 노란색, 하늘색 박스의 높이가 다 똑같이 500px이었는데 노란색 박스는 400px만 보인다.

왜 붙는건지는 모르겠는데. 아무튼 fixed를 사용할 때는 다른 객체에 영향을 주지 않도록 객체를 독립적으로 구성하는 것이 중요한듯하다.

2) 스크롤을 내려도 화면상에 나타나는 위치에 고정된다.

계속 화면에 나타난다는 것이다. 인터넷뉴스를 볼 때, 기사는 계속 내려도 옆에 있는 광고는 그대로 있는 게 이 fixed를 이용한 게 아닐까 싶다.

스크롤을 만들려고 bottom_box를 엄청 추가해줬다.

position:absolute;

절대 좌표를 사용하여 이동한다. 이는 현재 요소가 어떤 위치에 있는지는 상관이 없다는 뜻이다.

중요한 것은 position:absolute; 를 사용한 엘리먼트의 부모 엘리먼트에도 position 속성 값을 줘야 한다는 것이다. 그렇지 않으면 기준은 부모 엘리먼트가 아닌 html의 body를 기준으로 하여 fixed처럼 좌상단 꼭짓점이 기준이 된다.

1) 검은색 박스에만 position:absolute; left: 100px; top:100px;를 부여

좌상단 꼭지점을 기준으로 검은색 박스가 이동했다. 처음 absolute를 쓸 때. 이걸 보고는 fixed랑 똑같은 거 같은데 도대체 뭐가 다른건지 생각하느라 애먹었다. absolute는 fixed 처럼 화면에? 브라우처 창에 고정시키는 것은 아니기 때문에 스크롤을 내리면 사라진다.

2) 검은색 박스의 부모 엘리먼트인 mid_box(노란색 박스)에 position:relative; 부여

이 부모 속성에 position을 부여해야한다는 것을 몰랐을 때는 absolute 쓰기가 진짜 힘들다고 생각했다.

좌상단 꼭지점을 기준으로 거리를 계산하여 원하는 위치로 이동시키는 것은 귀찮은 일이기 때문이다.

부모에게 position:relative; 를 주면 부모 엘리먼트의 좌상단을 기준으로 이동할 수 있다.

노란 박스의 좌상단 꼭지점을 기준으로 위에서 100px, 왼쪽에서 100px 떨어진 검은 박스를 볼 수 있다.

absolute와 fixed 다른 객체의 위치에 영향을 줄 수 있기 때문에 꼭 필요할 때 사용하고, 사용할 때는 신중해야한다.

그리고 원리는 모르겠는데 absolute를 쓰면 static 속성을 덮을 수도 있다. absolute가 더 높은 layer를 가질 수 있다는 뜻일 수도 있고, 그거는 다음에 알아보자.

728x90

'HTML_CSS' 카테고리의 다른 글

HTML / CSS ) css로 삼각형 그리기 (0)	2021.03.22
Java script - 1 (2021.03.22) (0)	2021.03.22
HTML / CSS - 13 (2021.03.19) (0)	2021.03.19
HTML / CSS - 11 (2021.03.17) (0)	2021.03.17
HTML / CSS - 10 (2021.03.16) (0)	2021.03.16

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					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

글 보관함

GPD2021

티스토리 뷰