position : sticky 활용하기

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

글쓴이

글

2022년 11월 8일 21:23 #53216

참가자

저는 선생님이 적어주신 내용으로는 적용이 되지 않습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="sticky.css">
</head>
<body style="background: grey; height: 3000px;">
    <div class="grey">
    <div class="image">
    < img src="appletv.jpg" alt="애플티비">
    </div>
    <div style="clear: both"></div>
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae veritatis, vitae quisquam enim omnis doloribus, unde inventore totam est iure ad facere eum, deleniti deserunt vero quia minus. Dolorem, suscipit.
    </div>
    <div style="clear: both"></div>
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae veritatis, vitae quisquam enim omnis doloribus, unde inventore totam est iure ad facere eum, deleniti deserunt vero quia minus. Dolorem, suscipit.
    </div>
    <div style="clear: both"></div>
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae veritatis, vitae quisquam enim omnis doloribus, unde inventore totam est iure ad facere eum, deleniti deserunt vero quia minus. Dolorem, suscipit.
    </div>
    </div>
    </body>
</html>
------------------------------------------------------

.grey {
  background: lightgrey;
  height: 2000px;
  margin-top: 500px;
}
.text {
  float: left;
  width : 300px;
    margin-top: 400px;
}
.image > img {
  float: right;
  width : 400px;

}
.image {
position: sticky;
  top: 100px;
}

이렇게 주어야 width와 sticiky가 적용이 됩니다.
scroll 또한 viewport를 넘어가서 멈춥니다.
이런 문제 때문에 자주 힘들었는데, 각 컴퓨터 운영체제마다 달라서 이러는걸까요?

2022년 11월 9일 09:27 #53244

codingapple

키 마스터

화면사이즈가 너무 작거나 커서 그럴 수도 있습니다

2022년 11월 9일 14:52 #53278

길동이

참가자

혹시 컴퓨터나 노트북 화면 사이즈 마다 다를 수도 있다는 말씀이실까요?

2022년 11월 9일 20:12 #53316

codingapple

키 마스터

네 아니면 css 파일 잘못첨부하거나 그런 경우입니다
강의에있는거 붙여넣어보니 잘됩니다

글쓴이

글

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

답변은 로그인 후 가능합니다.

로그인

position : sticky 활용하기

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png