예제 5-8. overflow 프로퍼티 활용
WEB/CSS3-CONCEPT 2017. 10. 31. 19:24 |* 콘텐츠를 자를 것인가 말 것인가, overflow
overflow는 HTML 콘텐츠가 width와 height 프로퍼티에 주어진 태그의 크기를 넘어가는 경우 콘텐츠를 자를 것인지 말 것인지를 지정하는 프로퍼티. 블록 태그에만 적용된다.
overflow 프로퍼티가 적용되려면 width와 height 프로퍼티에 박스 크기가 설정되어 있어야한다.(필수)
overflow : visible | hidden | scroll | auto
- visible : 콘텐츠가 잘리지 않고 태그 영역을 넘어 출력(디폴트)
- hidden : 콘텐츠를 태그 크기로 잘라 넘어가는 것은 보이지 않음, 스크롤바 없음
- scroll : 스크롤바를 항상 부착하여 콘텐츠 출력(옆,아래 둘다)
- auto : 콘텐츠가 박스의 높이(height 프로퍼티)보다 넘치면 스크롤바 자동 생성
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>overflow 프로퍼티</title> <style> p { width : 15em; height : 3em; border : 1px solid lightgray; } .hidden { overflow : hidden; } .visible { overflow : visible; } // 디폴트 .scroll { overflow : scroll; } </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> </body> </html> | cs |
'WEB > CSS3-CONCEPT' 카테고리의 다른 글
| 예제 4-2. CSS3 스타일 시트로 꾸민 웹 페이지 (0) | 2017.11.04 |
|---|---|
| 예제 4-1. HTML 태그로만 작성한 웹 페이지 (0) | 2017.11.04 |
| 예제 5-7. visibility로 텍스트 숨기기 (0) | 2017.10.31 |
| 예제 5-6. z-index로 카드 쌓기 (0) | 2017.10.31 |
| 예제 5-2. 정적 배치 - position : static(디폴트). 예제 5-3. 상대 배치 - position : relative. 예제 5-4. 절대 배치 - position : absolute. 예제 5-5. 고정 배치 - position : fixed. (0) | 2017.10.31 |