display 속성은 사용자 경험을 개선하고 동적인 웹 페이지를 만들기 위해입니다. 예를 들어, 펼침 메뉴, 모달 창, 또는 동적 데이터 표시 등의 UI를 구현하고 사용자에게 필요한 정보만 표시하여 페이지 속도와 성능을 향상시킵니다. 페이지 내에서 요소를 동적으로 제어할 수도 있습니다. 웹 애플리케이션의 사용성을 높일 수 있는 display 기능을 한 번 사용해 보세요.
display 함수 하나로 화면 영역을 보이게 하거나 사라지게 토클 기능을 구현할 수 있습니다. 흔히 내용이 많아서 더보기 버튼을 구현할 때 많이 사용합니다. 숨겨 두었다가 클릭하게 다시 펼쳐 지면서 상세 내용을 볼 수 있게 하는 것입니다.
▼ document.getElementById() 함수로 DIV 개체를 가져옵니다. 처음에는 함수가 실행되지 않기 때문에 내용이 보이겠죠. 다시 [내용보기] 를 클릭하게 되면 DIV 내에 있는 HTML 이 사라지게 됩니다. display 속성에 ‘none’ 을 세팅 했기 때문입니다. 현재 style.display 가 none 인지 아닌지 if 로 판단한 후 block, none 을 번갈아 가며 바꾸는 것입니다.
function doDisplay(){
var con = document.getElementById("myDIV");
if(con.style.display=='none'){
con.style.display = 'block';
}else{
con.style.display = 'none';
}
}
▼ 아래는 숨기기 기능을 구현한 전체 소스입니다. “내용보기” 텍스트를 클릭했을 때 doDisplay() 함수가 실행되도록 만들었으며 함수 내부에서 display 속성값을 none 과 block 로 번갈아 가면서 셋팅 합니다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var bDisplay = true; function doDisplay(){
var con = document.getElementById("myDIV");
if(con.style.display=='none'){
con.style.display = 'block';
}else{
con.style.display = 'none';
}
}
</script>
</head>
<body>
<a href="javascript:doDisplay();"> > 내용보기</a><br/><br/>
<div id="myDIV">
<h1>내용을 접거나 펴는 방법</h1>
<p>display block 속성값은 내부 요소를 나타나게 하며 none 는 사라지게 합니다.</p>
</div>
</body>
</html>
▼ 아래 두 개의 그림은 위의 소스를 실행했을 때 보여 지게 되는 결과입니다. 내용보기를 클릭하면 보였다가 다시 클릭하면 사라지게 됩니다. 참고하세요.
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 자바스크립트 웹 소스 테스트 사이트 소개 ▶ 자바스크립트 escape, encodeURI, encodeURIComponent 인코딩 함수 ▶ 자바스크립트 정규표현식으로 ltrim, rtrim 공백 제거 함수 구현하는 방법 ▶ 자바스크립트 display 속성 이용해서 접거나 펴는 방법 ▶ 자바스크립트 숫자 여부를 판단하는 isNaN 함수 사용하기 |
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 내장 객체 Array 의 concat 함수 알아보기 – 2회 (0) | 2023.10.11 |
|---|---|
| 자바스크립트 parseFloat 함수 이용해서 문자열을 실수로 변환하기 (0) | 2023.10.11 |
| 자바스크립트 정규표현식으로 ltrim, rtrim 공백 제거 함수 구현하기 (0) | 2023.10.11 |
| 자바스크립트 배열 Array 초기화 하는 다양한 방법 (0) | 2023.10.10 |
| 자바스크립트(Javascript) form 의 submit (전송)을 자바스크립트로 실행하는 방법 (1) | 2023.09.22 |
| 자바스크립트 크롬 브라우저로 디버깅 하는 방법 (0) | 2022.08.17 |
| 자바스크립트(Javascript) jQuery 의 선택자(Selector) 기본 사용법 (1) | 2020.07.19 |
| 자바스크립트(Javascript) 뒤로 가기 막는 방법 (1) | 2020.01.08 |
