부트스트랩 버튼 오류
본문
안녕하세요. 현재 부트스트랩 btn btn-primary btn-block 버튼을 사용중입니다.
위 사진 중 윗부분 버튼 코드입니다. 부트스트랩 기존 버튼 안에 a 태그를 삽입해 버튼안의 글자를 클릭하면 설정한 링크로 연결되게 했습니다.
<button class="btn btn-primary btn-block" type="button">
<a href="">버튼</a></button>
<button class="btn btn-primary btn-block" type="button">
<a href="">버튼</a></button>
그런데 이렇게하니 버튼이 길어질경우 글자를 클릭해야만 링크가 작동하는게 불편해서 버튼을 클릭하면 링크로 연결되도록 아래처럼 바꿨습니다. 그랬더니 사진의 아랫부분처럼 버튼 두개가 자동으로 붙어버리네요...!
<a href=""><button class="btn btn-primary btn-block" type="button">
버튼</button></a>
<a href=""><button class="btn btn-primary btn-block" type="button">
버튼</button></a>
혹시 이 현상이 왜 일어나는지, 어떻게 고칠수있는지 아는분 계시면 도와주신다면 정말 감사하겠습니다!
답변 2
<a href="url" class="btn btn-primary btn-block" role="button">링크1</a>
<a href="url" class="btn btn-primary btn-block" role="button">링크2</a>
적용 후 확인
감사합니다! type="button" 말고 role="button"으로 해야하나요?
<a> 태그와 <button> 태그 둘다 링크나 버튼형식에 태그입니다 둘이 같이 사용하지 않습니다.
답변을 작성하시기 전에 로그인 해주세요.
