CSS overflow: visible이란?
CSS에서 overflow: visible을 지정하면 요소의 크기를 벗어나는 콘텐츠가 잘리지 않고 그대로 화면에 표시됩니다. visible은 overflow 속성의 기본값으로, 별도로 설정하지 않아도 모든 요소에 기본적으로 적용됩니다.
즉, div의 너비나 높이보다 내용이 길더라도 해당 영역 밖으로 삐져나온 상태로 렌더링되며, 스크롤바가 생성되거나 콘텐츠가 숨겨지지 않습니다.
overflow: visible 주요 특징
콘텐츠 잘림 없음: 요소 경계를 넘는 텍스트나 이미지가 그대로 보입니다.
스크롤바 미생성: hidden, scroll과 달리 스크롤바가 나타나지 않습니다.
기본값 적용: overflow 속성을 따로 선언하지 않으면 자동으로 visible이 적용됩니다.
예제 코드
아래 예제는 고정된 너비(250px)와 높이(30px)를 가진 div에 overflow: visible을 적용한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: orange;
width: 250px;
height: 30px;
border: 2px solid blue;
overflow: visible;
}
</style>
</head>
<body>
<h1>Heading</h1>
<div>Overflow property used here. This is a demo text to show the working of CSS overflow: visible.</div>
</body>
</html>실행 결과
위 코드를 실행하면 파란색 테두리의 주황색 div 영역이 나타나며, 30px 높이보다 긴 텍스트가 잘리지 않고 div 바깥쪽으로 그대로 출력되는 것을 확인할 수 있습니다. 이것이 바로 overflow: visible의 기본 동작 방식입니다.
overflow 값 비교
visible: 넘치는 콘텐츠가 잘리지 않고 그대로 표시됩니다(기본값).
hidden: 넘치는 부분이 잘려서 보이지 않습니다.
scroll: 콘텐츠 양과 관계없이 항상 스크롤바가 생성됩니다.
auto: 콘텐츠가 넘칠 때만 필요한 스크롤바가 생성됩니다.