HTML에서 스크롤 가능한 div 만들기
-
CSS
overflow속성을 사용하여 HTML에서 div를 세로로 스크롤 가능하게 만들기 -
CSS
overflow-y속성을 사용하여 HTML에서 div를 가로로 스크롤 가능하게 만들기
이 문서에서는 div를 HTML에서 스크롤 가능하게 만드는 방법을 소개합니다. 수직 및 수평 스크롤을 탐색하고 예제를 통해 구현을 확인합니다.
CSS overflow 속성을 사용하여 HTML에서 div를 세로로 스크롤 가능하게 만들기
CSS overflow 속성을 사용하는 것이 아마도 HTML에서 div를 스크롤 가능하게 만드는 가장 쉬운 방법일 것입니다. overflow 속성은 콘텐츠가 div의 블록을 넘칠 때 유용합니다.
이 속성을 사용하여 콘텐츠를 자르고 스크롤 막대를 추가할 수 있습니다. overflow 속성을 auto로 설정하여 이를 달성할 수 있습니다.
결과적으로 div의 내용이 잘리고 스크롤 막대가 추가됩니다. 결과적으로 div를 세로로 스크롤할 수 있습니다.
높이가 지정되지 않은 div에는 overflow 속성이 작동하지 않습니다.
콘텐츠가 지정된 높이 및 너비 제한을 초과하는 경우의 예제 코드를 살펴보겠습니다.
예를 들어 더미 콘텐츠가 포함된 div1이라는 div를 만듭니다. CSS에서 div의 높이와 폭을 200px로 설정합니다.
div 내부의 더미 텍스트 길이가 div의 길이를 초과하는지 확인하십시오.
예제 코드:
<div class = "div1">
What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>
body{
background: white;
}
.div1{
height : 200px;
width: 200px;
}
overflow: auto;가 없으면 콘텐츠는 div에 할당된 것보다 더 많은 공간을 차지합니다. 이것은 우리가 원하는 것이 아니므로 overflow 속성을 사용하여 콘텐츠를 관리해 보겠습니다.
예제 코드:
body{
background: white;
}
.div1{
max-height : 200px;
width: 200px;
overflow: auto;
}
<div class = "div1">
What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>
overflow: auto;를 사용하면 더미 텍스트가 지정된 너비와 높이로 잘리고 div를 세로로 스크롤하여 모든 콘텐츠를 볼 수 있도록 스크롤 막대가 나타납니다. 높이와 너비가 충분하더라도 매번 스크롤 막대를 표시하려면 overflow-y: scroll;을 사용할 수 있습니다. 대신에.
따라서 CSS overflow 속성을 사용하여 HTML에서 세로로 스크롤할 수 있는 div를 만들 수 있습니다.
CSS overflow-y 속성을 사용하여 HTML에서 div를 가로로 스크롤 가능하게 만들기
div를 가로로 스크롤할 수 있게 하려면 overflow-x: auto;를 유지하기만 하면 됩니다. 및 overflow-y: hidden; 추가 속성 white-space: nowrap;을 사용합니다. 이전에 작성한 HTML 블록에 다음 CSS 속성을 적용해 보겠습니다.
예를 들어, 구분 div1의 높이를 100px로 설정합니다. 그런 다음 앞에서 언급한 대로 overflow 및 white-space 속성을 설정합니다.
overflow-x: auto 속성은 콘텐츠가 x축에서 div의 크기를 초과하는 경우 스크롤링 조항을 보장합니다.
마찬가지로 hidden으로 설정된 overflow-y는 콘텐츠를 클립하고 y축에서 스크롤링 제공이 유지되지 않습니다. 줄 바꿈을 방지하기 위해 white-space 속성에 nowwrap 값을 사용했습니다.
예제 코드:
.div1{
height : 100px;
width: 300px;
overflow-x:auto;
overflow-y:hidden;
white-space: nowrap;
}
<div class = "div1">
What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn