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

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

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

 

<style> 

div {background-color: pink; width: 100px; margin-bottom:20px;}

div.hz1 {overflow-x: scroll;}

div.hz2 {overflow-x: hidden;}

div.hz3 {overflow-x: auto;}

div.hz4 {overflow-x: 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-x 정의

 

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

 

---

 

1. cf.

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

 

2.

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

 

3.

거의 모든 브라우저 지원.

 

4. MDN overflow-x 예제보기

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

 

overflow-x 구문

 

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

 

---

[속성값]

 

visible

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

 

hidden

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

 

scroll

무조건 스크롤바 생성.

 

auto

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

 

initial

이 요소의 기본값 사용.

 

inherit

부모요소의 속성값 상속.