[HTML/CSS] position: sticky 활용하기

💡 실습 포인트!

• position: sticky 속성을 활용하여 우측의 이미지는 위치가 고정되고 좌측의 텍스트만 스크롤하면 움직이도록 만들어보았다.
• 반응형으로 만들면 세로로 1열이 되어 크게 의미가 없을 것 같아서 순수하게 PC 화면용으로 만들고 반응형은 따로 고려하지 않았다.

---

💜 HTML

• image div 태그는 우측에, text div 태그는 좌측에 배치할 예정이며 편하게 보기 위해 image div 태그를 상단에 적었다. (순서를 바꾸어적어도 float 를 이용해서 위치 지정이 가능했다.)
• float 속성을 이용했으니 중간중간에 div 태그를 만들어 clear : both 속성을 넣어주는 것도 까먹지 말기!

<div class="grey">
    <div class="image">
        <img src="./img/appletv.jpg" width="100%">
    </div>
    <div class="text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, inventore ullam. 
        Repudiandae distinctio dolorum perspiciatis odio praesentium.
        Quae amet facilis officia vel reprehenderit repellendus earum non, nihil, ab tempora autem?
    </div>
    <div style="clear:both"></div>
    <div class="text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, inventore ullam. 
        Repudiandae distinctio dolorum perspiciatis odio praesentium. 
        Quae amet facilis officia vel reprehenderit repellendus earum non, nihil, ab tempora autem?
    </div>
    <div style="clear:both"></div>
    <div class="text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, inventore ullam. 
        Repudiandae distinctio dolorum perspiciatis odio praesentium. 
        Quae amet facilis officia vel reprehenderit repellendus earum non, nihil, ab tempora autem?
    </div>
    <div style="clear:both"></div>
    <div class="text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, inventore ullam. 
        Repudiandae distinctio dolorum perspiciatis odio praesentium. 
        Quae amet facilis officia vel reprehenderit repellendus earum non, nihil, ab tempora autem?
    </div>
    <div style="clear:both"></div>
    <div class="text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, inventore ullam. 
        Repudiandae distinctio dolorum perspiciatis odio praesentium. 
        Quae amet facilis officia vel reprehenderit repellendus earum non, nihil, ab tempora autem?
    </div>
    <div style="clear:both"></div>
    <div class="text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, inventore ullam. 
        Repudiandae distinctio dolorum perspiciatis odio praesentium. 
        Quae amet facilis officia vel reprehenderit repellendus earum non, nihil, ab tempora autem?
    </div>
    <div style="clear:both"></div>
</div>

💜 CSS

• image 는 float : right 속성을 주어 우측에 배치하고 position : sticky 속성을 이용하여 고정시켜주었다.
• sticky 를 사용할 때는 고정할 좌표(top, right, bottom, right 사용)도 함께 적어주어야 한다.
• text 는 float: left 속성을 주어 좌측에 배치했다.

body {
  background: #eee;
  height: 2000px;
}

.grey {
  height: 1600px;
  margin-top: 400px;
}

.image {
  float: right;
  width: 600px;
  position: sticky;
  top: 400px;
}

.text {
  margin-bottom: 200px;
  float: left;
  width: 600px;
}