WIL-CSS [Position]

42443 단어 fixedstickyabsolutepositionrelativeabsolute

💡 position은 '위치'란 뜻으로 요소들의 위치를 지정해주는 속성이다.
이 속성을 이용해 페이지의 레이아웃을 결정할 수 있다.

position의 종류

1. Static & relative & absolute

💡 static은 position의 기본값이다. 기본적으로 특정한 position값을 주지 않으면 static값을 가지게 된다. 그래서 html에 쓴 태그순으로 위치가 정해지게 된다. 또한, static은 부모객체에서 다른 position 속성값이 주어졌을 때, 이를 무시하기 위해 사용될 때가 있다.

💡 relative는 '상대적인'이라는 뜻을 가진 요소이다. 무엇으로 부터 상대적이냐, 현재 자신의 위치에 대해서 상대적이다.
ex) position: relative; 하고 left: 10px; 하면 본인 static 자리에서 왼쪽으로 10px만큼 떨어진 자리에 위치하게 된다.

💡 absolute는 HTML의 위치를 기준점으로 잡는데, 만약 부모 요소에 position값이 정해지게 되면 부모의 position을 기준으로 위치하게 된다. 마치 relative가 static의 자리를 유념하는 것과 같은 이치다. 

<style>
        .box1 {
            position: static;
            background-color: green;
            color: white;
            width: 100px;
            height: 100px;
        }

        .기준 {
            position: relative;
        }

        .box2 {
            position: absolute;
            left: 40px;
            top: 30px;
            background-color: green;
            color: white;
            width: 100px;
            height: 100px;
            z-index: 1;
        }

        .box3 {
            position: absolute;
            left: 50px;
            top: 50px;
            background-color: aqua;
            color: white;
            width: 100px;
            height: 100px;
        }
    </style>
<body>
    <div class="box1">box1</div>

    <div class="기준">
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>
</body>

2. fixed

💡 fixed는 스크롤을 움직일 때 특정한 박스가 고정되도록 해주는건데, 절대적인 속성이다.
absolute처럼 fixed도 부모를 기준으로 위치를 정하는데, 다른점은 absolute는 부모의 요소에 따라 위치하지만 fixed는 무조건적으로 body를 부모로 여긴다. 이 말은 현재 사용자가 보고있는 뷰포트를 기준으로 화면에 붙은 것 처럼 같은 자리에 위치하게 된다.


이런식으로 고정되어 있음.

3. sticky

💡 sticky는 가장 가까운 scroll된 요소에 달라붙는다.
그래서 scroll되고 있는 부모요소가 scroll이 끝날 때 그 sticky가 끝나고 다음 sticky가 시작된다. 이 뜻은 sticky 요소가 인계점에 도달했을 때 offset이 나타나게 된다.
💁 fixed와의 차이점은,
fixed는 뷰포트에 고정이되고, scroll이 돼도 원하는 위치에 고정이 되는 게 sticky다. 스크롤에 따라 움직이다 offset이 인계점에 닿으면 그 순간부터 고정이 된다.

처음엔 이렇게 고정되어 있다가,

인계점을 만나면 이렇게 된다.

