html
-
details 태그html 2023. 7. 4. 16:04
차장님이 작성하신 html 파일을 보면서 어떤 태그를 사용하고 어떻게 마크업 하는지 공부하고 있었는데 처음보는 태그를 발견했다. 바로 details 태그이다. 아코디언 구현을 details과 summary태그를 사용하여 만든 부분이었다. 클릭하면 안에 내용이 나오면서 보여지며 아코디언 기능을 했다. 근데 개발자 도구로 보면 어떠한 기능도 붙어있지 않아서 이건 뭐지 생각했다. 검색해보니 html5부터 새로 생긴 기능으로 스크립트를 붙이지 않고 html 태그만으로 더보기 닫기 기능을 할 수 있는 태그였다. 이렇게 편리한 태그가 있었다니 충격이었다;;;; details 태그란? : html5에 추가 된 태그로 하위 요소로 태그를 가짐 : 태그는 더보기 접기 기능의 모든 영역을 감싸주는 태그 : 태그는 더보기 ..
-
input 속성 readonly와 disabledhtml 2023. 6. 21. 14:33
readonly와 disabled는 input 태그를 사용자가 입력 및 수정을 못하게 하는 비활성화 속성 readonly : form과 submit에서 사용가능 : input과 textarea에서 사용가능 disabled : form과 submit에서 사용불가 : button, optgroup, option, select, input, textarea에서 사용가능 : form으로 값을 보낼 때 disabled의 값은 전송되지 않음 참고 https://heojju.tistory.com/75 https://record-than-remember.tistory.com/entry/input-%EC%86%8D%EC%84%B1-readonly-disabled-%EC%B0%A8%EC%9D%B4%EC%A0%90
-
tabindexhtml 2023. 6. 16. 14:18
tabindex란? : tab을 눌렀을 때 포커스 이동 순서를 임의로 조정할 수 있는 html의 속성 : tabindex의 값은 양의 정수가 들어감 : 일반적으로 tab을 눌렀을 때 포커스는 html의 마크업 순서에 따라 사용자와 상호작용이 가능한 요소(tab으로 포커스를 가질 수 있는 요소)들로 이동함 사용자와 상호작용이 가능한 요소 : input select button 같은 form 관련 요소와 a 태그 사용자와 상호작용이 가능한 요소들에는 기본적으로 키보드로 포커스가 잡히게 되어 있음 tabindex를 사용하는 경우 : tabindex는 마크업 순서가 논리적으로 잘 구성되어 있는 경우 사용할 필요가 없음 : 웹페이지를 구성하다 보면 불가피한 경우로 디자인을 위해 논리적이지 않은 요소를 만드는 경우..