본문 바로가기
개발 공부/HTML, CSS

hidden

by duck_bae 2024. 2. 15.
HTML 속성에서의 hidden

hidden 속성이란, 요소를 숨기는 기능을 가진 속성으로 웹 브라우저에서 보여지지 않지만 어디서 넘어온 값인지 알 수 있도록 값을 넘겨준다. 그렇기때문에 개발자 도구에서 확인이 가능하므로 보안상 숨겨야 하는 코드는 hidden 속성을 사용하지 말고 html 내에서 삭제하거나 숨겨주어야 한다. boolean 속성에 해당하며, CSS display 속성으로 보이도록 할 수 있다. 보통 크게 필요하지 않는 정보이거나, 1차적인 노출을 막을 필요가 있을 때 사용한다.

 

<input> 태그에서의 hidden

사용자 몰래 값을 서버에 전달한다. url에서 내용이 표시된다.

 

레이아웃 요소를 없애는 방법 (CSS에서의 사용)

display: none → 브라우저 상에서 요소의 존재 자체를 없앤다. 

visibility: hidden → 브라우저 상에서 컨텐츠가 보이지 않도록 하는 속성. 해당 요소가 가지고 있는 영역의 크기만 적용되고, 눈에 보이는 요소(내용, 컬러 등)는 숨겨진다.

overflow: hidden → 넘쳐 흐르는 부분을 숨긴다.

'개발 공부 > HTML, CSS' 카테고리의 다른 글

label, 웹 접근성 및 호환성  (0) 2024.02.21
폰트(Font)를 preload 하는 방법, 최적화 방법  (0) 2024.02.21
transition(전환)  (0) 2024.02.15
HTML5 시맨틱 태그, 웹 표준  (1) 2024.02.15
<a> 태그  (0) 2024.02.03