[HTML] BUTTON 똑바로 써봤어??

 

이 버튼 하나 때문에 전환율이 두 배 올랐다고?
그런데 아직도 button 태그를 모르고 쓰고 있다고요?


우리가 매일 누르는 그 버튼, 그냥 눌린다고 끝이 아닙니다.

HTML에서의 button 태그는 단순한 트리거 이상의 의미를 가집니다.


오늘은 겉보다 속이 중요한 <button> 태그에 대해 조금 더 깊이 있게 이야기해보려 합니다.

오늘 배울 태그는
<button>입니다.

 

<button>클릭하세요</button>

 

가장 기본적인 버튼 형태입니다.

button 태그는 사용자 액션을 받을 수 있는 대표적인 요소로, 웹에서 클릭 이벤트를 전달하는 핵심 인터페이스죠.

기본적으로 폼 안에서 사용되면 submit 역할을 자동으로 가지지만, 그 외에도 다양한 동작을 자유롭게 지정할 수 있습니다.

 

<button type="button" onclick="alert('안녕하세요!')">
  인사하기 👋
</button>

 

 

이 버튼은 onclick 이벤트를 활용해 사용자가 클릭했을 때 간단한 알림을 띄우는 예제입니다.

여기서 중요한 건 type="button" 속성입니다. 기본값인 submit과 구분해서 폼 제출을 막고 독립된 액션을 수행하게 해줍니다.

form 안에 button이 들어갈 경우엔 반드시 type을 명시하세요.

 

<button style="background-color: #e0f2fe; border: none; padding: 12px 24px; border-radius: 8px;">
  스타일 입힌 버튼 ✨
</button>

 

 

728x90

HTML의 button은 기본 형태가 투박하기 때문에 대부분은 CSS를 통해 꾸며서 사용합니다.

위 예시는 배경색, 패딩, 테두리, 모서리 둥글기 등을 설정해서 심플하면서도 시각적으로 부드러운 버튼을 만들었습니다.

사용자에게 누르고 싶게 만드는 디자인, 이런 데서 차이가 생깁니다.

 

<button disabled>
  비활성화된 버튼
</button>

disabled 속성은 버튼을 클릭할 수 없게 비활성화하는 데 사용됩니다.

주로 조건이 충족되지 않았거나 입력값 검증이 필요할 때 쓰이죠.

스타일링을 통해 시각적으로도 비활성화 상태임을 보여주는 것이 좋습니다.

 

<form onsubmit="event.preventDefault(); alert('제출 완료!')">
  <input type="text" placeholder="이름 입력" required>
  <button type="submit">제출하기</button>
</form>

폼 안에서의 button은 type="submit"을 기본으로 가지고 있어서 폼을 전송하는 역할을 합니다.

event.preventDefault()를 통해 실제 전송을 막고, 프론트엔드에서 검증 후 처리하는 방식도 흔하게 사용됩니다.

JS와 HTML이 어떻게 협력하는지 보여주는 대표적인 예이기도 하죠.

 

💡 button vs input?

마무리하며 🌱

👉 더 많은 HTML 팁은 제 블로그에서 확인해보세요 https://jjaeho.tistory.com

배웠다 말았다 다시 시작했다😎