티스토리 뷰

Programming/HTML

HTML 숨기기 보이기

Beat. 2016. 9. 5. 09:48

HTML에서 HTML요소를 숨기는 것은 간단합니다.


DIV로 예를 들어서 보여드리겠습니다.


<body>안에 복사붙여넣기 하시고 바로실행 하시면 됩니다.


<!-- html로 div 숨기기 보이기 -->
<!-- display: none => 숨기기    display: block => 보이기 -->
display : block<br/>
<div style="border: 1px solid; display: block;">내용 1번입니다.</div>
<div style="border: 1px solid; display: none">내용 2번입니다.</div>
<div style="border: 1px solid; display: block;">내용 3번입니다.</div>
<br/>
<!-- html로 div 숨기기 보이기 -->
<!-- visibility: hidden도 숨기기 기능입니다. -->
visibility : hidden<br/>
<div style="border: 1px solid;">내용 1번입니다.</div>
<div style="visibility: hidden;">내용 2번입니다.</div>
<div style="border: 1px solid;">내용 3번입니다.</div>

<body>안에 복사붙여넣기 하시고 바로실행 하시면 됩니다.

실행화면 입니다.



두개의 차이점이 보이시나요?


block은 공간자체를 없애지만 hidden은 공간은 남겨두고 속성을 숨겨만 줍니다.

display : block 공간 자체를 없앤다.
visibility : hidden 공간은 남겨두고 속성만 숨겨둔다.













공유하기 링크
댓글