[attribute] HTML - hidden 속성 - 요소 숨기기 (= hidden속성 = 히든속성)

1. hidden 예제 - 요소 숨기기
2. hidden 정의
3. hidden 구문
4. hidden 예제 - 요소 숨겼다가 조건 충족 시 JS로 보이게 설정

hidden 예제 - 요소 숨기기

 

<p hidden>홈짱닷컴 Homzzang.com</p>

<p>홈페이지 제작관리강의</p>

 

결과보기

hidden 정의

 

요소 숨기기 지정하는 참거짓 속성.

 

---

 

1.

• 전역속성이라 모든 태그에서 사용 가능.
• hidden 속성 지정되면, 아직 관련 없거나 더 이상 관련없음 의미.
• hidden 속성 지정되면, 브라우저는 해당 요소를 더 이상 표시 X.
• hidden 속성 사용해 다른 조건 충족 시까지 숨겼다 JS로 보이게도 가능.
• CSS display:none 효과처럼, 숨겨진 요소 자리를 다음 요소가 차지.
• CSS visibility:hidden 경우엔, 숨겨진 요소 자리가 그대로 유지됨.

 

2.

IE11 이상 주요 최신 브라우저 모두 지원.

 

3. MDN hidden 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

 

hidden 구문

 

<element hidden>

 

---

[속성값]

 

없음.

 

hidden 예제 - 요소 숨겼다가 조건 충족 시 JS로 보이게 설정

 

<p id="hz" hidden>홈짱닷컴 Homzzang.com</p>

<p>홈페이지 제작관리강의 사이트 추천</p>

<label for="ok"><input type="checkbox" id="ok"> 어디?</label>

 

<script>

ok.addEventListener("click",homzzang);

 

function homzzang() {

  if(ok.checked) {hz.removeAttribute('hidden'); hz.style.color="red";}

  else hz.setAttribute('hidden', true);

}

</script>

 

결과보기