DISPLAY, VISIBILITY 속성
display는 요소의 rendering box 유형을 결정할 때 사용하는 속성이다.
CSS의 display 속성을 이용하면 화면상에서 블록 요소를 인라인 요소처럼 보여줄 수 있고, 인라인 요소를 블록 요소처럼 보여주는 등 태그마다
고유하게 갖고 있는 rendering box의 특징을 display 속성으로 변경할 수 있다.
display:none;
<body>
<div>
<div style="">box1</div>
</div>
</body>개발자 도구에서 display:block;으로 나온다.
<body>
<div>
<div style="display:none">box1</div>
</div>
</body>HTML과 CSS가 결합이 됐을 때, render tree를 만들어야 하는데, none은 render tree를 만들지 않기 때문에 브라우저에서 rendering되지 않는다.
즉, display:none은 화면에 보이지 않게 된다.
display:inline;
<body>
<div>
<div style="display:inline">box2</div>
</div>
</body>
<body>
<div>
<span>span</span>
</div>
</body>개발자 도구의 computed패널에 들어가보면 display가 inline이라고 나온다.
display:inline으로 선언하면, span처럼 인라인 레벨로 변경된다.
display:block;
원래대로 나온다.
display:inline-block;
<body>
<div>
<div style="display:inline-block">box3</div>
</div>
</body>inline처럼 화면에 나타나지만, block의 성질을 갖는다.
block은 콘텐츠 영역이 auto x auto로 나오지만,
inline-block은 해당 내용의 width, height 값이 나온다.
inline-block은 배치는 inline처럼 되지만, box model의 속성을 갖는다.
inline 요소는 띄어쓰기나 개행을 한 칸의 여백으로 인정한다.
visibility
요소를 어떻게 숨길 것인지 결정할 때 선언하는 속성
기본값이 visible이기 때문에 보이는 상태이다.
visibility:hidden;
해당 요소와 요소가 갖고 있는 margin영역까지 그대로 존재하지만 보이지 않는다.
visibility:hidden은 display:none과 비슷하지만 차이점이 있다.
display:none은 아예 화면에 rendering하지 않아서 스크린 리더기가 읽어주지 않지만, visibility:hidden은 스크린 리더기가 해당 영역에 있는 내용을 읽어준다.
