[position] CSS - overflow-y 속성 - 수직방향으로 넘치는 내용 처리 방법 지정 (= overflow-y속성 = 오버플로우와이속성) ※ 세로로 범위 이탈 시 처리

1. overflow-y 예제 - 요소 내용이 세로로 넘칠 때 처리 방법 지정
2. overflow-y 정의
3. overflow-y 구문

overflow-y 예제 - 요소 내용이 세로로 넘칠 때 처리 방법 지정

 

<style> 

div {

    background-color: pink; 

    width: 100px; 

    height: 30px;

    margin-bottom:20px;

 }

div.hz1 {overflow-y: scroll;}

div.hz2 {overflow-y: hidden;}

div.hz3 {overflow-y: auto;}

div.hz4 {overflow-y: visible;}

</style>

<div class="hz1">홈짱닷컴 Homzzang.com</div>

<div class="hz2">홈짱닷컴 Homzzang.com</div>

<div class="hz3">홈짱닷컴 Homzzang.com</div>

<div class="hz4">홈짱닷컴 Homzzang.com</div>

 

결과보기

overflow-y 정의

 

수직방향으로 넘치는 내용 처리 방법 지정.

 

---

 

1. cf.

• overflow 속성 - (수평/수직)방향으로 넘치는 내용 처리 방법 지정.
• overflow-x 속성 - 수평방향으로 넘치는 내용 처리 방법 지정.

 

2.

• 기본값: visible
• 상속여부: X
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.overflowY="scroll";

 

3.

거의 모든 브라우저 지원.

 

4. MDN overflow-x 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y

 

overflow-y 구문

 

selector {overflow-y: visible|hidden|scroll|auto|initial|inherit;}

 

---

[속성값]

 

visible

넘치는 내용을 보임. (기본값)

 

hidden

넘치는 내용을 숨김. (스크롤바 생성 X)

 

scroll

무조건 스크롤바 생성.

 

auto

넘치면 스크롤바 생성하고, 안 넘치면 생성 안 함.

 

initial

이 요소의 기본값 사용.

 

inherit

부모요소의 속성값 상속.