요소의 표시와 숨기기, .hide() 메소드 vs CSS의 visibility 속성

 

 

 

요소의 표시와 숨기기

메소드	설명
.show(millisec|"slow"|"fast")	·       .hide() 메소드로 숨겨진 요소를 나타나게 합니다. ·       인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 예약어를 전달하여, 이펙트 효과의 속도를 조절할 수 있습니다.
.hide(millisec|"slow"|"fast")	·       선택한 요소를 순간적으로 사라지게 합니다. ·       .hide()메소드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정됩니다. ·       즉, 이렇게 숨겨진 요소는 더 이상 웹 페이지의 레이아웃에 영향을 주지 않고 완전히 사라지게 됩니다. ·       인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 예약어를 전달하여, 이펙트 효과의 속도를 조절할 수 있습니다.
.toggle()	·       제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .toggle() 메소드를 제공합니다. ·       선택한 요소가 현재 사라진 상태라면 .show() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .hide() 메소드의 동작을 수행합니다.

 

 

.hide() 메소드 vs CSS의 visibility 속성

구분	차이
.hide() 메소드	.hide()메소드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정됩니다. 이렇게 숨겨진 요소는 더 이상 웹 페이지의 레이아웃에 영향을 주지 않고 완전히 사라지게 됩니다.
CSS의 visibility 속성	CSS의 visibility 속성의 속성값을 hidden으로 설정해도 HTML 요소를 숨길 수 있습니다. 하지만 이때는 보이지만 않을 뿐 숨겨진 요소는 여전히 웹 페이지의 레이아웃에 영향을 주게 됩니다.