알찬정보 툰코 개발 트렌드 이슈 코딩

display(d-none)

웹 페이지에서 Elment 들을 필요에 따라 보이지 않게 해야할 때가 있다.
CSS 에서는 display: hidden or display: none 속성을 사용하고, Bootstrap 에서는 d-none 라는 클래스 명을 사용하여 Elment를 보이지 않게 한다. (display: none 만 지원)

.

CSS

CSS 에서는 display: hidden or display: none 으로 Element를 안보이게 한다.

.

Bootstrap

Bootstrap 에서는 d-none 클래스명으로 Element를 안보이게 한다. (자리차지 X)

<div class="d-none">1</div>
<div class="d-none d-md-block">2></div> <!--md 사이즈 이상에서만 보이도록 -->

d-none 는 breakpoint 에 따라 보이기를 다르게 할 수 있다. breackpoint 를 md 로 설정할 경우, md 사이즈 이상인 경우에만 안보이게 설정할 수 있다. 

d-none 는 자리를 차지 않고 Element를 보이지 않게 하지만 자리를 차지 한 상태로 보이지 않게 하려면 invisible 클래스명을 사용한다.

<div class="visible">1</div> 
<div class="invisible">2</div> <!-- 자리를 차지 하면서 안보이도록 설정 -->