CSS Text Button Design.
웹 페이지에서 사용되는 Button은 그 목적에 따라 명확하게 3가지로 구분할 수 있으며 HTML 마크업은 각각 다릅니다. 자원을 참조하기 위한 a 엘리먼트, 인터페이스 조작을 위한 button 엘리먼트, 서식 전송을 위한 input 엘리먼트가 바로 그것입니다.
- a : URI를 ‘연결‘하기 위한 버튼으로서
<a href="#uri">형식으로 마크업 합니다. - button : URI를 연결하지 않고 단순하게 사용자 인터페이스만를 ‘조작‘하기 위한 버튼으로서
<button type="button">엘리먼트로 마크업 합니다. type을 명시하지 않으면 어떤 브라우저는 Form Submit 기능을 실행하기 때문에 반드시 type 속성을 button으로 지정해 주어야 합니다. - input : 사용자의 입력을 서버로 ‘전송‘하기 위한 버튼으로서
<input type="submit">, <button type="submit">엘리먼트로 마크업 합니다.
아래 준비된 예제는 버튼의 ‘목적‘과 ‘형태‘에 따라 다양한 HTML Markup 과 CSS 표현이 있음을 보여주고 있습니다. 텍스트 기반의 가변폭 버튼 표현은 좌우 2개의 이미지가 배치되어야 하는데 현재 활성 버전의 CSS 2.x에서는 Multiple Background Images와 같은 문법을 지원하지 않기 때문에(정확히 말하면 아직 브라우저들이 CSS3를 지원하지 않기 때문에) 부득이 표현을 위한 span 엘리먼트가 사용 되었습니다. IE 5.5~7, Firefox 2~3, Safari 3.x, Opera 9.x, Chrome Beta 브라우저에서의 호환성이 확보되어 있습니다.
[ 예제를 새창으로 보기 | CSS 보기 | Image 보기 White, Black, Green, Blue, Red ]
버튼의 목적을 명확하게 판단한 뒤 알맞는 엘리먼트를 사용하는 것은 접근성을 향상시켜 줍니다. 최근에는 Javascript를 지원하지 않는 브라우저 환경이 드물지만 되도록 Javascript에만 의존하여 기능을 수행하지 않도록 하는 것이 좋습니다. 특히 Link Button을 이용하여 Form을 전송하는 기능을 구현하면 Javascript를 지원하지 않는 환경에서의 상호 운용성을 확보하지 못하고 화면낭독기 장치를 이용하는 사람들의 접근성을 떨어 뜨리게 됩니다. Form 페이지의 전송 버튼을 ’submit’ 버튼 대신 ‘a’ 버튼으로 마크업 하는 경우 화면 낭독기는 HTML기반으로 내용을 읽어 주기 때문에 이것을 ‘~링크’라고 읽어 주고 시각장애인은 이것을 ‘~전송 버튼’이라고 확신할 수 없는 문제가 발생 합니다.
제시된 예제는 다국어 환경의 웹 서비스에 적합하도록 텍스트 기반으로 디자인 되었으며 텍스트의 양에 따라 버튼의 너비가 가변적으로 변합니다. 색상별로 하나의 버튼 이미지를 이용하여 다양한 너비와 높이에 대응할 수 있도록 설계되어 있습니다. 이 버튼 스타일은 곧 공개될 Zeroboard XE 게시판의 1.0.7 버전에 대한 기본 테마로 탑재될 예정 입니다. 제로보드를 사용하시는 분들께서는 기본 버튼 스타일이 마음에 들지 않으실 경우 예제를 참고하여 간단하게 다양한 스타일로의 변경이 가능하고 현재의 스타일을 이용한 재 창작도 얼마든지 가능 합니다.
태그를 입력했더니 글이 이상해 졌네요. 보시면 윗글 이글 지워주세요. 아침부터 죄송.
어떤 엘리먼트를 말씀하시는지요?
[input type="image"] 를 문의드린것였습니다. 디자인할때 button type 보다 image type 을 선호하는것 같아서 별 문제는 없는지, 차이점은 무엇인지 문의드린 것이었습니다.
네, 전혀 문제 없습니다. 화면낭독기가 ‘이미지 버튼’ 이라고 읽어 주는데요. 시각장애인들은 학습에 의해서 이것이 서식 전송 버튼이라는 것을 알게 됩니다.
CSS만으로 이렇게 훌륭한 버튼이 된다니 놀랍습니다. ^^
좋은 정보 감사합니다.
정찬명의 생각…
CSS Text Button Design…
사용자 인터페이스만을 조작하기위한
[code]버튼[/code]
태그는 주로 어떤 용도에 쓰이며, 구체적으로 설명을 해주시면 감사하겠습니다.
사용자 인터페이스를 조작하기 위한 대표적인 예가 바로 ‘닫기’ 버튼 입니다. 보통 레이어 또는 현재의 창을 닫을 때 사용하지요. ‘닫기’ 버튼의 경우는 URI를 참조하는 것도 아니고 그렇다고 해서 Form을 Submit 하는 목적도 아닌 그야말로 ‘사용자 인터페이스를만을 조작’하기 위한 버튼으로써 button 엘리먼트를 사용하는 것이 가장 적절하다고 보고 있습니다.
<button type="button">엘리먼트는 CSS/Javascript의 도움 없이는 아마도 혼자서 할 수 있는 일이 거의 없을껍니다. 버튼의 의미와 목적을 생각해 볼 때 a 도 아니고 input 도 아니라면 그러한 경우는 대부분 button 엘리먼트의 사용이 적합하다고 판단해도 좋을 것 같습니다.button 엘리먼트는 시작과 끝 태그가 존재하고 text 또는 img 엘리먼트와 같은 인라인 콘텐츠를 자식으로 품을 수 있어서 풍부한(?) 표현이 가능하지만 실제로 img 엘리먼트를 자식으로 포함시키게 되면 브라우저 호환작업(특히 제거되지 않는 padding)을 유지하기가 까다롭습니다. 따라서 제 경험상 button 엘리먼트를 사용하더라도 자식요소로 img를 두는 경우는 거의 없고 이미지는 대게 배경처리 합니다.
한국어로 번역된 button 엘리먼트에 대한 스펙이 여기 있습니다. ^^
http://trio.co.kr/webrefer/html/interact/forms.html#edef-BUTTON
감사합니다.
이 댓글을 보시는 분들에게 덤으로 엘리먼트가 부모일 때 사용하지 말아야할 태그가 궁금하다면 아래의 링크를 클릭하시면 도움이 되실 듯^^
http://trio.co.kr/webrefer/xhtml/overview.html#prohibitions
훌륭합니다~ ^^;
안녕하세요,, 글들이 정말 많은 도움이 되고 있습니다.ㅎㅎ
근데 읽다보니 질문이 생겨서요,,
얕은 지식으로 부족한 게 많아서 이해를 잘 못 햇을 수도 있는데요,,
만약 form 전송 형식이면,, 요렇게 써야하는 상황이자나요,,
근데 이미지가 아닌 텍스트 형식으로 button을 만들고 싶다면 어떡해 해야하는지요??
전 거의 [a] 링크로 처리햇거든요,,
알려주심 감사하겠습니다~~^^
Form 전송 버튼을 온전한 텍스트로 출력되도록 만드는 방법은 다음과 같은 2가지가 있습니다.
[button type="submit"]TEXT[/button]
[input type="submit" value="TEXT" /]
이렇게 마크업 하시면 텍스트 형태의 버튼이 되는데요. 모든 브라우저에서 이런경우 배경색과 보더를 출력하기 때문에 이것을 제거하기를 원하시면 CSS를 이용해서 다음과 같이 처리할 수 있습니다.
#XXX { background:none; border:0; }
이렇게 되면 온전히 텍스트만 남습니다. ^^;
저장소에 뭔가 올라왔더 싶었는데 깔끔히 정리된 새로운 테마였군요. :)
저도 예전에 a, button 태그로 버튼을 꾸미는데 고민을 해보고, 구현도 해보았었는데 정찬명님의 코드는 다양한 고려도 되어있어 정말 멋지네요. =_=b
표준 마크업, CSS와 그에 근거한 테크닉에 관심이 많아 좋은 정보들을 잘 얻어가고 있습니다.
얻어 온 걸 써먹어야 하는데.. 제 사이트 마크업부터 하나씩 고쳐봐야겠네요. :)
오오,, 감사합니다~^^
항상 고민 했었는데,, 깔끔하게 해결 되었습니다~
감사합니다~
BNU님 오셨군요 ^^; 격려 감사합니다! 앞으로도 열심히 올려볼께요. ㅎㅎ.
역시 발전되는 XE의 모습을 보는거같아서 좋습니다.
그나저나 횽님~ 퇴근후 메일 던져주고 가묜 ㅜㅜ 근데 커밋이 다 안된거 같은데..
이런이런 배경은 언제 바껐어여 배껴가야겠군..
월요일날 아침에 서프라이즈 해주려고 했는데 벌써 본거야? ㅋㅋ. 형 지금 필립병원에서 건강검진 재검 받고 있거든. 곧 사무실 가서 제대로 커밋 되었는지 확인 해볼께. 그리고 그 페이지 완전히 끝난 페이지 아니야. 하다가 말았어. ㅎㅎ.
확인 해봤는데 커밋 다 되었더라. 좋은 주말 되고 화요일날 보자! ^^
안녕하세요.
예전부터 RSS등록하고 포스팅되는글 구독하고 있습니다.
오늘 세미나에서 발표하시는 것도 잘봤습니다.
항상 유익한글 감사합니다.
저도 inline-block를 사용해서 버튼을 만들어 사용하는데 FF2의 미지원을 알고 있지만 그냥 넘어간건 좀 반성해야겠네요;
ie6 이하에서는 앵커태그셋 깜빡임 버그가 그대로 노출되어 있습니다. (해당 버그 expression이나 js가 필요할꺼 같습니다.)
inline-block이 FF3부터 지원되어 하위버전을 위한 비표준속성을 사용하셔서 밸리데이션을 통과하지 못하는데 좀 아쉽네요;;
한성훈님, 반갑습니다. 어제는 IE8에서 문제가 없을꺼라고 말씀드렸는데 이게 사실과 다르더라구요. ㅜㅜ; IE8에서 문제가 있는것 같아서 빠른 시일 내에 이걸 좀 해결해야 할 것 같습니다. 현재 추측하건데 FF2 Hack과 관련이 있을 것 같습니다. 그리고 IE6 에서 a 버튼일 때 발생하는 깜빡임이나 CSS Hack 사용 문제는 같이 한번 해결해 봤으면 좋겠습니다. 저는 CSS Hack 같은 경우는 되도록 사용하지 않는다는 원칙을 가지고 있으나 유효성 검사 결과에 큰 의미를 두지는 않고 있습니다. 브라우저마다 다르게 렌더링하는 특징을 극복하기 위하여 어쩔 수 없이 사용하게 되는 경우가 존재하기 때문이라고 생각합니다. 물론 누군가 이것을 극복하는 방법을 조언해 주신다면 그 방식에 따를 것입니다. ^^; 감사합니다.
멋진 작품입니다. ^^
세미나때 졸다가 … 소스보고 역시 훌륭하신 분이라는 생각을 하게 되었습니다. ㅋ
특히 “이것 맞추는데 미치는 줄 알았습니다.” 는 이렇게 훌륭하신 분도 그런 느낌을
가지는구나! 를 평범한 저희들에게 위안을 주는 멘트였습니다.
주변에 있던 세미나 참석자들의 반응을 살짝 전해드리자면..
찬명님의 헤어스타일도 멋지다고 한 마디들 하셨습니다. 저두 한표 !
건강도 챙기면서 기술연구 하십시요 ~~ 화이팅 !!
차영신님, 안녕하세요? 제가 너무 지루하게 발표해서 그만 졸리셨군요. ㅎㅎ. 저 훌륭과는 거리가 먼 평범한 사람인데 과찬해 주시니 몸둘바를 모르겠고 이거 참 ㅜㅜ; 와서 아는척이라도 해주셨으면 좋았을텐데요. 그렇지 않아도 세미나장에서 저분 어디서 봤더라.. 하면서 지나갔는데 그분이 아마 차영신님이 아니셨을까 지금 생각해 보니 그런 생각이 드네요. 아카데미정글 강사소개 페이지에서 사진을 본 적이 있거든요. 다음에는 꼭 인사 나누었으면 좋겠습니다. ^^; 좋은 하루 되세요.
안녕하십니까. 11월3일 세미나에 발표 잘들었습다.
오랜만에 뵈니 매우 스타일리쉬 해지셨더군요..
안녕하세요.
제가 이번 프로젝트에 버튼스타일을 모두 button 엘리먼트를 사용했습니다.
스트링수에 따라 버튼크기가 가변적이다 보니 button안에 a태그를 써서 좌우
백그라운드 이미지에다,아이콘 이미지를 자식으로 넣는바람에 말씀하신 브라우저간 padding차이때문에 골치 꽤 썩었습니다.
버튼마다 아이콘이 들어가는것도 정말이지 못할짓이었구요;;
이 포스트보고 억울해서 한마디 남기고갑니다. ㅠㅠ
으악~ Na!님. 역시 오셨었군요. 인사도 못했네요. ㅎㅎ. 감사합니다. ^^
김주원님, 제가 작성한 코드도 아직 완벽하지는 않습니다. 현재 IE8에서 문제가 있다는 이야기를 들었구요. FF2 에서도 상황에 따라 1px씩 어긋나는 모습도 발견되고 있습니다. 제 코드도 한번 사용해 봐주시고 문제점은 같이 극복해 봤으면 좋겠습니다. 도와주세요. ㅎㅎ.
바쁘신 가운데도 저희 세미나에 좋은 발표해 주셔서 감사합니다.
찬명님 앞으로도 지금처럼 좋은 방법을 개발자들을 위해 많이 알려 주시기 바랍니다.
감사합니다
^^ 좋은정보 감사합니다. 앞으로 많이 배우겠습니다.
삐돌이님, 되려 제가 영광이죠. ^^; 훌륭한 자리 마련해 주셔서 감사합니다.
한수진님, 저도 좀 알려주세요. ㅎㅎㅎ.
링크와 버튼 submit의 명확한 정리 감사합니다.^^
찬명님의 블로그는 너무 잘 정리가 잘 되어있어서 참고서같다는 생각이 들어요
종종 들어와서 많이 공부해 갑니다.
나중에 한국가서 서현 순대 집에서 쇠주한잔하시죠~
항상 블로그로만 뵈었는데
세미나가서 얼굴을 뵈니..
남다른 센스가 있으신분..,흣,
세미나 잘 듣고,,역시..란 생각이 들수 밖에 없는.
항상 유용한 정보 감사드려요~
꿈트리님, 그 순대집 지겹지도 않아요? ㅋㅋㅋ. 다른 더 좋은곳을 물색해 봐요 우리!
강짱님, 감사합니다. ㅜㅜ; 제 생전에 ‘남다른 센스가 있다’ 같은 훌륭은 칭찬은 처음이 아닌가 싶습니다. ㅎㅎㅎ. 오늘도 좋은 하루 되세요!
버튼 앨리먼트가 ie와 ff가 다르게 인식되던데 왜그런지 모르겠습니다.
button {widht:13px; height:11px; padding:0; margin:0; line-height:0; font-size:0;}
button img {width:13px; height:11px;}
이런형태로 되어있는데
ie에서는 어긋나지 않고 잘나오는데
ff에서는 좌,우측에 3px의 공백이 생기네요 (width가 그래서 margin-left:-3px; 로 해결보긴 했는데…)도데체 왜그런건지를 모르겠어 혹시 아실까 하고 글 남겨봅니다.
한준호님 안녕하세요? 제거되지 않는 그 여백은 Firefox의 버그라고 판단됩니다. 저 또한 그 버그 때문에 button 엘리먼트 안쪽에 img 엘리먼트를 넣는 것을 피하고 이미지를 배경으로 처리하고 있습니다. 텍스트 버튼이 아닌 이미지 버튼의 경우 저는 아래와 같이 일종의 IR(Image Replacement)기법으로 마크업 하고 있습니다.
CSS
button { border:0; padding:0; width:13px; height:11px; background:transparent url(example.gif) no-repeat; }button span { position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; }
HTML
<button type="button"><span>ALT TEXT</span></button>버튼의 크기와 종류가 많아질 때 CSS 코드의 작성량이 조금 늘어나는 점이 살짝 아쉬운점인데 HTML코드는 간결해져서 좋더군요. ^^
글쿤요,,ff의 버그군여,
여기서 항상 좋은정보 많이 얻어가는데 답변도 감사합니다.
저는 ie에서 버튼클릭되는 모션이 좋아 img테그를 사용하는데요..
button img {margin:-3px 0 0 -3px; *margin:0;}
이런식으로 핵을 쓰니 똑같이 나오긴 하네요..
(공백도 좌우에만 있는게 아니라 상하좌우로 3px씩 생기는거드라구요..)
아무튼 감사합니다^^
아, 그런 방법을 사용하셨군요. 그런데 Opera, Safari, Crome 브라우저에서도 음수 마진이 작용하게 되면 아무 문제가 없을까요? 제가 사용해 보지 않은 방법이라 잘 모르겠지만 한번 확인해 보시면 좋을것 같습니다. ^^ 좋은 주말 되세요!
영양가 없는 버튼들 입니다.
잡기술로 웹표준의 의미를 퇴색시켜서는 안된다고 생각합니다.
버튼과 탭버튼은 여건이 허락한다면(뽀샵이 가능하다면) 이미지로 제작 하는 것이 가장 효과적 입니다. 일부 코더들이 확장성과 웹표준을 애기하면서 코드로만 버튼과 탭을 만드는 경우가 있는데 그 소스의 복잡성이란 조잡스럽기 까지 하더군요.
소스는 언제나 단순해야 하며, 명확히 인지되어야 하고, 쉽게 논리적으로 제작되어야합니다.
이미지 버튼은 코드작성이 쉽고, 편하며, 명확함과 동시에 디자인까지 훌륭합니다.
이미지 버튼을 사용하면 될 것을 마치 코드로 조작해야 코딩의 고수이고 웹표준을 준수하는 것같은 인식을 주어서는 안됩니다.
웹표준에 의미에서 가장 효과적인 탭과 버튼은 이미지로 제작하는 것입니다.
남이 열심히 나름대로 고민해서 만든 결과를 그런 식으로 생각하는 당신은 그런 말을 할 자격이 없습니다. 같은 뜻을 전달하더라도, 고생과 수고는 했으나 보다 더 좋은 방법이 있다는 식으로 소개한다는 댓글이면 모르되, 위와 같은 식의 상대방의 노고를 무시하는 태도는 결코 올바른 모습이 아니라고 생각합니다.
‘영영가 없는 버튼’이라고 하셨지요. 굳이 텍스트만으로 억지로 구현하려는 건 문제가 될 수도 있습니다. 대개는 이미지로 버튼을 만드는 게 효율적이고 코드도 깔끔한 건 사실입니다. 그러나 조소 당신의 태도는 그런 말을 하기 이전에 전달 방법이 틀렸습니다. ‘영양가 없는 댓글’이라는 얘기입니다. 그냥 넘어가려고 했으나 여태 당신의 태도를 보면 일침을 놓지 않고는 안 되겠다는 생각이 들었습니다.
평소에도 그렇게 같이 일을 하는 사람들을 폄하하며 바라보고 있는지요? 모두가 같이 더 좋은 방향으로 나아가기 위해서 격려하고 나아가야지, 그런 식으로 남의 고생을 뭉개는 식으로 대답을 해서는 안 됩니다. 당신이 저 입장이라면 과연 그런 소리를 듣고 기분이 좋겠습니까? 위에서 저도 똑같은 식으로 대하니 기분이 어떤가요?
개인적으로 웹 표준, 웹 접근성을 둘러싼 이 문화의 발전을 저해하는 부류가 당신같은 사람이라고 생각하고 있습니다. 어설프게 웹 표준을 부르짖는 사람도 문제지만, 남이 그래도 열심히 해서 내놓은 결과물을 무시하고 비웃는 태도는 개발자의 의욕을 꺾고 회의감을 들게 만듭니다.
당신은 다른 개발자들을 위해 어떤 노력을 하였나요? 자신의 노력을 공개하신 적이 있습니까?
“어떠카면 코드로 모든걸 해결할 수 있을까”를 고민 하는 것보다
“어떠카면 코드를 단순하게하고 한줄이라도 줄일 수 있을까”를 고민하는 것이 바람직합니다.
댓글 달릴거 보면 아주 과관입니다. 특정 브라자의 버그라느니, CSS 핵을 이용했다느니…
CSS 핵을 이용할 꺼면 머하러 웹표준을 한답니까.
CSS 탭이나 버튼의 확장성은 인정하지만, 그 확장성 역시도 개발자를 위한 것이지, 사용자를 위한 것은 아닙니다.
웹표준, 웹접근성은 개발자들를 위함이 아니라, 모든 사용자를 위함이 그 목적이 있습니다.
이미지 버튼이야 말로 모든 브라우저의 공통뷰를 제공하는 완전 웹표준인 것입니다.
잡소스, 핵 짜집기 등으로 소스버튼 만들어서 미화시키지 말았으면 합니다.
조소님, 이미지를 사용하는것이 더 좋다는 것에 일단은 동의 합니다. 하지만 그것은 어디까지나 상황에 따라서라고 생각하구요. 텍스트 기반의 버튼도 필요할 때가 있지요. 그런데 이것을 가지고 잡기술로 웹 표준의 의미를 퇴색시켜서는 안된다고까지 말씀하시는데 텍스트 스타일의 버튼을 만들면 웹 표준의 의미가 퇴색되는 것이 정말인가요? 의미 없는 span 엘리먼트 하나 들어갔다고 해서요? 글쎄요.
의미 없는 엘리먼트를 되도록 사용하지 않는것이 좋겠지만 이것은 어디까지나 현존하는 웹 표준 스펙의 한계를 표준의 범위 내에서 뛰어넘어 보려는 안타까운 시도라고 생각해 주실 수는 없을까요? multiple background 같은 스펙은 일찌감치 표준이 되었으면 좋겠으나 현재 지원하지 않기 때문에 의미없는 엘리먼트가 추가된 것일 뿐입니다. 시멘틱하다고는 볼 수 없겠지만 문법적으로 틀린 것도 아니며 웹 표준의 의미를 퇴색시킨다는 주장은 지나친 독설이라고 생각되네요.
그리고 CSS Hack 사용에 대하여 저도 처음에는 매우 강경하게 사용하지 않아야 한다는 주장을 펼친적도 있었지만 지금은 그렇지 않습니다. CSS Hack이 아니고서는 도저히 해결할 수 없는 문제들도 수두룩 하니까요.
현실적으로 ‘상호 운용성’이나 ‘웹 접근성’을 향상시키기 위하여라면 ‘표준’은 언제든 ‘타협의 대상’이 될 수 있다고 생각합니다. 웹 표준이 현실세계의 흐름이나 요구를 적절하게 반영해주지 못한 때 언제든 그럴 수 있습니다. 왜냐하면 표준은 어디까지나 ‘수단’이기 때문입니다.
버튼안에 있는 텍스트를 고정픽셀로 해서 버튼사이즈에따라 클래스를 다르게 주셨네요~
비슷한모양의 CSS 버튼인데 저랑 스타일이 달라서~ 새롭게 배워갑니다 ~^^;
저같은경우는 텍스트를 고정픽셀로 두지않고, 브라우져 텍스트크기나 상위 엘리먼트의 폰트사이즈에 따라 유동적으로 표현되게 했는데..
단점이 ’span’ 같은 쓸데없는 엘리먼트를 추가시켜줘야한다는 단점이 있는데요..ㅠㅠ
찬명님의 방식을보니 이것도 좋은방법인거같아요~
코딩할때 부득이 쓸데없는 엘리먼트를 추가시켜줘야할때가 있는데
영찝찝하네요,,, 찬명님은 어떻게 생각하시는지요 ?^^
상황에 따라서 다르긴 합니다.
많은 카테고리와 대량의 컨텐츠 웹페이지를 보유하고 웹사이트 제작 시에는
확장성을 확보할 수 있는 코드형 탭과 버튼 제작이 더 효과적일 수 있습니다.
제가 애기 하고 싶은 부분은 코드형 탭과 버튼이 웹표준 시대에 꼭 추구해야할 스킬은 아니라는 것을 애기하고 싶습니다.
핵을 쓰는 것은 완벽한 크로스브라우징을 위해 사용 될 수 있겠으나,
웹표준의 의미를 퇴색시킨다는 생각은 틀리지 않타고 생각합니다.
개인적으로는 핵을 사용하지도 않치만, 사용되어지지도 말아야 한다고 생각합니다.
제가 핵 사용자의 상황이 아니라서 인지는 모르겠지만, 핵없이도 웹페이지 구현이 가능하다고 생각합니다. 멀티빽그라운드는 저 역시도 소망하는 부분이지만…
쫌 오래 기다려야 할 듯 생각됩니다.
조소님의 소스는 언제나 단순해야 하며, 명확히 인지되어야 하고, 쉽게 논리적으로 제작되어야한다는 의견에는 찬성하지만 실무와 겹쳐지게되면 이렇게할수밖에 없는상황이 많네요~
제가 근2년간 다국어페이지 작업을 디자인과 함께 해왔는데~
CSS Text Button 을 알기전에는 코드는 명확하게 할수는있지만
각언어별, 상황에 따른 버튼을 일일이 제작하기가 쉬운게 아니였죠~ ^^;;
버튼하나 수정할일 생기면 죽어났습니다~
근데 이방법을 알고나서는 작업속도도 배로 빨라지게되고~
수정,변경도 편리하게 되서 기획부분에 마찰도 많이 줄었구요~
웹표준도 좋지만 정해진 한도내에서는 최대한 활용하고 실무에 적합하게 타협해야 하는거같습니다~
표현을 위한 엘리먼트를 포함시키는 것은 표현의 확장 가능성을 높여주기 때문에 ‘잘못된’ 방식이라고 쉽게 단언할 수는 없을 것 같습니다. 단, 그 정도의 차이가 있을텐데 지나치게 엘리먼트에 의존하는 것은 피해야 겠지요. 찝찝하게 생각되시는 부분은 지나치게 완벽한(시멘틱한) 코드의 작성을 염두해 두셨기 때문일텐데 그런 욕심은 적당한 정도로 유지하는 것이 정신건강에 좋다고 생각합니다. ^^;
음;; 조소님의 글은 그냥 보고 못지나겠네요 왜일까요. 다른 글들도 그렇고..
전 디자이너가 아닌 웹디자이너라서 이 글이 아닌 다른 글들의 글을 읽으면서 뭐랄까요 위화감 같은게 느껴집니다. 디자인과 코딩 너무 한쪽으로 치우치지 말라는 의도로 글 작성하신 것 이해 할 순 있지만요.
포탈 사이트 작업을 하지는 않지만 웹코드 한줄 줄이는 것과 동일선에서 이미지 최적화에 대해서도 고민합니다. 어찌보면 코드 한 줄 보다 불러오는 속도를 많이 잡아먹을 수 있는 조각난 이미지들이 많으니까요. 이미지 조각이 많을 수록 코드도 길어지겠지만요. 위 버튼은 버튼별로 여러개 이미지 생성하는 것 외에도 속도면에서도 이미지1개로 처리할 수 있으니 좋은 영향을 줄 수 있을 것 같은데 말이죠. 버튼 롤오버로 생각해도 그렇고.. (아무리 빠른 초고속 인터넷 시대라지만 게시판 버튼들이 일찍 다 안뜨는 경우는 아직도 있습죠)
일본 여행하면서 음료 펫트병 디자인의 섬세함에 새삼 감탄한 적이 있습니다. 우리나라 17차 같은 류의 음료 였는데 여성들 가방속에 잘 들어가게 지원한 직사각형의 슬림한 형태, 그리고 중간에는 그립감이 좋게 원으로 약간 오목하게 파인 부분이 있었습니다. 그리고 라벨은 분리수거시 용이하게 절단선이 들어가 있고요. (말로 설명이 부족한 점이 있군요;;; 띵;;)
웹디자인도 마찬가지라고 봅니다. 눈으로 보이는것이 전부가 아닌 것이니까요.
html도 하나의 캔버스요, css는 물감이 될 수 있는 것 처럼요.
웹 세상이 굳이 이미지가 아니더라고 좀 더 아름다게 꾸미기 좋은 세상이 되길 바랍니다 :)
미희님이 언급하신 일본의 음료 펫트병 디자인 사례, 인간을 향한 세심한 배려.
그것이 웹표준 정신에 가장 가깝다고 생각합니다.
크로스브라우져에 집착한 나머지 웹표준을 크로스브라우져의 수단으로 생각하는 코더들이 문제인 것이죠.
웹표준의 의미는 소외된 계층과 더불어서 모든 넷티즌들이 웹의 정보, 컨텐츠를 불편함이 없이 평등하게 사용 할 수 있게 함에 큰 의미가 있습니다.
이 의미는 파이어폭스와 IE가 1픽셀이라도 어긋나지 말게 하자는 의미는 아닙니다.
소외된 계층이 1픽셀 2픽셀 간격이 다른 것이 뭐가 중요하겠습니까.
중요한 것은 정보의 논리적인 구성이며, 세심하게 배려된 HTML 페이지의 설명입니다.
다시 말해서 핵, 잡소스로 크로스브라우징된 텍스트 버튼을 제작하는데 고민하는 것보다
이미지 버튼일지라도 ALT 또는 TITLE 를 이용하여 논리적이고 친절한 버튼 설명을 어떻게 할 수 있을까를 고민해야 하는 것입니다.
단순코더와 웹퍼블리셔를 구분하셔야 합니다.
웹코더들은 크로스브라우져에 집착하는 경향이 있습니다. 일단 코딩하고 안되는 부분은 웹표준의 한계라고 얘기합니다. 그리고 CSS핵 도배질을 시작하겠지요.
웹퍼블리셔는 다릅니다. 웹표준에 의거한 정제된 소스만을 사용하고, 웹표준이 아닌 것들은 과감히 버릴줄도 알아야 합니다. 그것이 웹표준을 완성하는 지름길이기 때문입니다.
웹퍼블리셔는 크로스브라우져에 집착하지 않습니다. 이 HTML 페이지가 소외된 계층이 편하고 잘 이해하면서 정보를 습득할 것인가에 대한 고민을 합니다.
코드는 가능한 단순화 하며, 최대한 순차적이며 논리적으로 HTML을 제작해야 웹퍼블리셔인 것입니다.
이렇게 버튼을 할때 마우스 오버시 텍스트 색을 다르게 할수는 없을까요? 으흠…
:hover 라는 가상선택자를 사용하면 아주 간단하게 처리할 수 있죠!
답변감사합니다. 그런데
input 버튼에 hover 를 중복해서 설정해 줄수있나요?
제가 잘 이해를 못해서 그런지…
예시를 알려주시면 감사하겠습니다…
감사합니다.
코드로 말씀드리면 아래와 같이 가능할 것 같습니다.
아래 표와 같이 마크업 했을 때
<a href=”#” class=”button”><span>TEXT</span></a><span class="button"><button type=”button”>TEXT</button></span><span class="button"><input type=”submit” value=”TEXT” /></span>CSS 코드를 아래와 같이 작성하면 됩니다.
.button:hover *,
.button:active *,
.button:focus * { color:#f00; }
단, IE6 브라우저는 a 엘리먼트가 아닌 엘리먼트에 대하여 :hover와 같은 가상선택자의 사용을 지원하고 있지 않기 때문에 IE6는 지원하지 않습니다.
이렇게 구형 브라우저가 CSS 표준을 지원하지 못하는 상황일 때 표준계열 브라우저만이라도 지원하는 것을 저는 긍정적으로 보고 있습니다. IE6 사용자라고 해서 콘텐츠에 접근할 수 없거나 차별을 받는 것이 아니기 때문입니다.
저두 오래전부터 css버튼을 사용해왔지만, 라운드 디자인은 엄두를 못내고 border 와 background 로 간단한 불릿 이미지나 배경 정도만 적용해서 사용하고 있습니다.
라운드가 가능했으면 좋겠지만, 디자인을 위해서 span 마크업을 넣는건 아니다 싶어 css3를 대부분 지원할때까지 기다리고 있습니다.
그리고, FF3, Op9.5 가 나온 뒤 예전과 달라진 렌더링과 없어진 핵을 보면서,
매번 이렇게 맞추는 것은 무의미한 것 같아서 지금은 접근성만 보장된다면
브라우저의 서식 요소 등 차이들은 별루 신경쓰지 않고 있습니다.
그래도 찬명님의 예제들은 저에게 항상 좋은 영감을 주고 있어
매번 인사는 못드리지만 항상 감사하게 생각하고 있습니다.
이번 예제에서 아쉬운 점은 링크 버튼도
서식 과 조작 버튼 처럼 span 요소가 a를 싸고 있는 형태로 통일했으면 더 좋지 않을까 생각해봅니다. 아래처럼..
TEXT
문영신님 조언 감사합니다. 조언주신 방법으로 바꾸는게 더 좋을것 같네요. 시간내서 고쳐야겠군요. ^^
조소님의 의견에 동의 합니다.
하지만 현실상 그렇지 않은거죠.
그이유는 이미 답이 나와있죠.
디자이너를 설득시키는 퍼블리셔랑 그렇지 못한 퍼블리셔 차이겠죠.
말만 표준이지 위글처럼 핵안써서 표현이 불가능한 경우도있고 사람들도 그렇고 이길순없으니깐요;
결론은 유두리있게 해야한다는거죠;
저도 간혹 못이기는 디자이너한테는 정찬명님의 코드를 잘쓰고있다죠 끌끌(__
FF2에서는 깨지더군요 ㅡ_ㅜ 어떻게 잡아서 넘겼는데 기억이;;
IE 7.0 xhtml 에서는 1픽셀정도의 차이가 나네요.
저만 그런건지…
아린님, 화면 캡쳐해서 제게 메일로 보내주실 수 있을까요? 제 브라우저에서는 발생하지 않는 문제라서 한번 확인해 보고 싶습니다. dece24앳gmail.com 으로 부탁드립니다. 감사합니다.
캐릭터셋이 utf-8 로 되어있을 때는 정상으로 출력이 되네요..ㅋ
아, 맞아요. MS IE 7 브라우저는 utf-8과 euc-kr 사이에 아시아권 문자의 줄간격이 달라지는 버그가 있고 그게 아마도 a 요소로 마크업 된 버튼에 영향을 미치는 것 같습니다. 중요한 문제 코멘트 해주셔서 감사합니다. 다른분들께서도 참조하시면 좋겠네요. ^^; 캐릭터셋이 달라진 경우 CSS를 약간 고쳐 쓰시면 될껍니다.
캐릭터셋이 euc-kr인 페이지에서는 ‘x:-moz-any-link { font : ~~’ 부분을 제거하니
정상출력이 됩니다. small 에서는 버튼 박스가 조금 안맞는것 빼고는..
이 부분을 제거하시면 Firefox 2 브라우저에서 아마 버튼이 깨질껍니다.
.selector, x:-moz-any-link { property:value; } /* Firefox 2 Fix */
.selector, x:-moz-any-link, x:default { property:value; } /* Firefox 2 Fix */
Firefox 2가 { display:inline-block } 속성을 지원하지 않기 때문에 사용된 핵 부분입니다.
참고해주세요.