NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


CSS Text Button Design With Icon.

본문 건너 뛰기

2008년 10월에 포스팅 했던 CSS Text Button Design 으로부터 색상 변화를 제거하고 대신 아이콘 세트를 추가하여 보다 아름다운 형태의 두 번째 버전을 내놓게 되었습니다. 지난 버전의 버튼에 처음에는 아이콘을 넣었다가 브라우저 호환성 맞추기가 너무 힘들어서 결국 아이콘을 제외하게 되었는데요. 이렇게 다시 넣을 수 있게 되어서 무척 만족스럽습니다. 아이콘을 더 추가할 필요가 있거나 교체하고 싶으시면 직접 바꾸실 수 있습니다. IE(5.5, 6, 7, 8) 그리고 최신 버전의 다양한 브라우저(Firefox, Chrome, Safari, Opera) 및 다양한 DTD(Quirks Mode, HTML 4.01, XHTML 1.0, HTML 5)에서의 호환성 테스트를 마쳤습니다. 어떤 DTD 또는 브라우저에서라도 호환성에 문제가 있는 경우는 제보해 주세요. 오픈소스뿐만 아니라 개인 및 상업적인 경우에도 아무 제한 없이 마음껏 사용하실 수 있습니다. 감사합니다.

[ 예제를 새창으로 보기 | CSS 보기 | Image 보기 ]

이 밖에 더 많은 예제들이 OUIF | XEUI 페이지에 링크되어 있습니다.

분류: CSS,웹 표준 | 2010년 1월 15일, 22:29 | 정찬명 | 댓글: 88개 |
트랙백URI - http://naradesign.net/wp/2010/01/15/1141/trackback/

