728x90
11. 가시성
- 요소를 화면에서 보이거나 감출 수 있음
※ 아래와 같은 예제로 visibility 속성과 display를 적용해 보겠습니다.
가시성 속성을 적용하기 전에는 빨간색과 초록색의 상자가 위아래로 나란히 있는 상태입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>가시성</title> <style type="text/css"> *{margin:0; padding:0;} .box1{width: 300px; height: 100px; background-color: #f00;} .box2{width: 300px; height: 100px; background-color: #0f0;} </style> </head> <body> <h2>적용 전</h2> <div class="box1 aa"></div> <div class="box2"></div> </body> </html> |
(1) visibility
- 요소를 화면에서 show/hide 시킬 수 있으며 hidden visible 값을 사용
- 화면에서 가려지나 자리를 지키고 있음
■ 예제1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>가시성</title> <style type="text/css"> *{margin:0; padding:0;} .box1{width: 300px; height: 100px; background-color: #f00;} .box2{width: 300px; height: 100px; background-color: #0f0;} .aa{visibility: hidden;} </style> </head> <body> <h2>visibility</h2> <div class="box1 aa"></div> <div class="box2"></div> </body> </html> |
■ 실행결과1
※ 빨간색 상자가 있던 자리는 그대로 비워두고, 보이지만 않는 상태입니다.
(2) display
- 요소를 화면에서 show/hide시킬 수 있으며 none 요소의 원속성을 작성
- 화면에서 가려지나 다음요소가 자리를 차지함, 즉 display 요소의 자리를 내어줌
■ 예제2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>가시성</title> <style type="text/css"> *{margin:0; padding:0;} .box1{width: 300px; height: 100px; background-color: #f00;} .box2{width: 300px; height: 100px; background-color: #0f0;} .bb{display:none;} </style> </head> <body> <h2>display</h2> <div class="box1 bb"></div> <div class="box2"></div> </body> </html> |
■ 실행결과2
※ 빨간색 상자가 보이지 않고, 빨간색 상자가 있던 자리를 초록색 상자가 차지하고 올라간 모습입니다.
(3) Overflow
- 계층구조에서 하위요소가 상위요소보다 클 때, 하위요소의 가시성을 제어할 수 있다.
■ 예제3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>오버플로우</title> <style type="text/css"> *{margin:0; padding: 0;} .spacer{height: 50px;} .parent{width: 200px; height: 100px; border:10px solid #000;} .child{width: 250px; height: 150px; background-color: #f0f;} .parent.p1{overflow: hidden;} .parent.p2{overflow: scroll;} .parent.p3{overflow: auto;} #c3{height: 50px;} </style> </head> <body> <h2>overflow:기본값</h2> <div class="parent"> <div class="child"></div> </div> <div class="spacer"></div><!--여백--> <h2>overflow:hidden</h2> <div class="parent p1"> <div class="child"></div> </div> <div class="spacer"></div><!--여백--> <h2>overflow:scroll</h2> <div class="parent p2"> <div class="child"></div> </div> <div class="spacer"></div><!--여백--> <h2>overflow:auto</h2> <div class="parent p3"> <div class="child" id="c3"></div> </div> </body> </html> |
■ 실행결과3
※ 하위 요소가 부모 요소의 크기보다 넘칠 때, 제어 할 수 있는 속성으로
넘치는 부분을 감추려면 hidden을,
넘치는 부분을 스크롤로 만드려면 scroll을,
그리고 가로 세로 중 넘치는 부분만 스크롤을 주려면 auto 속성을 사용하면 됩니다.
반응형