예제 5-7. visibility로 텍스트 숨기기
WEB/CSS3-CONCEPT 2017. 10. 31. 19:16 |보일 것인가 숨길 것인가, visibility
ex) img { visibility : hidden; }
visibility : visible | hidden
* display:none 스타일을 가진 태그가 공간이 할당되지도 않고 보이지도 않는다.
하지만 visibility:hidden 스타일의 경우 태그의 공간은 할당되고 보이지만 않는다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>visibility 프로퍼티</title> <style> span { visibility:hidden; } </style> </head> <body> <h3>다음 빈 곳에 숨은 단어?</h3> <hr> <ul> <li>I (<span>love</span>) you. <li>CSS is Cascading (<span>Style</span>) Sheet. <li>응답하라 (<span>1988</span>). </ul> </body> </html> | cs |
'WEB > CSS3-CONCEPT' 카테고리의 다른 글
| 예제 4-1. HTML 태그로만 작성한 웹 페이지 (0) | 2017.11.04 |
|---|---|
| 예제 5-8. overflow 프로퍼티 활용 (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 |
| 예제 5-1. display 프로퍼티로 박스 유형 설정 // 고치기 (0) | 2017.10.31 |