button 만드실 때에는 span 을 이용하세요.

질문Q #8227

토끼와거북2014-04-02 13:14:10

1. <a href="#" class="btn btn-mini">버튼1</a>
2. <button class="btn btn-mini">버튼2</button>
3. <span class="btn btn-mini">버튼3</span>

<문제점>
1. 스크롤이 있을 경우 버튼을 클릭하면 스크롤이 움직입니다. 버튼 클릭시 화면이 움직이지 않게 하려면 좋지 않습니다.
2. 버튼 클릭시 폼이 제출되는 문제점이 있습니다. 폼이 제출되면 안 되는 경우에는 사용하지 않는 것이 좋습니다.

<추천>
3. 가장 이상적인 형태입니다.

답변9

#1 한대승(불의회상) 2014-04-02 14:05:09

bootstrap 이용 하실때 한정입니다. ^^

button 태그 이용시 type 속성을 button으로 주시면 제출되는 문제점 해결이 가능합니다.

<button type="button">버트</button>

#2 인스카 2014-04-03 07:34:39

흠...

#3 noh 2014-04-03 17:17:00

버튼 태그 자체가 버튼으로 활용하기 위함인데 다른 문제 이지 않을까요?

#4 milosz 2014-04-11 10:52:51

이상적이지 않습니다. html 코드를 작성할 때에는 해당 엘리먼트의 디자인을 기준으로 button이다 a 또는 span이다 결정하는 것이 아니라 해당 문서에서 어떤 문서 요소로 작성되었는가를 기준으로 선택하셔야 합니다.

button이나 anchor로 작성하고 해당 엘리먼트를 클릭했을 때 js로 동작하는 부분이 있다면 js에서 event.preventDefault() 등으로 처리해주는 방식으로 js가 없을 때에도 동작을 확보할 수 있도록 작성하는 것이 이상적입니다.

#5 수야디벨 2014-04-17 10:20:03

그리고 이건 엄밀히 말하면 개발자 영역보다는 퍼블리셔 영역이지요.

퍼블리셔가 적절한 태그를 사용해서 만들어줘야 하는 부분.

그리고 milosz님의 의견에 동의하는 바이며, 퍼블리셔가 목적에 맞게 버튼을 지정해서 만들어줘야죠

본문의 3가지 문제는 1. href="#"을 지우고 a {cursor:pointer;} 2. onclick="return false;" 추가로 해결할수 있으며

더 나아가서 생각해보면

span은 원래 문자를 감싸는 태그라서 ,

일부 css의 속성에 제한이 있을수 있어요 (예를들면 임의의 넓이나 높이를 가지지 못합니다.)

#6 kaido 2014-04-20 20:24:41

딱히 뭘 써도 상관 없다고 생각 듭니다. [솔직히 깐깐하게 지키는 코더들 몇이나 된다고]

1-2 번은 열심히 썻는데 위에 보니 수야디벨님이 써주셨으니 패스하고..

< span 버튼3 >
3번은 왠지 납득이 가긴 합니다.
< span > 은 문자를 감싸는 부분 이긴 하지만 어차피 부트스트랩은 인라인 블럭 안에 엘레멘트 속성값들이 지정된 만큼 셋팅이 되기 때문에 딱히 문제가 생길 이유를 찾기도 어렵습니다.
< span >으로 처리 했기에 a 나 button 의 기본 속성을 배제하고 사용자 마음대로 정의를 할수 있다는 점이 좋습니다.

물론 정해진 기능을 정해진 대로
링크용이면 a로 submit용이면 button으로 처리 하는게 좀더 명확하긴 하겠지요.

그런데 코더나 퍼블리셔들 보면 자기들 편할려고
< a href="#" >< button > </ button>< /a >or < a href="#" > < img src=" .."> < /a >
그냥 전부 이렇게 줌 -_-
업체가 원하는 디자인 버튼을 맞출려고 이미지를 쓰는 경우가 많다 보니 말이죠.

따지고 들면 섹션안쓰는 코더 퍼블리셔 많은데.. span 하나 버튼으로 만들어 썻다고 오류라 하는 것도 쫌 그렇다고 생각 듭니다.
표준 코딩 테스트 돌려서 하나도 안 걸릴 자신 있는 코더만 저를 까주세요.
라고 하면 몇 명이나 될까요?
아 물론 adobe 에 있는 후덜덜한 애들 말고 ( ..)

#7 milosz 2014-04-25 23:56:18

kaido // 오류까지는 아니지만 tab으로 포인팅 할 수 없는 span을 버튼을 위해 사용하는건 권할 사항은 아닌 것 같아서요. 뭐 동작만 제대로 하면 된다는 수준에서야 상관 없겠습니다만 :)

#8 kaido 2014-04-30 15:32:54

장차법 생각을 못했네요 -_-
[저야 버튼은 어지간하면 버튼으로 넣는 버릇이 들어서 상관없다만. 나만 아니면 돼!]

#9 쫑이 2014-06-12 15:53:35

저같은경우 3번을 주로 사용하는데요
폼내부의 버튼은 클릭시 폼전송을 해버리기때문에 간혹 예상치않은 결과를 보여줄때가있어서요
그래서 아예 span으로 해버리니 그런경우를 생각하지않아도되서 저는 3번을 애용합니다.