- 전체(91)
- html5(1)
- web accessibility(11)
- Cross Browsing(20)
- html basic(7)
- css basic(23)
- meta(2)
- form(12)
- table(2)
- menu(2)
- box(1)
- button(1)
- font(1)
- etc(8)
- CSS 애니메이션
display:none 은 화면에서 엘리먼트를 없애는 것이다.
브라우저가 렌더링 하지 않는다. 따라서 이 속성을 적절히 활용하면 로딩속도를 빠르게 할 수 있다.
css 는 아래와 같다.
결과는 다음과 같다.
빨강색 사각형이 없어진 것을 볼 수 있다. 그리고 그 자리를 파랑색 사각형이 메꾸고 있다. 아예 없어져 버리기 때문에 사각형이 올라오는 것이다.
이와 비교해 visibility: hidden 을 비교해보자
display:none 을 visibility: hidden 으로 아래와 같이 바꾸자
파랑색 사각형이 내려간 것을 볼 수 있다.
즉, 빨강색 사각형은 시야에서만 안보일 뿐, 그 자리에 존재하긴 하는 것이다.
레이아웃에 영향을 미치고 완전히 없어지는 것이 아니다.
두 차이를 알고 상황에 맞게 잘 활용하도록 하자
- [2014/11/07] 게시판 목록에서 제목항목 자동 ...로 말줄임 (1648)
댓글 0
댓글 쓰기 권한이 없습니다.
> | display:none과 visibility: hidden | 2014.11.11 |