display: none
항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지한다.
width, height를 지정하여 가로, 세로 폭을 조절 할 수 있다.
div 태그는 display 속성의 기본값으로 block을 가진다.
display: none와 visibility: hidden 차이점
둘 다 요소를 보이지 않게 하는 속성이라는 점에서는 동일하지만, UI 측면에서 볼 때 둘은 완전히 다르다.
display: none은 화면 상에 어떤 영역을 차지 하지 않고 완전히 삭제된 것처럼 보이게 한다.
그에 반해 visibility: hidden은 해당 요소가 보이지 않을 뿐 요소가 존재하는 영역은 확실히 보여준다.
기본 모양은 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div>display: none</div>
<div class="middle">과 visibility: hidden</div>
<div>의 차이점 알아보기</div>
</body>
</html>
위 코드에서 중간 div에 display: none 속성을 주면
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.middle {
display: none;
}
</style>
</head>
<body>
<div>display: none</div>
<div class="middle">과 visibility: hidden</div>
<div>의 차이점 알아보기</div>
</body>
</html>아예 그 요소가 존재하지 않았던 것처럼 사라지는 걸 볼 수 있다.
visibility: hidden을 사용하면
요소는 보이지 않지만 div 영역은 차지하고 있는 걸 볼 수 있다.
[HTML/CSS] display 속성 알아보기 (display:none과 visibility:hidden 차이)
display는 요소를 어떤 형태로 나타나게 할 것인지를 말하는 속성으로, 기본적으로 네가지가 있습니다. 최신 웹에선 flex나 grid와 같은 새롭고 편리한 속성들이 등장하지만 브라우저 호환도가 떨어
mber.tistory.com
'프레임워크 > CSS' 카테고리의 다른 글
| [CSS] text 마우스 드래그 시 CSS 설정 (::selection) (0) | 2022.04.15 |
|---|---|
| [CSS] Pretendard 웹폰트 적용하는 방법 (0) | 2022.04.07 |
| [CSS] Next.js에서 svg 사용하는 방법 (0) | 2022.02.24 |
| [CSS] :hover 시 이미지 변경 (0) | 2022.02.24 |
| [CSS] :hover 시 transition 적용하기 (0) | 2022.02.23 |
댓글