본문 바로가기
WEB CODING/CSS

overflow 속성

by uioweb 2020. 7. 4.

overflow 속성이란?

overflow  속성은 레이아웃이 높이 값보다 내용이 넘치는 것을 조절해 줄 때 쓰인다. 예를들어서 해당 높이 값보다 내용이 넘치면 강제로 내용을 잘라주거나 스크롤을 만들어 주는 등 역할을 합니다.

overflow 속성의 사용방법

overflow 속성에는 몇가지의 속성 값이 있습니다. 그 중 많이 사용하는 속성 값들을 정리해 보았습니다.

hidden : 해당 높이 값이상으로 넘어가면 잘라줍니다.

scroll : 해당 높이 값이상으로 넘어가면 잘라냅니다. 하지만 그 밑에 내용도 볼 수 있도록 스크롤을 만들어 줍니다.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS overflow 속성</title>
  </head>
  <body>
    <div class="overflow-hidden">
      <h2>What is Lorem Ipsum?</h2>
      <p>Lorem Ipsum is simply 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.</p>
    </div>
    <div class="overflow-scroll">
      <h2>What is Lorem Ipsum?</h2>
      <p>Lorem Ipsum is simply 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.</p>
    </div>
  </body>
</html>

CSS

.overflow-hidden{border:1px solid #000; height:100px; overflow:hidden;}
.overflow-scroll{border:1px solid #000; height:100px; overflow:scroll;}

결과 화면

 

'WEB CODING > CSS' 카테고리의 다른 글

:nth-child / :nth-last-child / :first-child / :last-child  (0) 2020.08.17
overflow 속성  (0) 2020.07.04
float 속성  (0) 2020.07.04
position 속성  (4) 2020.06.27
display 속성  (0) 2020.06.27
border-radius 속성  (0) 2020.06.27

댓글0