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 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 페이지에 링크되어 있습니다.
태그를 입력했더니 글이 이상해 졌네요. 보시면 윗글 이글 지워주세요. 아침부터 죄송.
어떤 엘리먼트를 말씀하시는지요?
[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 } 속성을 지원하지 않기 때문에 사용된 핵 부분입니다.
참고해주세요.
display:inline-block;
*display:inline; /* ie6,7 */
*zoom:1; /* ie6,7 */
display: -moz-inline-stack; /* FF2 */
이렇게 하면 모든 브라우져에서 display:inline-block 속성을 잘 적용시키더라구요.
그리고 찬명님이 말씀해주신 대로 버튼태그를 사용해보았는데
Validation에서 경고가 뜨더라구요 태그를 제대로 쓰라고 하고 button태그가
닫히지 않았다구요…
이부분은 수정이 있지 않아야 할까 싶네요 ㅎ
항상 좋은 정보 얻어갑니다.
seye2님 안녕하세요? 코드 제안 감사합니다. 이런 제안을 내심 무척 많이 기다리고 있었습니다. ^^; 특히 FF2 확장 핵은 저도 몰랐었는데 앞으로 유용하게 사용할 것 같습니다.
한 가지 ie6,7 에 적용하신 코드는 제외해도 관계가 없는 것으로 알고 있습니다. ie6,7 이 inline-block을 표준에 따라 정확하게 지원하고 있기 때문입니다.
제가 만든 예제 페이지에서는 Validation이 유효합니다. 직접 작성하신 코드를 제가 볼 수 있을까요?
찬명님 말씀대로 오류는 나지 않습니다. FF의 부가기능인 HTML Validation체크에서는
경고가 뜨더라구요.
그래서 제가 한 방법은
확인이런식으로 span대신에 div를 넣고
inline-block을 적용시켰습니다.
그리고 말씀하신 IE6,7은 제가 확인해본 결과로는 제대로 지원하지 않았습니다.
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
여기서 확인해보시면 될거 같습니다.
빠른 답변 감사합니다~.
수고하세요.
알려주신 페이지 댓글을 통해서 IE6~7은 inline 요소에 inine-block을 적용한 것과 block 요소에 inline-block을 적용한 결과가 다르다는 것을 알았습니다. IE는 span과 같은 inline 요소에 inline-block을 적용한 경우 inline-block을 지원 하고 div와 같은 블럭 요소에 inline-block을 적용하는 경우 여전히 block과 같이 렌더링하는 버그가 있습니다.
marcoos 라는 분께서 작성하신 댓글이 정확한것 같네요.
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/#comment-188018
이분 말씀에 의하면 -moz-inline-stack 보다는 -moz-inline-box 가 더 inline-block에 가깝고 inline 요소들에 대하여 IE는 이미 inline-block을 이미 지원하고 있었다는 겁니다.
inline-block의 브라우저별 지원 여부는 아래 페이지에서도 확인할 수 있습니다.
http://www.webdevout.net/browser-support-css
감사합니다.
덕분에 저도 몰랐던 내용에 대해서 더 많이 알게된거 같습니다. ㅎㅎㅎ
찬명님이 하신것 처럼 공유하고 토론을 해야 제가 보지 못한것들에 대해서
더 많이 알게되는거 같습니다.
앞으로도 더 많은 공유 부탁드리겠습니다~.
저도 좋은 자료가 있다면 더 많은 분들에게 공유하고 이번 찬명님과의
대화와 같이 더 좋은 자료 더 좋은 방법을 찾을 수 있을거라는 믿음이 생기네요.
항상 수고해주시는것에 대해서 감사합니다.
즐거운 주말되세요~.
좋은정보 감사합니다. ie6에서 버튼 내부 위쪽 여백이 생기는건 어떻게 처리하죠?
시노통님 안녕하세요? 제가 이 예제를 오늘 새벽에 집에서 갱신했었는데요. 집에서 IE6가 다른 소프트웨어와 충돌해서 설치 불가능한 환경이라 테스트를 못한 채로 오늘 하루를 보냈습니다. 코멘트 주신 덕분에 IE6 환경을 잊지 않고 테스트 해서 현재는 브라우저 호환성 작업을 완료 했습니다. 지금 예제를 확인하시면 IE6 에서도 잘 보이실 껍니다. 또 다른 문제가 있으시면 언제든 코멘트 부탁드립니다. 감사합니다. 좋은 하루 되세요. ^^
[...] 오늘 새벽에는 새 글쓰기 욕심을 잠시 접어놓고 작년 가을에 공개했던 CSS Text Button Design. 이라는 포스트를 갱신하기로 했습니다. 정확하게 말해서 갱신한 것은 [...]
정찬명의 생각…
CSS Text Button Design. & IE6~7 : button, input. Extra padding bug….
정찬명님 빠른 답변 너무 감사합니다
일단 이미지가 영역을 벗어나는건 해결이 된듯한데요
여전이 이미지 내부 택스트링크의 valign이 하단으로 쳐지네요…한 2px정도요
ie6은 핵으로 처리해야 할까요?
늦은 시간 처리해 주시느라 고생많으셨구요 쉬엄쉬엄 하세요~
@시노통
혹시 그런 현상이 발생하는 페이지 URL이나 파일을 제게 공유해 주실 수 있을까요? 문제 원인을 좀 살펴보고 디버깅이 필요하면 코드를 갱신 하고자 합니다. 댓글 또는 메일 dece24앳gmail.com 으로 부탁 드립니다. 감사합니다.
정찬명님 굳이 제가 해당 URL을 따로 알려드릴 필요는 없을거 같구요.
위에 정찬명님께서 작업하신 버튼 샘플이 그렇게 보입니다. 물론 제가 소스를 퍼가 작업한거 역시 마찬가지구요.
버튼의 크기가 커질수록 여백또한 늘어납니다 마치 TEXT의 VALIGN=BOTTOM으로 되어 있는거 처럼 보여요. TEXT가 중앙 정열이 되야하는데 위족에 여백이 생겨 하단에 붙습니다
참고로 파폭, 익스 7.0 이상에선 정상으로 보이는데요 제컴은 현재 익스6.0 서피스팩1입니다. 왠지 저만 그런거 같은 느낌이..-.-;;
시노통님 설명 감사합니다. 아무래도 IE6의 마이너 버전차이 때문에 이런 문제가 발생하는것 같습니다. 가능하시다면 캡쳐라도 부탁드립니다. 저희 동네 미용실 PC가 아직 IE6 SP1 인것 같던데 이번주에 머리깍으러 가면서 한번 봐야겠어요. ㅎㅎㅎ.
저때문에 이발까지 ㅋ
제 pc에서 위 페이지 그대로 캡쳐한 이미지를 올려놨습니다
그새 미용실 직원이 익스를 업그레이드 하지 않았기를 바랍니다~~
http://blogfiles.naver.net/data41/2009/5/14/173/%B9%F6%B1%D7-222-idsiro.jpg
저는 버튼이 깨지는 현상인줄 알았는데 알려주신 URL을 확인해 보니 vertical-align이 3px 차이나는 거였네요. IE6~7에서 동일하게 발생하고 SP1~2 여부와 관계가 없는 현상으로 보입니다. 저도 저렇게 보였거든요. 다만 예민하지 못해서 인지하지 못했던 거였구요. 지금은 처리해 놨으니 갱신된 코드를 한번 사용해 보시죠. ^^ 감사합니다.
제가 너무 예민했던거군요 …남자인 나에게도 설마 그날(?)이…-.-;;
아무튼 정찬명님 쵝오~
어느 부분을 수정하셨는지도 알려달라고 하기엔 넘 염치없는거 같아 일단 제가 찾아보겠습니다~~ 좋은 밤 보내세요!
제가 너무 둔한거죠. ㅎㅎㅎ. 수정한 코드는 ‘*’ 스타핵과 ‘_’ 언더바핵 사용한 부분입니다. 이 버그 처리하기 전까지는 핵을 전부 뺐었는데 IE6~7 에서도 정교하게 그리드를 맞추려니 어쩔 수 없네요. ^^ 좋은 밤 되세요.
중요한건 아닌데요…
사용하신 버튼이미지 중 유독 파란색만 이미지사이즈가 25KB 일까요?
다른 색은 2-4KB인데요..
파란마음님인 중요한걸 발견해 주셨네요. ^^ 그 이미지가 다른 이미지와 달리 JPG 형태로부터 GIF 형태로 변형이 된것 같습니다. 자세히 살펴보니 색이 효율적으로 사용되어 있지 않더라구요. 그냥 볼 땐 그라디언트 처럼 보였는데 자세히 확대해서 보니 얼룩 얼룩 한거 있죠. 지금은 이미지를 수정해서 올렸습니다. 다시 확인 해보시면 4KB로 표시가 될껍니다. 이렇게 공유해 놓으니까 여러가지로 저도 도움을 받게 되네요. 감사합니다. ^^;
앞에 아이콘이 있는 버튼은 클릭이 안되는데요~
어떻게 하면 클릭이 가능할까요?
ie에서 버튼에 한글을 넣었을 때 상하 여백이 다르게 나오는데 어떻게 해결해야 되나요?
@망구
네, 저도 그 문제 때문에 고민하다가 결국 아이콘을 배경으로 처리해서 사용하고 있습니다. 이렇게 말이죠.
그런데 이렇게 사용하시려면 코드를 조금 손을 보셔야 할껍니다. 아이콘이 잘 보이긴 하지만 텍스트와 겹치게 되기 때문에 a, button, input 요소의 padding-left 를 충분히 늘려 주시기만 하면 됩니다.
버튼에 아이콘 높이 만큼의 투명한 구멍이 뚤린 이유는 그 구멍을 통해서 span에 적용된 아이콘 배경을 a, button, input 요소의 배경이 가리지 않도록 하기 위함 이구요.
@버튼
IE 브라우저가 버전별로 조금씩 다르지요. 어떤 버전의 브라우저인지 정보가 없어서 답변 드리기는 어렵지만 CSS Hack을 이용해서 한번 디버깅 해보세요.
실전 비 표준 가이드 ‘CSS Hack’.
http://naradesign.net/wp/2008/08/27/153/
네스케이프9 사용자인데요
파폭 하위버전과 동일한 렌더링인데 전찬명님의 CSS버튼 에서만 유독 버튼 왼쪽 2px 정도 이미지가 밑으로 꺼지는 현상이 있습니다. xe 텍스트 버튼도 모두 그렇구요.
네스케이프만 쓰고 네스케이프에서만 작업하다보니 슬쩍 걸려서 남겨보아요
아참! 스샷
http://chaosnet.pe.kr/temp/nc.jpg
NULI에 있는 예제들은 다 잘나오는데 xe와 위에 버튼등은 왼쪽2px정도가 죽습니다
이미지 왜안나오지 다시
http://clan.pe.kr/temp/nc.jpg
에그당님 안녕하세요? 아직 넷스케이프를 사용하시는군요. ^^;
완벽하게 지원해 드리지 못해서 일단은 죄송합니다.
2008년 3월 1일 넷스케이프의 공식적인 지원 중단 발표
2008년 6월 17일 파이어폭스 3.0 출시
이후 저와 XE 개발팀은 넷스케이프 브라우저(정확히는 파이어폭스 2.x)에 대한 지원을 묵시적으로 중단 했습니다.
모든 현존 브라우저에서 최대한 호환성을 유지하는 것이 옳지만 현실적으로 현재의 시장 점유율과 미래에 얼마나 더 유용할 것인지에 대한 가치를 고려 했을 때 지원 우선순위에서 밀리게 된 것입니다.
2009년 상반기 현재 넷스케이프 시장 점유율
* 한국 – 0.00%
* 글로벌 – 0.74%
하지만 오늘 알려주신 버그와 같은 ‘단순한 디자인의 깨짐’이 아니라 ‘콘텐츠에 대한 심각한 차별’이 발생한다면 반드시 지원할 것입니다. ‘콘텐츠에 대한 심각한 차별’ 이란 다른 브라우저에서는 가능하지만 ‘넷스케이프를 사용하기 때문에 불가능’한 일이 발생하는 상황 입니다.
넷스케이프를 완벽하게 지원하지 못하지만 완전히 포기하는 것도 아닙니다.
깨지는 현상은 넷스케이프가 파이어폭스 2.x 렌더링 엔진을 사용하기 때문인데요. 파이어폭스 2.x 버전이 inline-block 이라는 CSS 속성을 제대로 지원하지 않았기 때문 입니다. 이 문제는 직접 해결하실 수 있습니다. 파이어폭스 2.x 버전을 위한 CSS핵을 사용하시면 됩니다.
파이어폭스 2.x 버전을 위한핵은 이곳에서 찾으실 수 있습니다.
실전 비 표준 가이드 ‘CSS Hack’.
http://naradesign.net/wp/2008/08/27/153/
감사합니다.
핫 감사합니다 참고 주소를 보고 금방 해결했습니다
네스케이프쓰는건 파폭보다 빨르고 텝기능이좋아서 예전부터 쓰던건데 원시인이 되버리네용 ㅠ
많은거 보구갑니다 수ㅗ하세요
아나 글씨 수정안되네 ㅗ 오타예요 ;;
ㅈㅅㅇ ㅠ
제가 더 죄송합니다. ^^
IE7 에서는 버튼들이 1px 상하로 깨지는 현상이 아직 있는것 같습니다. ^^
위에 아린님께서 말씀하신내용이 있는거 같은데 여하튼 지금 여기선 그렇게 보이네요 켁..
궁금한게 있는데요. 이걸 가지고 롤오버 효과를 만들고 싶은데 어떻게 해야하나요?
케인님, 안녕하세요? 코멘트 감사합니다. 제가 요즈음에는 IE8 브라우저에 포함된 IE7 렌더링 엔진을 통해서 IE7 호환성 검토를 하는데 이게 아무래도 IE7 브라우저와 약간 차이가 있는것 같네요. vertical-align을 조정해서 IE7 디버깅을 해놨고 지금 IE7에서 깨지는 현상이 사라진 것을 확인 했습니다. 만약 지금도 깨져 보이신다면 다시 코멘트 주세요. 감사합니다.
나그네님, 코드를 약간 수정해서 롤 오버 했을 때 버튼 텍스트 색상을 다르게 표시하도록 해놨습니다. 일단 이런 방법이라도 도움이 되시면 좋겠구요. 만약 버튼의 이미지(배경)를 바꾸기를 원하신다면 자바스크립트를 사용하셔야 합니다. IE6 브라우저에서 span 요소에 :hover 와 같은 가상선택자를 지원하지 않기 때문입니다. 자바스크립트를 사용하신다면 span 요소에 마우스오버시 .hover 와 같은 클래스가 동적으로 삽입되도록 처리해서 span과 자식요소에 포함된 배경이미지의 위치값을 바꾸는 방식을 사용하시면 됩니다. 배경이미지 자체를 바꾸는 방식은 이미지를 다시 불러와야 하기 때문에 http 요청을 증가 시키므로 권장하지 않는 방법 입니다.
이제 깨끗하게 잘 보입니다. ^^ 항상 도움많이 받고있습니다 감사합니다
안녕하세요
이제서야 웹표준코딩에 눈을 돌린 초보입니다.
NULI나 정찬명님의 글을 자주 보는데 궁금한 점이 있어 문의드립니다.
링크된 button.css 에서 보면
*vertical-align:top; _vertical-align:middle; 와 같이
속성앞에 별표, 언더바를 붙이는 경우가 있는데 이건 뭘 의미하는지요?
댓글 삭제는 안되네요….
위에 제가 쓴 글의 답변을 찾은거 같아요..
http://naradesign.net/wp/2008/08/27/153/
Klassiker님 안녕하세요? 잘 찾으셨네요. ^^ IE7 이하 버전에서만 적용되는 속성을 선언할 때 쓰는 핵입니다!
사파리4에서는 정상적으로 이미지를 처리하지 못하는군요
움~ 무슨 문제인지..