안녕하세요. 혀코입니다.
이번 시간에는 HTML5의 <a> 태그와 <button> 태그의 사용방법의 차이에 대해서 알아보겠습니다.
<a> 태그
<a> 태그는 다른 페이지로 이동하거나 같은 페이지에서 id 값이 지정되어 있는 위치로 이동할 때 사용합니다.
<a href="https://www.tistory.com" title="티스토리 바로가기" target="_blank">Tistory</a>
href은 이동할 웹사이트 페이지 주소나 태그의 id 값을 지정할 수 있습니다.
title은 툴팁으로 링크가 어떤 내용인지 알려줍니다.
target은 _blank를 지정해서 새로운 탭에서 href에 지정된 웹사이트 페이지 주소로 이동할 수 있습니다.
<button> 태그
<a> 태그를 사용하는 부분을 제외한 나머지 모든 클릭 가능한 부분에 사용합니다.
<button type="button">Click Me!</button>
type으로 지정할 수 있는 값에는 button, reset, submit이 있습니다. 폼을 입력해서 사용자가 입력한 데이터를 받아 처리하려면, submit으로 지정해서 사용해야하고, 폼에 작성된 데이터를 지우려면 reset을 사용하고, 그 외에는 button을 사용합니다.
<form>
<button type="submit">Hello World</button>
</form>
<form> 태그 안에 <button> 태그가 위치해 있고, <button> 태그의 type이 submit으로 지정되어 있다면, 사용자가 클릭할 경우 웹페이지를 다시 로드하는데, 이러한 현상을 막으려면 type을 button으로 지정해 줘야 합니다.
간혹, <button> 태그의 기본 디자인이 엉망이라 <div> 태그를 사용하기도 하는데 <div> 태그를 대신 사용할 경우 스크린 리더가 인식할 수 없고, 포커스를 사용할 수 없으며, 스페이스나 엔터 등 키보드를 인식할 수 없는 단점이 있어 해당 기능을 직접 추가해서 사용해야 합니다. 그래서 <div> 태그를 사용하지 않고 <button> 태그를 사용하는데 다음과 같이 CSS 코드를 사용해서 스타일을 초기화해서 사용해야 합니다.
.btn {
all: unset
}
이때 button 태그의 모든 스타일이 초기화 되기 때문에 기본적으로 마우스 커서와 포커스 효과를 되살리려면 다음과 같은 코드를 덧붙여 사용해 줍니다.
button {
all: unset;
cursor: pointer;
}
button:focus {
outline: 1px solid black;
}
이렇게 HTML5의 <a> 태그와 <button> 태그의 사용방법의 차이에 대해서 알아봤습니다.
해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글