🤣 position으로 만들어 본 나만의 캐릭터!!

 <style>
        body {
            margin: 150px;
        }

        .ear-left {
            position: absolute;
            top: 10px;
            left: 20px;
            display: inline-block;
            background: #FFC8C4;
            width: 150px;
            height: 200px;
            border-radius: 30px;
            transform: rotate(14deg);
        }

        .ear-left2 {
            position: absolute;
            top: 10px;
            left: 20px;
            display: inline-block;
            background: #FFC8C4;
            width: 150px;
            height: 200px;
            border-radius: 30px;
            transform: rotate(14deg);
            box-shadow: 8px 5px 5px gray;
        }

        .ear-right {
            top: 10px;
            right: 20px;
            top: 2px;
            position: absolute;
            display: inline-block;
            background: #FFC8C4;
            width: 150px;
            height: 200px;
            border-radius: 30px;
            transform: rotate(-14deg);
        }

        .ear-right2 {
            top: 10px;
            right: 20px;
            top: 2px;
            position: absolute;
            display: inline-block;
            background: #FFC8C4;
            width: 150px;
            height: 200px;
            border-radius: 30px;
            box-shadow: -8px 5px 5px gray;
            transform: rotate(-14deg);
        }

        .face {
            position: relative;
            background: #FFC8C4;
            width: 600px;
            height: 550px;
            border-radius: 300px;
        }

        .nose {
            position: absolute;
            top: 260px;
            left: 210px;
            right: 100px;
            background: #FC7CA5;
            width: 180px;
            height: 140px;
            border-radius: 180px;
        }

        .nose-left {
            background: #FFC8C4;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            position: absolute;
            left: 35px;
            top: 50px;
        }

        .nose-right {
            background: #FFC8C4;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            position: absolute;
            left: 100px;
            top: 50px;
        }

        .eye-left {
            position: absolute;
            background: black;
            width: 70px;
            height: 70px;
            border-radius: 35px;
            left: 180px;
            top: 150px;
        }

        .eye-right {
            position: absolute;
            background: black;
            width: 70px;
            height: 70px;
            border-radius: 35px;
            top: 150px;
            left: 360px;
        }

        .small-eye__left {
            position: absolute;
            background: white;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            left: 32px;
            top: 5px;
        }

        .small-eye__right {
            position: absolute;
            background: white;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            left: 32px;
            top: 5px;
        }


        .flower {
            position: absolute;
            background: yellow;
            top: 7px;
            left: 412px;
            width: 70px;
            height: 70px;
            border-radius: 35px;
            z-index: 5;
        }

        .small-flower1 {
            position: absolute;
            background: #F16585;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            top: -2px;
            right: 75px;
        }

        .small-flower2 {
            position: absolute;
            background: #F16585;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            top: -2px;
            right: 170px;
        }

        .small-flower3 {
            position: absolute;
            background: #F16585;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            right: 125px;
            top: -30px;
        }

        .small-flower4 {
            position: absolute;
            background: #F16585;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            top: 50px;
            right: 95px;
        }

        .small-flower5 {
            position: absolute;
            background: #F16585;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            right: 155px;
            top: 53px;
        }
    </style>
</head>

<body>
    <div class="face">
        <div class="ear-left"></div>
        <div class="ear-left2"></div>
        <div class="ear-right"></div>
        <div class="ear-right2"></div>
        <div class="nose">
            <div class="nose-left"></div>
            <div class="nose-right"></div>
        </div>
        <div class="eye-left">
            <div class="small-eye__left"></div>
        </div>
        <div class="eye-right">
            <div class="small-eye__right"></div>
        </div>
        <div class="flower"></div>
        <div class="small-flower1"></div>
        <div class="small-flower2"></div>
        <div class="small-flower3"></div>
        <div class="small-flower4"></div>
        <div class="small-flower5"></div>

    </div>
</body>

💡수직,수평 정렬시 꿀팁!!

  • 수직정렬시, top:50%, transform:trnslateY(-50%) -> flex없이 수직정렬시
  • 수평정렬시, margin: 0 auto; -> auto가 왼쪽, 오른쪽 남아있는 margin값을 쪼개서 자동으로 가운데 정렬을 해줌.
    !! but, width값이 없을땐 작동하지 않음
  • position을 적용해서 50밀어주고 -50만큼 끌어당기는 방법도 있음.

💁_ position을 배우고 relative와 absolute를 이용해서 캐릭터 만들기를 해봤다!!!
position을 이용하니까 위치를 마음대로 조정할 수 있어서 생각보다 막연하지 않았다.
그전에는 위치 조정을 하고 싶으면 무조건적으로 relative만 사용해서 위치가 제멋대로 움직이고
offset이 먹지 않아서 답답하고 복잡했는데 position을 제대로 이해하고 사용했을 때의 편리함을 이번에 느끼게 되어서 후련했다!!!

Dev log - 4, CSS 기초 #2
첫번째개발일지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage