라이브 데모 background-attachment:fixed에는 꽤 고질적인 문제가 있습니다. 우선 모바일 브라우저에선 사용할 수 없고, 가끔 덜컹거리고 버벅이며 스크롤이 내려간단 점입니다. 두 가지 단점을 모두 해결한 방법을 소개해 드리려 합니다. HTML CSS.first, .second { width: 100%; height: 100vh; position: relative} .bg-wrap { clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .bg { position: fixed; display: block; top: 0; left: 0; width: 100%; height: ..

아래 동영상처럼 특정 요소를 일정한 비율로 반응형으로 감싸고 싶을 때 사용하는 방식입니다. HTML123 Hi!cs CSS1234567891011121314151617.parent { width: 100%; padding-bottom: X; position: relative;}.child { position: absolute; width: 100%; height: 100%;}.child { position: absolute; top:0; left:0; right:0; bottom:0;}cs 요소를 감싸줄 부모 요소가 하나 필요합니다. "parent"의 padding-bottom(혹은 top) 값을 수정하여 비율을 설정합니다. 요소 내부를 꽉 채우실 거라면 "child"의 첫 번째 항목을 사용하시고, 일정..