반응형
css overflow 프로퍼티로 콘텐츠 자르기
네 안녕하세요, 이번 포스팅에서는 콘텐츠를 자르는 방법에 대하여 알아보도록 하겠습니다.
우리가 html 문서를 작성을 하다 보면 불가피하게 글을 잘라야 하는 경우가 생깁니다.
그럴 때 쓰는 방법이며,
이걸 어떤 식으로 사용을 하는 지 한 번 알아보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. overflow : visible|hidden|scroll|auto 사용하여 콘텐츠 절삭 여부 결정하기
우리가 html 태그 내에서 사용하는 컨텐츠 자르기 여부를 결정짓는 프로퍼티는 overflow입니다.
overflow 프로퍼티의 각각의 값들은 이러한 기능을 가집니다.
overflow : visible /* 컨텐츠가 잘리지 않고 태그 영역을 넘어서 출력됨(기본 설정) */
overflow : hidden /* 컨텐츠를 태그 크기로 잘라 넘어가는 것이 보이지 않고, 스크롤바 없음 */
overflow : scroll /* 스크롤바를 부착하여 컨텐츠 출력 */
overflow : auto /* 컨텐츠가 박스의 높이(height 프로퍼티)보다 넘치게 되면 스크롤바 자동 생성 */이러한 기능을 가집니다.
이제 이를 이용하여 간단한 예제를 한 번 작성해 보도록 하겠습니다.
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow 프로퍼티</title>
<style>
p {
width : 15em;
height : 3em;
border : 1px solid lightgray;
}
.hidden { overflow : hidden; }
.visible { overflow : visible; }
.scroll { overflow : scroll; }
.auto { overflow : auto; }
</style>
</head>
<body>
<h3>overflow 프로퍼티</h3>
<hr>
<p class="hidden">
overflow에 hidden 값을 적용하면
박스를 넘어가는 내용이 잘려 보이지 않습니다.
</p>
<br>
<p class="visible">
overflow에 visible 값을 적용하면
콘텐트가 박스를 넘어가서도 출력됩니다
</p>
<br>
<p class="scroll">
overflow에 scroll 값을 적용하면
박스에 스크롤바를 붙여 출력합니다.
</p>
<br>
<p class="auto">
overflow에 auto 값을 적용하면
박스의 height 프로퍼티의 값을 넘어서게 될 경우에
자동으로 스크롤바를 생성합니다.
</p>
</body>
</html>이렇게 작성을 해봤고,
아제 결과 화면을 보도록 하겠습니다.
이렇게 잘 나온 것을 확인할 수 있습니다.
여기까지 html 태그 내용을 자르는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 리스트를 꾸미는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다~
반응형
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css background 프로퍼티로 리스트와 아이템에 배경 지정하기 (0) | 2023.04.24 |
|---|---|
| css 리스트를 꾸밀 때 사용하는 기본 프로퍼티 알아보기 (0) | 2023.04.24 |
| css visibility 프로퍼티로 태그 숨기거나 공개하기 (0) | 2023.04.24 |
| css z-index 프로퍼티 이용하여 html 태그 수직으로 쌓기 (0) | 2023.04.24 |
| css float 프로퍼티로 박스 유동적으로 배치하기 (0) | 2023.04.24 |
댓글