html 2

[KTB 파이널 프로젝트 트러블 슈팅] form 내 버튼 클릭 시 submit 이벤트 발생 문제 - HTML

☄️ 문제 상황 폼 내에 카테고리를 선택할 수 있는 버튼이 존재했다.제출 버튼을 클릭할 때뿐만 아니라 카테고리 선택과 같은 일반 버튼을 클릭했을 때도 폼 제출 이벤트가 발생하는 문제에 마주쳤다.  ☄️ 문제 원인 HTML 표준에 따르면, 요소는 기본적으로 type="submit" 속성을 가진다.따라서, 버튼을 클릭하면 폼이 제출되는 이벤트가 발생하는 것이다.  ☄️ 해결 방법 두 가지가 있다. ☝🏻 e.preventDefault()를 사용해 폼 제출 방지e.preventDefault()란?이벤트가 발생했을 때, 브라우저의 기본 동작을 막는 메서드 주로 브라우저의 기본 동작 대신, 사용자가 정의한 동작을 수행하고 싶을 때 사용한다. 예시 코드const handleMaxUsersClick = (e, nu..

[HTML5] 시맨틱 태그(Semantic Tag) <section> <article> 등

🏷️ HTML - 태그의 형태와 사용법 HTML5 이전의 HTML 버전에서는, , 과 같은 일반적인 컨테이너 태그를 사용하여 레이아웃을 구성하였다. 기본적으로 컨테이너 태그를 쓰면서, 다음과 같이 id나 class 속성을 통해 구분하는 방식이었다. 제목 🏷️ 한계 컨테이너 태그들은 단순히 콘텐츠를 구분하는 역할만 하고 그 자체로 어떤 의미를 가지지 않기 때문에, 웹페이지의 의미와 구조를 설명하는 데에는 적합하지 않다. 🏷️ HTML5 - 태그의 형태와 사용법 시맨틱 태그(semantic tag)가 등장했다. 시맨틱 태그는 그 자체로 의미를 가지며, 웹페이지의 구조와 콘텐츠를 더 명확하게 표현할 수 있도록 돕는다. 다음과 같이 태그로 직접 사용할 수 있다. ➡ ... cf) 컨테이너 태그와 비교했을 때 화..

Web 2024.04.05