HTML에서 button 태그 대신 div 태그로 버튼 만드는 방법(onclick, hover, active)

웹 개발을 하다 보면 브라우저가 기본적으로 제공하는 <button> 태그의 투박한 스타일을 변경하고 싶을 때가 있습니다.

이 때 <button> 태그 대신 디자인의 자유도를 높이기 위해 <div> 태그를 활용하는 경우가 많습니다.

 

하지만 단순히 onclick 이벤트만 추가한다고 끝이 아닙니다.

<div> 태그는 레이아웃을 만들거나 컨텐츠를 나누는 컨테이너로 사용하는 태그이기 때문에 <div> 태그만 사용한다면 영역만 차지하게 되거나 텍스트만 표시될 뿐입니다.

 

따라서 이 글에서는 <button> 태그 대신 <div> 태그로 버튼을 구현하는 방법에 대해 알아보고

사용자가 <div> 태그를 버튼처럼 인식하고 느끼게끔 디자인해 보고 버튼처럼 동작하게끔 구현하는 방법에 대해 알아보겠습니다.

 

 

1. <div> 태그 구조

먼저 <div> 태그로 버튼 구조를 잡았을 때 중요한 것은 역할(role)을 부여하는 것입니다.

role 속성은 태그의 역할을 알려주는 속성인데 해당 속성 값은 임의로 부여하는 것이 아닌 정해진 값을 사용해야 합니다.

 

role 속성값 종류

- tab, banner, button, group 등

role 속성값 종류는 위와 같이 많은데 지금 우리가 사용할 속성값은 button입니다.

 

role 속성은 기능적인 측면으로만 생각한다면 불필요한 속성이라고 판단할 수 있습니다.

하지만 시각장애인들이 이용하는 스크린 리더기 및 웹 컨텐츠의 접근성 향상에 도움을 주는 부수적인 역할을 수행하는 속성입니다.

또한 role 속성을 추가하면 해당 태그의 역할을 바로 파악하기 쉽기 때문에 유지보수 측면으로 생각해봤을 때도 필요한 속성입니다.

 

<div> 태그 버튼 소스코드 예시

<div class="custom-button" role="button" onclick="action();">
    버튼
</div>

 

CSS 미적용된 <div> 버튼 화면

* CSS 미적용된 <div> 버튼 화면

 

위와 같이 class가 적용되지 않고 <div> 태그로만 이루어진다면 사용자가 확인했을 때 버튼이라고 파악하기 어렵습니다.

따라서 class를 지정하여 CSS를 반영해주는 것이 필수적입니다.

 

 

2. <div> 태그 디자인

위처럼 HTML에 <div> 태그를 작성하였다면 이제 CSS를 통해 디자인 작업을 진행합니다.

CSS에서는 간단하게 기본 스타일을 지정해주면서 마우스를 올렸을 때(hover)와 클릭했을 때(active) 스타일 변화를 주면 됩니다.

 

CSS 소스코드

/* 기본 스타일 */
.custom-button {
    width: 120px; /* 너비 지정 */
    height: 40px; /* 높이 지정 */
    background-color: #FFE003; /* 배경색 지정 */
    color: #005FA9; /* 텍스트색 지정 */
    display: flex; /* 텍스트 중앙 정렬을 위해 추가 */
    align-items: center; /* 가운데 정렬 */
    justify-content: center; /* 가운데 정렬 */
    border-radius: 8px; /* 둥근 모서리 정도 */
    cursor: pointer; /* 커서 지정 */
    font-weight: bold; /* 텍스트 굵기 지정 */
    user-select: none; /* 텍스트 드래그 방지 */
    transition: all 0.2s ease; /* 부드러운 변화 */
    box-shadow: 0 4px 6px #d4bc00; /* 그림자 지정 */
}

/* 마우스를 올렸을 때 스타일 */
.custom-button:hover {
    background-color: #ffeb3b; /* 배경색 지정 */
    box-shadow: 0 6px 8px #d4bc00; /* 그림자 지정 */
}

/* 마우스를 클릭하고 있을 때 스타일 */
.custom-button:active {
    background-color: #fdd835; /* 배경색 지정 */
    transform: translateY(1px); /* 아래로 눌리는 효과 지정 */
    box-shadow: 0 2px 4px #d4bc00 inset; /* 그림자 지정 */
}

 

CSS 적용된 <div> 버튼 화면

* CSS 적용된 <div> 태그 화면

 

위와 같이 CSS만 적용시켜도 버튼처럼 표시할 수 있습니다.

위 예시 CSS는 간단하게 구현하였지만 원하는 디자인을 자유롭게 구현하면 됩니다.

실무에서는 <button> 태그보다 디자인의 자유도가 높기 때문에 <div> 태그를 활용하여 버튼을 구현하는 경우가 많습니다.

 

 

3. 자바스크립트로 버튼처럼 동작하게끔 구현

지금까지 <div> 태그로 버튼을 구현하였고 class에 CSS를 설정하여 디자인 작업까지 완료하였습니다.

이제 남은 과정은 <div> 태그를 버튼처럼 동작하게끔 자바스크립트 코드를 구현하는 것입니다.

 

자바스크립트 코드

function action() {
    alert("버튼이 클릭되었습니다.");
}

 

* 자바스크립트 적용된 <div> 버튼 화면

* 자바스크립트 적용된 <div> 버튼 화면

 

위의 자바스크립트 코드는 <div> 태그가 클릭되었다는 것을 표시하기 위해 알림창을 띄우는 간단한 코드입니다.

자바스크립트 코드는 구현하고자 하는 기능에 따라서 자유롭게 구현하면 됩니다.

 

 

지금까지 <button> 태그 대신 <div> 태그로 버튼을 구현하는 방법에 대해 알아보았습니다.

CSS에 단순히 기본 스타일을 지정하는 것보다 hover와 active 효과를 추가한다면 사용자는 훨씬 버튼으로 인식하기 더 쉽기에 사용을 추천드립니다.

 

긴 글 읽어주셔서 감사합니다.

다음에는 더 좋은 주제로 찾아오겠습니다:D