렝무식
💛 button 태그 사용 예제 본문
<button> 태그는 이름에서부터 알 수 있지만, 버튼 요소를 만드는 태그입니다.
웹페이지 제작 시 웹 접근성을 중요하게 생각하고 고려해야 하는데요.
이때 버튼 태그를 사용하면 tab키를 눌렀을 때 그 위치가 잡히게 됩니다.
이게 무슨 말이냐하면, 큐넷 홈페이지를 예시로 탭 키를 한 번 눌러볼게요.
보이는 것과 같이 검은색 테두리가 생기게 됩니다.
a태그와 button 태그는 이와 같이 검은색 테두리가 생기면서 tab키로 접근할 수 있습니다.
이는 마우스를 사용하지 못하는 시각장애인분들을 위해 존재하는 기능입니다.
a태그와 button태그가 이런 식으로 같은 기능을 하므로, button 태그 안에는 a 태그가 존재하면 안되며 그 반대도 성립합니다.
한마디로 하나의 태그만 사용해야 한다는 의미입니다.
button태그의 특징은 다음과 같습니다.
1. inline 요소
2. 배경색, 테두리, 아웃라인이 기본적으로 젹용
3. 다른 인라인 태그와 달리 너비와 높이를 지정할 수 있으며, margin과 padding 또한 적용이 가능함
button 태그를 아무런 css 속성 없이 사용하게 되면 이런식으로 만들어집니다.
테두리도 존재하고, 회색 배경도 보입니다.
아웃라인은 탭 키를 눌렀을 때 보이는 검은색 테두리를 의미합니다.
그런데 보통 button 태그를 사용할 때 이러한 디자인으로 사용하지 않습니다.
그래서 css reset을 정의할 때 button 태그의 테두리와 배경을 none으로 지정한 후 작업합니다.
button 태그와 a 태그는 비슷한 역할을 하지만, button 태그의 경우 어떠한 링크를 지정하는 용도라기보단 한 페이지 안에서 어떠한 상호작용이 일어나는 경우에 많이 사용합니다.
우리가 흔히 볼 수 있는 슬라이드나 리스트의 불릿, 슬라이드를 넘기는 화살표 버튼 등이 그 예시입니다.
그렇기 때문에 이 불릿과 화살표 버튼을 만드는 예제와 함께 알아보겠습니다.
이런 불릿 표시 홈페이지 돌아다니다 보면 많이 보입니다. ㅎㅎ
선택된 페이지는 다른 불릿들과 다른 색으로 표현이 되는 모습입니다.
물론 그런 상호작용을 만드는 것은 나중의 일이고, 일단은 겉모습만 만들어보겠습니다.
✅ HTML
<body>
<div id="btn">
<button class="a1"></button>
<button></button>
<button></button>
</div>
</body>
✅ CSS
#btn {text-align: center;}
#btn button {width: 15px; height: 15px; margin: 0 10px; background: gold; border: none; border-radius: 15px; cursor: pointer;}
#btn button.a1 {background: red;}
위에서 말했듯이, button 태그는 인라인 요소인데도 너비 높이 지정이 가능합니다.
그리고 background도 원하는 색으로 지정을 했고, border 속성은 none으로 없애주었습니다.
동그란 불릿의 모양으로 만들기 위해 border-radius 속성도 추가해줍니다.
cursor: pointer 속성의 경우, button 태그는 누를 수 있는 요소인데도 커서가 "클릭할 수 있다"라는 표시를 해주지 않습니다. 따라서 그 표시를 만들어주기 위한 속성입니다.
선택된 버튼의 경우 class명을 a1으로 추가해둔 상태입니다.
따라서 button 중 a1을 선택하겠다 라는 뜻으로 button.a1을 선택하여 속성을 지정해줍니다.
이때 요소 선택자 nth-of-type을 사용해도 괜찮지만..
나중에 자바스크립트를 적용할 때 요소를 선택해서 addClass를 실행하게 되는데요. 그래서 nth로 요소를 선택하는것 보다는 class명을 지정하는 것에 좀 더 익숙해지는 것이 좋을.. 좋을거예요 ㅎㅎ (아닐시 님 말이 다 맞음 ... 난 말하는 감자니까)
이번엔 다른 예제를 한 번 만들어 볼게요.
아까 위에서 말했던, 슬라이드를 넘기는 화살표 버튼입니다.
요 모양입니다!
물론 화살표 모양은 css로 만들기 어렵습니다. 더군다나 저런 radius가 들어간 화살표는 만드는게 불가능합니다 ㅋㅋ
그래서 미리 포토샵으로 만든 사진 파일을 이용했습니다.
✅ HTML
<body>
<div id="btn">
<button><img src="img/banner_button_left.png" alt="left button"></button>
<button><img src="img/banner_button_right.png" alt="right button"></button>
</div>
</body>
alt 속성을 기입하는 것을 습관이 되도록 만듭시다!
웹접근성을 위한 정말정말중요한! 속성이니까요 !!
✅ CSS
#btn {text-align: right;}
#btn button {margin: 0 10px; background: none; border: none; cursor: pointer;}
#btn button img {width: 45px; height: 45px;}
css는 정말 별거 없습니다.
오른쪽으로 정렬한 이유는 .. 예제 시안에서 슬라이드의 우측 하단에 버튼을 올려놓았기 때문입니다. 별 이유 없음
중요하게 볼 요소는 위에서 했던 예제랑 똑같습니다.
background와 border 속성을 none으로 두고, cursor를 pointer로 지정해주면 됩니다.
그리고 margin으로 버튼과 버튼 사이에 간격을 주었는데요.
이때 간격을 주는 요소가 img가 아닌 button인 이유는요.
둘의 간격을 조절하기 위해서는 형제관계의 태그에다 margin을 적용하는 것이 좋기 때문입니다..!
따라서 사촌 관계인 img보다는 button 태그에 margin을 넣는 것을 권장합니다.
..쓰다보면
너무 현타가 옵니다 .. 이런 기본적인 내용 가지고 뭐하나 싶어요.
약간.. 시간을 들이고 있는데 그만큼 생산적인 일인가? 싶기도 하고요...
그래서 혼자 공부하고 정리하는 용도라고 생각하고 쓰고 있기 때문에 가독성 좋게 신경쓴다거나, 아니면 재밌게 말을 한다거나, 아니면 좀 예쁘게 꾸민다거나 .. 이런거 일절 안하고 쓰고 있습니다. (이런거 신경쓰기 시작하면 저는 밑도끝도없이 잘 쓰려고 하기 때문에.. 아예 차단해버렸습니다.)
'웹퍼블리싱 수업정리 > html + css + js' 카테고리의 다른 글
| ❤️ 공통된 컨텐츠의 나열, li 영역 예제 (0) | 2024.04.01 |
|---|---|
| 🧡 메인 슬라이드 영역 예제 (0) | 2024.03.31 |
| 💚 display: inline-block 속성을 이용한 레이아웃 예제 (0) | 2024.03.30 |
