반응형
JavaScript
레이어 보이기와 감추기
자바스크립트 및 CSS를 이용하여 DIV를 보이게하고 감추는 방법에 대하여 알아보도록 하겠습니다.
먼저 보이고 보이지 않게 될 대상을 하나 생성합니다.
<div id="target" style="width:100px;height:100px; background-color:blue;"></div>
가로, 세로 100px 의 사각형 모양에 파란색의 배경색을 지정 해 보았습니다.
그리고 div의 id는 target로 설정 하였습니다.
이제 이 DIV를 보이게 또는 보이지 않게 제어할 버튼을 만들어 보겠습니다.
감추기 버튼과 보이기 버튼 두개의 버튼을 만들어 봅니다.
<input type="button" value="감추기" onclick="document.all['target'].style.visibility = 'hidden';">
<input type="button" value="보이기" onclick="document.all['target'].style.visibility = 'visible';">
여기에서 끝나면 조금 아쉽죠 그래서 한 가지 더 알아 보도록 하겠습니다.
보이이 감추기 기능을 가지고 있는 함수는visiblility와 함께 display라는 함수가 있습니다.
<input type="button" value="감추기" onclick="document.all['target'].style.display= 'none';">
<input type="button" value="보이기" onclick="document.all['target'].style.display = 'block';">
<input type="button" value="보이기" onclick="document.all['target'].style.display = 'block';">
그럼 두 가지의 차이는 무었일까요?
클릭 해 보셨으면 아셨겠지만 visibility 는 공간을 그대로 두고 단순히 보이지 않게 합니다.
하지만 display는 공간까지 사라지게 만든다는 것입니다.
반응형
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
티스토리 폴더 형식의 카테고리 달기 (4) | 2018.02.21 |
---|---|
자바스크립트 사용자 정의 함수 사용법 익히기 (6) | 2018.02.20 |
HTML/CSS 레이어(Layer) 란 (7) | 2018.02.13 |
CSS 목록 속성 불릿(Bullet) 지정하기 (1) | 2018.02.06 |
[CSS] 배경 설정 방법 및 속성 알아보기 (2) | 2018.02.01 |