NARADESIGN

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


CSS Text Button Design.

본문 건너 뛰기

웹 페이지에서 사용되는 Button은 그 목적에 따라 명확하게 3가지로 구분할 수 있으며 HTML 마크업은 각각 다릅니다. 자원을 참조하기 위한 a 엘리먼트, 인터페이스 조작을 위한 button 엘리먼트, 서식 전송을 위한 input 엘리먼트가 바로 그것입니다.

  1. a : URI를 ‘연결‘하기 위한 버튼으로서 <a href="#uri"> 형식으로 마크업 합니다.
  2. button : URI를 연결하지 않고 단순하게 사용자 인터페이스만를 ‘조작‘하기 위한 버튼으로서 <button type="button"> 엘리먼트로 마크업 합니다. type을 명시하지 않으면 어떤 브라우저는 Form Submit 기능을 실행하기 때문에 반드시 type 속성을 button으로 지정해 주어야 합니다.
  3. input : 사용자의 입력을 서버로 ‘전송‘하기 위한 버튼으로서 <input type="submit">, <button type="submit"> 엘리먼트로 마크업 합니다.

아래 준비된 예제는 버튼의 ‘목적‘과 ‘형태‘에 따라 다양한 HTML Markup 과 CSS 표현이 있음을 보여주고 있습니다. 텍스트 기반의 가변폭 버튼 표현은 좌우 2개의 이미지가 배치되어야 하는데 현재 활성 버전의 CSS 2.x에서는 Multiple Background Images와 같은 문법을 지원하지 않기 때문에(정확히 말하면 아직 브라우저들이 CSS3를 지원하지 않기 때문에) 부득이 표현을 위한 span 엘리먼트가 사용 되었습니다. IE 6~8, Firefox 3, Safari 3, Opera 9, Chrome 1 브라우저에서의 호환성이 확보되어 있습니다.

[ 예제를 새창으로 보기 | CSS 보기 | Image 보기 White, Black, Green, Blue, Red ]

버튼의 목적을 명확하게 판단한 뒤 알맞는 엘리먼트를 사용하는 것은 접근성을 향상시켜 줍니다. 최근에는 Javascript를 지원하지 않는 브라우저 환경이 드물지만 되도록 Javascript에만 의존하여 기능을 수행하지 않도록 하는 것이 좋습니다. 특히 Link Button을 이용하여 Form을 전송하는 기능을 구현하면 Javascript를 지원하지 않는 환경에서의 상호 운용성을 확보하지 못하고 화면낭독기 장치를 이용하는 사람들의 접근성을 떨어 뜨리게 됩니다. Form 페이지의 전송 버튼을 ‘submit’ 버튼 대신 ‘a’  버튼으로 마크업 하는 경우 화면 낭독기는 HTML기반으로 내용을 읽어 주기 때문에 이것을 ‘~링크’라고 읽어 주고 시각장애인은 이것을 ‘~전송 버튼’이라고 확신할 수 없는 문제가 발생 합니다.

제시된 예제는 다국어 환경의 웹 서비스에 적합하도록 텍스트 기반으로 디자인 되었으며 텍스트의 양에 따라 버튼의 너비가 가변적으로 변합니다. 색상별로 하나의 버튼 이미지를 이용하여 다양한 너비와 높이에 대응할 수 있도록 설계되어 있습니다. 이 버튼 스타일은 곧 공개될 Zeroboard XE 게시판의 1.0.7 버전에 대한 기본 테마로 탑재될 예정 입니다. 제로보드를 사용하시는 분들께서는 기본 버튼 스타일이 마음에 들지 않으실 경우 예제를 참고하여 간단하게 다양한 스타일로의 변경이 가능하고 현재의 스타일을 이용한 재 창작도 얼마든지 가능 합니다.

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

분류: CSS,웹 디자인,웹 접근성,웹 표준 | 2008년 10월 31일, 4:11 | 정찬명 | 댓글: 137개 |
트랙백URI - http://naradesign.net/wp/2008/10/31/203/trackback/