88개의 댓글이 있습니다.

  1. 정찬명의 생각…

    CSS Text Button Design With Icon….

  2. 아즈키 댓글:

    후아… 정말 좋은 거군요..
    꼭 활용하고 싶습니다!
    매우 감사합니다

  3. 녹풍 댓글:

    와우~ 정말 감사합니다! ^^ 활용도가 높을 것 같아요.

  4. 정찬명 댓글:

    아즈키님, 녹풍님 사용하시면서 혹시 더 멋지게 개선하시면 댓글로 공유좀 부탁드립니다. 감사합니다. ^^

  5. Espressivo 댓글:

    아이콘 들어간 버튼은 늘 통이미지로만 만들었는데..
    아 너무 좋네요 :)

  6. 정찬명 댓글:

    Espressivo님 아무쪼록 유용하게 잘 써주세요. ^^

  7. 김광곤 댓글:

    이전 버전도 깔끔하니 상당히 유용했었는데…
    디자인성 측면에서 더욱어 효율성이 높아지겠군요~
    대단히 감사합니다.
    수고하시고 좋은 하루 되시길… ^^

  8. 두롱 댓글:

    button은 브라우저별로 차이가 좀 나던걸요..
    IE6에서의 padding값이나 간격등이 차이가 심하게 나서 이거 해결하는 방법은
    없을까요? ㅎ

  9. 조경수 댓글:

    display: inline-block; 사용시 간격 차이가 나지않나요.;;?

  10. dalmam 댓글:

    좋은 정보 늘 감사합니다. ^^
    근데 영어는 참 예쁜데… 한글은 어찌… ㅠㅠ

  11. 연주 댓글:

    제가 몰라서 묻는데요…익스에서는 버튼이랑 인풋이 클릭되는게 들석거려서 보이는데 다른 부라우저에서는 a링크랑 똑같거든요? 브라우저차이인거에요???

  12. 정찬명 댓글:

    두롱님,
    브라우저별로 간격차이가 나는것은 어쩔 수 없는 현상이고 굳이 일치시킬 필요가 없다고 생각해서 그냥 두었습니다. 브라우저별로 1px까지 일치시켜야 하는 상황이 필요한지 모르겠지만 필요하시다면 핵을 사용해서 어느정도 보완하실 수는 있겠습니다.

  13. 정찬명 댓글:

    조경수님,
    button, input 요소는 좌우 패딩을 0으로 초기화 하더라도 브라우저마다 다른 패딩값을 갖게 되는 현상이 있고 inline-block 때문은 아니었습니다. ^^

  14. 정찬명 댓글:

    연주님,
    네, 맞습니다. 브라우저마다 button, input 요소의 active 상태를 표현하는 형식이 달라서 그렇습니다. IE는 폼 콘트롤 요소가 :active 상태가 되면 우로 1px 하로 1px 움직이는 표현을 하지요.

  15. 아름이 댓글:

    두롱님, 정찬명님.
    http://naradesign.net/wp/2009/05/13/825/
    혹시 이 글에 관한 얘기가 아니셨을까요?^^

  16. 두롱 댓글:

    아 이에 대한 정보도 있었군요~~
    아름이님 정찬명님 감사합니다. ㅋㅋ
    근데, “예제를 새창으로 보기” 페이지에서요 파이어폭스2 쓰고 있는데,
    제 컴퓨터에선 버튼박스가 깨져보이는 군요. (–);

  17. 디자인쿤 댓글:

    정찬명님 글을 보고 알려주신 방법을 응용해서 제작을 많이 하는데
    큰 도움이 되고 있습니다.
    웹표준과 css에 대해 많은 공부를 하고 있지만 아직도 갈길이 먼거같네요.
    그와 더불어 웹에서의 한글 표현이란 참…

  18. 정찬명 댓글:

    아름이님 감사해요. ^^ 두롱님 FF2는 inline-block 속성을 지원하지 않아서 호환 대상에 포함을 시키지 않았았는데요. FF 전용 속성 값(display: -moz-inline-stack)을 추가해서 조치를 해놨습니다. 제가 FF2 브라우저가 없어서 확인을 못하고 있는데요. 지금 제대로 보이는지 다시 한 번 확인해 주시겠어요?

  19. 정찬명 댓글:

    김광곤님, dalmam님, 디자인쿤님 격려 감사합니다. ^^ 한글 뿐만 아니라 아시아권 국가들이 모두 같은 고민을 하고 있을것 같아요. ㅎㅎ.

  20. 퍼블리 댓글:

    오랜만에 들렀는데 좋은내용이군요.
    갈수록 브라우져는 늘어나고 퍼블리셔의 어깨는 무거워지는걸 새삼 느끼게 됩니다.
    게시판 버튼용으로 사용하면 좋을거 같네요 ~
    수고하셨습니다.~

  21. 나니 댓글:

    visibility:visible; 만으로는 해결 안되? (…)
    직접 안해봐서 모르겠네..

  22. 정찬명 댓글:

    나니, overflow:visible이 아니고? overflow 속성은 extra padding bug 해결할 때 사용하는 것이고 FF2 문제는 inline-block을 지원하지 않기 때문에 발생하는 문제란다.

  23. 서영종 댓글:

    좋은 글 보고 갑니다. ^^
    마음껏 사용하겠습니다. ㅋ

  24. 두롱 댓글:

    이제 파폭2에서도 정상적으로 보이는군요~
    총 3가지 얻어 갑니다~~ ㅋㅋ

  25. 정찬명 댓글:

    서영종님 잘 쓰시고 피드백도 팍팍 주셔요. ^^ 감사합니다.

  26. 정찬명 댓글:

    두롱님 때문입니다. 감사합니다. ^^

  27. 나니 댓글:

    헉.. 나 지금까지 잘못 알고 있었네.. overflow의 visible 이었다니 ㅠㅠ

  28. ihwan 댓글:

    제가 개발하고 있는 휴팟 http://www.hupod.net 에서도 잘 사용하고 있었습니다.
    확인 취소 버튼 같은게 너무 밋밋해보이고 조금 잘 보이지 않았었는데 한번 업데이트 하신 버젼으로 수정해보아야겠습니다. 감사합니다.

  29. 정찬명 댓글:

    ihwan님, 이렇게 멋진 사이트에 제가 만든 버튼이 들어가 있는걸 보니까 무척 기쁩니다. 새 버튼도 예쁘게 잘 사용해 주세요. ^^ 감사합니다.

  30. hyozz 댓글:

    감사합니다! 정말 잘 쓰겠습니다.
    이걸로도 정말 많이 공부가 되었습니다. ^^
    항상 여러가지로 도움만 받네요……

  31. 정찬명 댓글:

    hyozz님 안녕하세요? 사용해 보시고 이런 저런 피드백 주시는 것도 제게는 큰 도움인걸요. ^^ 감사합니다.

  32. 김일규 댓글:

    워… 감사합니다.
    이번에 리뉴얼하고 있는데.. 버튼 써야겠네요~~!

  33. 호야 댓글:

    어쩜어쩜 만쩜!!

    … 요소는
    요소와 동일한 기능을 수행 합니다.

    요소와 가장 큰 차이점은 내용을 가질 수 있다는 점 입니다. … 요소는 텍스트 뿐만 아니라 이미지 요소를 자식으로 포함할 수 있습니다.

    …// 라고 하는데요.. 그럼 게시판에서 찾기버튼이나 글쓰기 버튼때 input 대신 button 태그를 사용해도 될까요?

    한가지 더요~
    button이 여러 웹브라우저 마다 누를때 움직임이 다르다고 움직이지 않게(?) 어찌 되었든 크로스브라우징을 위해(일정하게 보이기) 원래 있는 기능을 저지(?) 하는 것은 원래 가지고 있는 속성에 어긋나는 건 아닌지요…//무슨말인지..ㅡㅅㅡ

    내일 또 나타날깨요~^_^

  34. 호야(2) 댓글:

    헐…

    (X)HTML 코드 사용이 가능하지만 코드가 그대로 출력되기를 원하시면 는 [괄호]로 변환해 주세요

    —————————————–변환—————————————————–

    [button type=”submit | button | reset”]…[/button] 요소는
    [input type=”submit | button | reset” /] 요소와 동일한 기능을 수행 합니다.

    [input /] 요소와 가장 큰 차이점은 내용을 가질 수 있다는 점 입니다.
    [button]…[/button] 요소는 텍스트 뿐만 아니라 이미지 요소를 자식으로 포함할 수 있습니다.

    …// 라고 하는데요.. 그럼 게시판에서 찾기버튼이나 글쓰기 버튼때 input 대신 button 태그를 사용해도 될까요? // (“니가 테스트 해봐..바봉 ㅋ” 이러시면..ㅠㅠ)

    한가지 더요~
    button이 여러 웹브라우저 마다 누를때 움직임이 다르다고 움직이지 않게(?) 어찌 되었든 크로스브라우징을 위해(일정하게 보이기) 원래 있는 기능을 저지(?) 하는 것은 원래 가지고 있는 속성에 어긋나는 건 아닌지요…//무슨말인지..ㅡㅅㅡ

    http://html.nhndesign.com/?mid=blog&category=87&document_srl=2038

    여기 보면 엄청 힘들게 이렇게 하시더라고요..이렇게 까지 해야 하나 싶기도 하고

    크로스 브라우징도 좋지만 웹 포퍼먼스도 중요해서…암튼

    내일 또 나타날깨요~^_^

  35. 정찬명 댓글:

    호야님 안녕하세요?

    네, [input type=”submit”] 대신 [button type=”submit”] 으로 마크업 하셔도 모든 브라우저에서 [form] 전송 기능이 수행 됩니다.

    IE 브라우저의 경우 :active 상태에서 버튼에 움직임이 발생하는 것은 브라우저가 제공하는 사용자 경험으로써 이것을 움직이지 않도록 처리하는 것이 무조건 나쁘다고 할 수 없지만 여러 라인의 CSS hack을 동반하면서까지 움직이지 않도록 처리하는 것이 과연 옳은가? 라는 질문에 스스로 답변을 해보시면 되겠습니다.

    제가 정답을 가진것이 아니구요. 정답은 호야님의 견해에 달려있다는 의미 입니다.
    감사합니다.

  36. 냠냠 댓글:

    제보 드립니다.

    IE 6.0에서 button과 input 의 마우스 오버시 변화가 없습니다.

    망할 6.0….

    라틴국가 서비스 하는데…

    라틴유저 페이지 방문자 조사 했는데..6.0이 50% 가까이 되는데..흑흑

    저만 그래요? ㅠㅠ

  37. 백상어 댓글:

    멋지십니다!! 저도 잘쓸게요^^

  38. 정찬명 댓글:

    냠냠님 제보 감사합니다. ^^

    IE6가 input, button 요소에 대하여 :hover :acitve :focus 가상선택자를 지원하지 않기 때문에 색상 변화가 없는 것입니다. 브라우저 버그 이지요. 알고 있었지만 처리하지 않았습니다.

    자바스크립트를 사용하면 물론 가능은 하겠지만 일부러 처리하지 않은 이유는

    1. 롤 오버 상태의 변화가 필수적인 반응이라고는 판단하지 않았고
    2. 자바스크립트까지 사용해서 코드를 복잡하게 만들 필요가 있을까

    라고 생각했기 때문입니다.
    감사합니다.

  39. 정찬명 댓글:

    백상어님 감사합니다. 이쁘게 써주세요. ^^

  40. 오예 댓글:

    제가 원하고 궁금해하던 거에요 감사합니다^^

  41. 정찬명 댓글:

    오예님 감사합니다. 궁금한점 있으면 언제든 물어봐주세요. ^^

  42. ihwan 댓글:

    가능하시다면 이 버튼 디자인에 맞는 input 도 사이즈 별로 가이드 라인이 있으면 좋을거 같습니다.

    브라우져마다 조금씩 틀려서 좀 골치를 썩을때가 한두번이 아닙니다. ㅠㅠ

    특히 같은 라인상에 input 과 button을 배치할때면 그거 맞추기가 여간 까다로운게 아니더군요 ^^

  43. 흑흑 댓글:

    1. button 태그에 순전히 페이지 이동으로 사용하면 안되나요?

    2. 이동시
    [button type=”button” onclick=”location.href=’네이벙’;”]button[/button]
    이렇게 사용하는게 맞나요? (되긴 되는데…)

    ^_^

  44. 정찬명 댓글:

    ihwan님, 그것은 사용하시는 분들의 숙제로 남겨두는것이 좋을것 같습니다.
    브라우저 호환을 위한 가이드라인을 만드는 일은 너무 많은 경우의 수를 고려해야 하기 때문에 만들기도 쉽지 않고 이해하기도 쉽지 않을것 같습니다. ^^

  45. 정찬명 댓글:

    흑흑님, 그런 방법은 옳지 않은 방법입니다. a 요소로 처리할 수 있는 기능을 왜 button으로 처리하려 하시나요? 자바스크립트 미 지원 환경에서는 당연히 링크가 작동하지 않겠지요. 상호운용성이 떨어집니다. 브라우저 상태 표시줄에 URL이 나타나지도 않아서 사용성도 떨어집니다.

  46. 흑흑(2) 댓글:

    자바스크립트 미 지원 환경에서는 당연히 링크가 작동하지 않겠지요.?

    모든 상황에서 HTML의 본래 기능을 대체하는 자바스크립트는 부적절 합니다. 자바스크립트 없이 HTML만으로 기능을 수행할 수 있도록 구현한 다음 자바스크립트를 지원하는 환경을 위한 코드를 추가하면 문제가 되지 않습니다. 아래 예는 자바스크립트 미 지원 환경을 고려하지 않은 코드와 고려한 코드가 어떻게 다른지 보여 줍니다.

    [a href=”#” onclick=”window.open(‘http://example.com/’,’_blank’)”]… (X)
    [a href=”http://example.com/” target=”_blank” onclick=”window.open(this.href,’popName’, ‘width=300, height=200’); return false”]…[/a] (O)

    이것과 다른 건가요?

  47. 정찬명 댓글:

    흑흑님이 보여주신 예제와 흑흑(2)님이 보여주신 예제는 물론 다르고 큰 차이가 있습니다.

    [a href=”http://example.com/” target=”_blank” onclick=”window.open(this.href,’popName’, ‘width=300, height=200’); return false”]…[/a] (O)

    이 방식은 자바스크립트 지원 환경에서는 자바스크립트를 사용하고 미지원 환경에서는 HTML의 기본 기능이 수행되는 코드로써 권장되는 예제 입니다.

  48. 흑흑(3) 댓글:

    자꾸 질문만 드려서 죄송하네요..

    궁금한게 마구마구 생겨서..

    [a href=”xxx”]를 사용한 페이지 이동과
    [button onclick=”location.href”]를 사용한 페이지 이동의 차이는 뭐가 있을까요?

    (니가 직접해봐..ㅜㅜ)

    어떠한 퍼포먼스의 차이점이 있는지 혹시나….ㅠㅠ

    그리고 [button]태그는 도대체 그럼 언제 어느 때 사용하는게 좋을까요?

  49. 정찬명 댓글:

    흑흑(3)님,

    button 에 location.href를 이용하는 방법은 자바스크립트를 지원하는 환경에서만 가능한 방법이므로 모바일 환경과 같이 자바스크립트 지원률이 천차만별인 환경에서 상호 운용성이 떨어집니다. 링크 작동이 안되는 경우가 생기죠.

    또한 하이퍼링크는 a 요소로 마크업 해야 의미에 맞습니다. a 요소는 anchor로써 웹 문서 참조를 의미하는 마크업 입니다. a 로 마크업 하면 자바스크립트 미 지원 환경에서도 링크가 작동하기 때문에 상호 운용성이 있는 방법이죠.

    제가 작성한 아래 두 문서를 참고해 보세요.

    a 태그의 사용성과 접근성.
    http://naradesign.net/wp/2007/07/11/123/

    CSS Text Button Design.
    http://naradesign.net/wp/2008/10/31/203/

    button 요소는 폼을 전송하거나 또는 자바스크립트를 이용하여 화면 UI를 조작하는 등의 버튼에 사용하면 됩니다. 예를 들면 ‘창닫기’ 버튼이나 또는 숨은 콘텐츠를 ‘열기/닫기’ 또는 브라우저의 히스토리를 이용한 ‘뒤로/앞으로’ 버튼에 사용하면 적합합니다.

  50. 좋은날 댓글:

    input 대신 button 태그를 사용 –> 의견
    input을 사용하면 값이 서버로 넘어가지만 버튼은 넘어가지 않습니다.
    input은 입력이 동반하는 의미를 갖고 button은 의미 그대로 버튼입니다.

  51. 정찬명 댓글:

    좋은날님 의견 감사합니다. 참고로 button 요소의 type 기본값이 submit 이기 때문에 type을 지정하지 않으면 폼이 전송되므로 [button type=”button”] 이라고 지정하여 폼이 전송되지 않도록 해야 합니다. ^^

  52. 엘카 댓글:

    버튼문제로 고심하던차에 이 포스팅을 발견했습니다.
    정찬명님 포스팅은 언제나 영양가 만점 -_-b

  53. 정찬명 댓글:

    엘카님 감사요. ^^

  54. 김진태 댓글:

    정말 유용하네요, 득템한 느낌이랄까요 ㅎㅎ

  55. 정찬명 댓글:

    김진태님, 다음에 또 다른것도 올려볼께요. 감사합니다. ^^

  56. 빅토르최 댓글:

    정말정말 초보적인 질문 하나 하겠는데요..
    (css코딩 시작한지 1주일 되었습니다. ^^;;)

    소스를 봤는데요.
    어느 부분에서 버튼의 오른쪽 마지막 이미지를 불러와지게 하는건가요??
    아무리 봐도 어느부분인줄 잘 모르겠습니다. -_-);;

    답변 부탁드립니다~~

  57. 정찬명 댓글:

    @빅토르최
    이미지가 하나만 존재하고 좌우측 모두 배경으로 사용된 것은 알고 계시겠죠? 오른쪽 끝부분에 배경 이미지가 보이도록 한 것은 .button 요소 안쪽에 포함된 요소(a, input, button)를 이용한 것입니다.

    ‘*’ 별표 선택자를 보셨겠죠? 이 별표는 ‘모든 요소’를 선택하는 ‘공통 선택자’ 입니다. 따라서 .button 안쪽에 포함된 모든 요소(a, input, button)가 선택되어 배경이미지를 출력할 수 있게 되는 겁니다.

  58. 빅토르최 댓글:

    정찬명님 감사합니다.
    아직은 소스를 봐도 ‘왜 이렇게 넣었을까…’ ‘이거의 뜻은 먼지????’ 막 이런생각이 들지만.
    계속 해보고 있습니다.
    계속하다보면 하나하나씩 알아갈꺼라는 희망으로…..^^;;

    정말정말 이 블로그도 정찬명님도 감사드립니다~

  59. 정찬명 댓글:

    @빅토르최
    CSS 문법을 익히는데 걸리는 시간은 오래 걸리지 않을 텐데요. 브라우저 호환성 맞추기는 다소 까다로운 부분이 있어서 그 부분만 염두하시면 금새 익숙해 지실 껍니다. ^^

  60. 터프키드 댓글:

    헛 방금 전에 글에 댓글 남겼는데
    사실 저도 앞쪽에 아이콘 들어간게 필요해서 이미 수정해서 사용하고 있었어요~
    근데 문제가 a, input, button 모두 다르게 보인다는 문제가 생겨서
    고민이었는데..
    좋은 정보 감사합니다

  61. 정찬명 댓글:

    @터프키드
    아이콘을 전경 이미지로 사용하면 브라우저 호환성 맞추기가 제게도 정말 어렵더라구요. ^^

  62. 냐하~ 댓글:

    매번 이미지 버튼때문에 힘들었는데…
    이번 방법도 있군요.
    좋은 정보 감사합니다.

  63. 하늘 댓글:

    안녕하세요, 처음으로 글을 써 보는 듯 하네요.

    이 버튼 방식을 현재 개발 중인 저희 회사 사이트에 사용하고 싶습니다.

    2.0 라이센스에 대한 것은 충분히 인지하고 있지만 아무래도 회사용 상업 웹사이트라 나라디자인의 url 을 남기는 것이 쉽지 않을 것 같아 글을 씁니다.

    혹시 이미지를 새롭게 바꿔서 저희가 사용을 해도 좋을지요.

  64. 하늘 댓글:

    앗 그런데 글을 다시 읽어보니 상업적인 용도로도 사용 가능하다고 자비롭게 허용해주신 문장이 있군요. 글을 잘 읽어보지 않고 댓글을 남긴 셈이네요. 죄송합니다.

    댓글을 삭제하려고 했는데 삭제기능이 없는 듯 해서 부득이하게 한 개 더 남기고 갑니다. ㅠㅠ 복 받으세요. 감사합니다.

  65. md5 댓글:

    파이어폭스에서 a 와 button/input 간의 넓이 차이가 나는군요..
    a 태그를 사용했을때 8~10픽셀 정도 작아 보이고.. 그래서 같은 블럭상에서
    button 과 a 태그를 같이 사용했을때 크기 차이가 두드려져 보입니다.
    margin 을 주려니.. 다시 IE가 문제고..
    이문제를 어떻게 해결할수 있을지요?
    힘들게 만드신 소스를 오픈해 주셔서 감사합니다~

  66. 정찬명 댓글:

    @md5
    버튼의 너비를 완전히 동일하게 맞춰야 하는 상황이라면 인라인 스타일로 상황에 맞게 width 값을 주는 방법이 현재로써는 가장 적절할 것 같습니다. firefox에서 렌더링되는 button, input에 포함된 padding을 없애는 방법을 저는 아직 찾지 못했답니다. ^^

  67. md5 댓글:

    뒤늦게 댓글 남깁니다.
    정찬명님 답변 감사합니다.
    말씀하신대로.. 버튼안의 글자수에 따라 width 주는 방법을 적용했습니다. (__)

  68. ㅠㅠ 댓글:

    오잉?

  69. ㅠㅠ감동 댓글:

    잘쓰겠습니다. 좋은 자료네요. 감사합니다.

  70. 익명 댓글:

    이 좋은걸 이제서야 발견하다니..ㅎㅎ 정말 감사합니다 +_+

  71. 정찬명 댓글:

    @익명
    여기 더 좋은것도 있어요. 제가 만든것은 아니지만. ^^ http://twitter.github.com/bootstrap/base-css.html

  72. 앙세 댓글:

    안녕하세요!
    늘 좋은 자료 감사히 잘 보고 있습니다^^
    찬명님 버튼소스는 정말 제가 좋아하는 소스중에 하나인데.
    오늘 작업을 하다가 한가지 이상한점(?)이 있어서 질문드립니다.

    1. 소스

    조회
    조회

    2. 현상
    – IE7에서 input type=”submit”이 상위 div의 margin의 영향을 받아서 15px만큼
    span 의 영역이 확장됨.
    (위의 ie7은 익스플로로의 문서모드 IE7으로 테스트)

    처음엔 제가 소스에서 뭔가 잘못수정해서 그런줄알았는데..
    버튼을 감싸는 상위 div의 마진에의해서 submit 버튼만 영향을 받더라구요.

    제가 아직 많이 부족해서 간단한건데 해결을 못하는거 같기도 하구..
    어제부터 계속 끙끙대다가 용기를내서 질문합니다 ㅠ_ㅠ

  73. 앙세 댓글:

    앗..위에 글을썻는데 소스가 제대로 나오지 않았네요.
    소스만 재첨부합니다.
    [div style=”margin:0 0 0 15px”]

    [span class=”button blue”][a href=”#”]조회[/a][/span]
    [span class=”button blue”][button type=”button”]조회[/button][/span]
    [span class=”button blue”][input type=”submit” value=”조회”/][/span]

    [/div]

  74. 앙세 댓글:

    앗.. 마진에 의한 영양은 style=”margin-rignt:15px;” 이렇게 주었을때입니다.

    위의 마진 소스는 제가 테스트중이던 소스를 그대로 올려서 왼쪽마진이 적용된 경우를 올려버렸네요.
    죄송합니다 (__)

  75. 정찬명 댓글:

    @앙세
    설명만으로 이해가 잘 안되는데요. 재현되는 예제 URL을 공유해 주시면 한번 볼께요.

  76. 도와주세요 ㅠㅜ 댓글:

    찬명님. 버튼의 백그라운드 이미지가 팝업창에서는 맞지가 않게 나옵니다.

    팝업사이즈와 이미지가 관련이 있는걸까요..??

  77. 익명 댓글:

    소스 정말 감사합니다.
    근데 스마트폰에서는 적용이 안되네요.
    어떻게 해야 적용이 될까요?

  78. 정찬명 댓글:

    @익명
    어떤 스마트폰의 어떤 브라우저인지는 모르겠지만 CSS를 제대로 지원하지 않는 브라우저 같네요. 브라우저가 CSS를 제대로 지원하지 않으면 저도 어쩔 도리가 없습니다.

  79. 정찬명 댓글:

    @승승
    지금은 이런 코드를 사용하지 않은지 오래 됐지만 설명 드리자면. input 요소는 닫힘 태그가 없기 때문에 span 요소를 자식으로 둘 수가 없지요. 그래서 span 요소를 밖에 두었던 것입니다.

  80. 승승 댓글:

    @정찬명가
    질문을 하는데 필터링 되서 태그가 다 지워졌군요 ㅜㅜ 다시 질문드릴게요.

    span 태그로 a 태그를 감싸는 형태의 버튼인데요, 왼쪽 라운드 가장자리만큼 링크가 안걸리는 현상이 생기잖아요? a태그로 span 태그를 감싸면 그런일이 없을텐데 굳이 span으로 a를 감싼 이유가 있는건가요?

    input은 설명이 되었습니다만 a태그의 경우가 궁금하네요 ㅎㅎ

  81. 정찬명 댓글:

    @승승
    마크업을 span > * 구조로 통일해서 CSS 코드를 a, input, button 요소에 모두 재사용 하려고 했기 때문입니다. a 요소를 밖으로 빼고 별도의 CSS를 적용해도 상관 없어요.

  82. 승승 댓글:

    @정찬명
    그랬군요 감사합니다!

  83. 권혁준 댓글:

    감사합니다.
    아주 유용하게 쓸 수 있을거 같아요.
    참고로
    FF에서 button등에 여백없애는 방법을 추가해 주면 더 좋네요.
    아래 css 추가해서 쓰면 여백이 없어집니다.

    /* FF 버튼 여백 없애기 S */
    button::-moz-focus-inner,
    input[type=button]::-moz-focus-inner,
    input[type=submit]::-moz-focus-inner,
    input[type=reset]::-moz-focus-inner{
    padding:0;
    border:0;
    }
    /* FF 버튼 여백 없애기 E */

  84. 정찬명 댓글:

    @권혁준
    공유 감사합니다. ^^

  85. 하정구 댓글:

    헐;;; 나는 지금까지 이거 ,,
    네이버에서 만든 버튼인줄 알았는디 ;;;;

  86. 정찬명 댓글:

    @하정구
    제가 네이버에서 근무하는 동안 만들었으니까 틀린 말은 아니죠 뭐. ㅋ

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님