137개의 댓글이 있습니다.

  1. 정찬명 댓글:

    제가 지금 WinXP/MAC 사파리4에서 동시에 보고 있는데 아무 문제가 없는데요? 운영체제와 정확한 버전을 한번 확인해 주시겠어요?

  2. 홍정민 댓글:

    처음으로 댓글 남겨보네요. 최근 웹접근관련으로 작업을 진행하게 되서 정말 여러모로 저에게 구세주와 같은 정보를 주셔서 감사합니다. 그럼 질문 드릴게요~~
    black이나 짙은 배경을 사용한 버튼의 경우 링크칼라가 #fff이기때문에 이미지 표시안하기 한상태에서는 텍스트자체가 보이지 않는 문제가 발생하잖아요..이를 위한 해결안은 없을까요? 요리조리 궁리해봐도 ^^ 뾰족한 방법이 전 생각나지 않네요..

  3. 정찬명 댓글:

    @홍정민
    이미지를 끄고 접근하는 경우 웹 콘텐츠를 정상적으로 이용할 수 없는 상황이 자명하기 때문에 그런 사용자 패턴은 거의 존재하지 않는 것으로 판단하고 있습니다. 만약 존재하더라도 간단하게 이미지 켬 옵션을 사용하면 되기 때문에 문제가 없다고 판단 합니다.

  4. 황미숙 댓글:

    안녕하세요~ 생산성본부 강의때 잠깐 뵙고 글남기는 건 처음입니다.
    유용한 팁 공유해 주셔서 정말 많은 도움이 되고 있습니다. 감사합니다^^
    공부 하면서 프로젝트를 한다는 게 IE 버그에 맞닥드리면 쉽지가 않네요. 에효..

    버튼이 스크롤이 있는 데이터 테이블에 들어가야 합니다. 아마도 position:relative; 속성 때문인 것 같은데요, IE에서는 테이블의 스크롤바를 아래위로 이동해도 버튼 위치가 따라 움직이지 않습니다. FF에서는 문제가 없구요.
    position:relative; 속성을 뺀 클래스를 추가하니 위치이동은 가능한 대신 버튼이 시작되는 백그라운드 이미지(left)가 안 보이구요. 패딩, 마진, 백그라운드 위치 값을 조절해도 안 되네요.
    해결 방법이 없을까요?

  5. 정찬명 댓글:

    황미숙님 안녕하세요?
    URL을 남겨주시면 시간이 될 때 한 번 확인해 보겠습니다. 설명만 들어서는 원인이나 증상을 파악하기가 어렵습니다.

  6. 김현진 댓글:

    혹시 파이어폭스는 클래스네임을 숫자 즉 .01 이런식의 클래스네임을 사용하면 작동을 안하나요?

  7. 정찬명 댓글:

    김현진님. 아이디, 클래스 이름은 원래 숫자를 첫 문자로 사용할 수 없습니다. 더불어 만약 언더바 ‘_’ 또는 하이픈 ‘-‘ 같은 특수 문자를 첫 문자로 사용하는 경우 이 문자 다음에 숫자를 사용할 수 없습니다. 즉, 숫자는 머리문자로 사용할 수 없고 언더바와 하이픈이 머리문자가 될 때 숫자와 함께 조합할 수 없습니다. 따라서 아이디 클래스 선택자 이름은 반드시 영문 대소문자 또는 언더바 또는 하이픈으로만 시작할 수 있습니다. 숫자는 오직 문자 뒤에만 붙여 쓸 수 있습니다.

  8. 희주 댓글:

    지금도 가끔 응용하여 잘 사용하고 있습니다.
    늦었지만 감사드립니다.

  9. hong! 댓글:

    이번 프로젝트 진행에서 많은 도움이 되었어요.
    고맙습니다. :)

  10. 정찬명 댓글:

    hong! 기쁘네요. ^^

  11. […] 10월에 포스팅 했던 CSS Text Button Design 으로부터 색상 변화를 제거하고 대신 아이콘 세트를 추가하여 보다 […]

  12. 터프키드 댓글:

    덕분에 잘 사용하고 있습니다
    감사합니다`

  13. 익명 댓글:

    ie6에서~ a태그로 작성후~ 빠르게(? ^^;;;) 그 버튼위를 마우스로 왔다갔다하면~~
    오른쪽 배경부분이 깜박거리는데요! 이건 혹시 해결방법 없을까요? ㅠㅠ

  14. 란설 댓글:

    악! 위에 댓글 제가 남긴건데요! 이름을 남기려는데! 걍 댓글로 올라가 버리네여..떱! ^^;

  15. 란설 댓글:

    ie6버그였군요…북치고 장구치고 혼자다하네…ㅋㅋㅋ

  16. 정찬명 댓글:

    @란설
    저는 깜빡임은 없고 모래시계만 잠깐 보이는데요. 혹시 hover 할 때 배경이미지 바꾸기 하도록 코드를 변경 하셨나봐요?

  17. 란설 댓글:

    아뇨~ 따로 배경이미지 바꾸게 하도록 변경하진 않았는데! 깜박거리면서~ 모래시계도 계속 보여요! 계속 이미지를 읽어오는것처럼!
    ie6에서 이 페이지 열어서 확인해봤는데~ button이나 input은 그런 현상이 없는데 a태그만 유독 그러네요~ ^^;
    ie6버전에 따라 또 틀린가봐여! 다행이 어드민쪽이라서 그냥 버그라서 어쩔 수 없다고 밀고 나갈려고 하는데~
    왜 클라이언트들은 ie6을 쓰는건지…에휴…ㅋㅋㅋ

  18. 정찬명 댓글:

    @란설
    저는 이런건 버그 축에도 안끼워 줍니다. ㅎㅎ (어쩔 수 없다에 한 표요!)

  19. 김현미 댓글:

    제가 여기 css로 버튼에 적용했는데요.
    display:-moz-inline-stack; display:inline-block; text-decoration:none

    이 부분 때문인지
    ie8.0은 텍스트 양쪽끝의 여백이 잘 나오는데 ie7.0에서는 버튼에서 텍스트를 넣었을때
    글자 양쪽끝의 여백이 조금 더 넓게 나오더라구요.
    버튼의 갯수가 많아서 여백을 줄여야하는데 어떻게 하나요??
    나라디자인 파일을 ie7.0에서 열었을때는 똑같이 나오는데 -.-;;

  20. 김현미 댓글:

    덧글 수정 삭제 안되네요 ㅜ.ㅜ 두개가 올라가졌네용 이론~

  21. 정찬명 댓글:

    @김현미
    혹시 overflow:visible 속성을 지우신건 아닌지요? overflow:visible 속성을 지우면 말씀하신 것과 동일한 현상이 발생하거든요. 여기서 overflow:visible 속성은 꼭 필요한 속성은 아니지만 IE에서 문자열 길이에 비례하여 버튼의 좌우 너비가 커지는 문제를 해결하기 위하여 필요합니다. 이 문제가 아니라면 URL을 남겨주세요. 확인해 보겠습니다.

    P.S. 댓글 수정 삭제를 하려면 비밀번호 입력을 받아야 하는데요. 대부분의 분들이 수정 삭제는 사용하지 않는 기능이라서 빠져 있답니다. 수정 삭제는 제가 수동으로 해드릴께요. ^^

  22. 이시혜 댓글:

    css 초보 인데,
    버튼을 이미지로 쓰다가, 이건 아닌거 같아서 ^^;;
    구글링 해서 찾아오게 됐어요!

    정말 많은 도움이 되었습니다. 감사합니다! ^^

  23. 정찬명 댓글:

    @이시혜
    도움이 되셨다니 기쁘네요. 더 나아가 최근에는 CSS3 만으로도 이런 버튼을 만들 수 있답니다. ^^
    http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
    http://webdesignledger.com/tutorials/12-excellent-css3-button-and-menu-techniques

  24. 이래영 댓글:

    항상 좋은자료 감사합니다~
    그런데 html에서는 이상없이 잘 표현이 되는데요^^
    서버에서 돌리게 되면 버튼앞에 스크롤하나정도의 여백이 생기네요..
    overflow:visible; 속성을 지우면 괜찮아지고..
    원인이 무엇인지 알수가 없어요 ㅜㅜ
    그대로 쓰는게 맞는거 같은데..
    답변주시면 정말 감사하겠습니다~~

  25. 정찬명 댓글:

    @이래영
    이상 현상이 발생하는 페이지의 URL을 공유해 주시면 한번 확인해 보겠습니다.

  26. 익명 댓글:

    좋은 내용 감사 합니다~~

  27. 익명 댓글:

    버튼의 오른쪽 부분이 나타나지를 않는데..

    background-position:right

    이옵션이 적용이 안되는 것 같은데 firefox의 firebug로 보기에는 css가 적용이 되어있습니다.
    뭘 어떻게 해야될지 난감하네요.
    혹시 제가 확인해봐야할 것들이 있을까요?

  28. 정찬명 댓글:

    @익명
    URL을 적어놓으시면 한번 볼께요.

  29. chan 댓글:

    회사 내부에서 사용할 거라서 url을 드리기가 좀 힘듭니다.
    css 는 btn.css 기본에 약간의 위치/높이 수정만 했습니다.

    .btn.small { background-position:left -106px;}
    .btn.small * { padding:0 6px 0 2px; font-size:11px; background-position:right -160px;}

    확인

    css에 정의 되어 있는 위 두개 중에 아래의 background-position:right 가
    적용이 되지를 않습니다.
    아스테리스크 아래 것을 지우고 위에 넣으면 버튼 left 부분이 안나오구요.

    .btn.small *{ background-position:left -106px;}
    .btn.small { padding:0 6px 0 2px; font-size:11px; background-position:right -160px;}

    몇일 계속 붙잡고 있는데 이미지 버튼으로 가야하는 건지 괜히 고생하고 있는거 같습니다.

  30. 정찬명 댓글:

    @chan
    이렇게만 적어 놓으시면 제가 재현을 하거나 알 방법이 없습니다. 실제 렌더링 되는 페이지가 있어야 개발자 도구를 이용해서 확인해 볼 수 있어요.

  31. 익명 댓글:

    ㅈㅈㅈ

  32. 마약 댓글:

    간만에 글 한번 쭉~ 훑고 있습니다 ㅋㅋ
    조소님의 댓글은 다시봐도 지나치게 독설적이었네요. 굳이 저렇게 표현을 할 필요가 있나 싶습니다. 물론 어느정도 맞는 얘기긴 하지만서도, 그것이 100% 정답은 아닌데 진리인듯 댓글을 달아주셨더군요;;;
    확실하냐고 한마디 묻고 싶어졌습니다 ㅎㅎㅎ
    뭐, 이미 지나간 얘기지만서도 ^^;
    아무튼 이런 저런 시도 자체가 무조건 유익하다고 봅니다.
    때로는 조금 무익한 시도가 있을수도 있지만, 그것이 없다면 어찌 발전이 있겠습니까…
    새로운 시도나 의심이 없는 정신은 발전이 없다고 봅니다.
    그런 의미에서 저는 찬명님의 노력에 박수를 보내드리고 싶어요~

  33. 정찬명 댓글:

    @마약
    덕분에 옛날 추억 되새기며 한 번 웃고 가네요. ㅎㅎ

  34. 익명 댓글:

    감사합니다 ㅎㅎ

  35. 익명 댓글:

    alert(“약함”);

댓글 쓰기

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

필수 아님

필수 아님