<a href="#"><img src="경로" alt="" /></a>
이런 형태이다. 나도 회사처음 들어왔을때 내 바로 윗사람이 이렇게 쓰는것을 권고하기도 했었고 대부분의 사람들이 이런 형태로 이미지 버튼을 만들고 있는데 이건 정말 잘못된 형태의 html이다. 무엇보다 이렇게 써서 얹을 수 있는 잇점이 단 한개도 없다고 생각한다.
저렇게 허위 a태그를 거는 상황은 100% 이미지를 버튼으로, 즉 클릭용으로 사용하기 위함이다. 그래서 img에 onclick 속성을 사용하고 있다.
<a href="#"><img src="경로" alt="" onclick="clickBtn();" /></a>
이렇게 이벤트까지 추가된 형태가 일반적이다.(물론 onclick도 인라인으로 하지 않고 따로 빼는게 표현과 기능의 분리면에서 더 낫기는 하지만 이건 여기서 논할 얘기는 아니니...) IMG태그 만으로도 클릭은 되는데 굳이 이렇게 A태그를 걸어준 단하나의 이유는 다른이미지랑 다르게 버튼처럼 보이게 하기 위해서 이다. 즉 이미지위로 마우스 커서가 이동했을때 클릭이 가능하다는 걸 사용자에게 알려주기 위해서 마우스 커서가 화살표에서 손모양으로 바뀌게 하기 위함이다. 그냥 이미지태그만 있어도 되는걸 커서바꾸자고 a태그로 감싸버린 것이다.
그럼 이렇게 하면 끝이냐... 브라우저마다 특성이 있긴 하지만 기본적으로 이미지에 A태그를 걸면 IE에서는 보기싫은 파란색의 테두리가 생겨버린다. 하이퍼링크가 달렸다는 것을 알려주기 위해서인데 요즘은 이걸 쓰는 사람이 없기 때문에 대부분은 border="0"을 주어서 해결한다.
<a href="#"><img src="경로" alt="" onclick="clickBtn();" border="0" /></a>
그럼 코드가 이렇게 되어버린다. 이미지버튼하나인데 코드가 너무 길어져버렸다. 단지 커서 바꾸자고???
이건 CSS를 사용하면 금방 해결할 수 있다.
<style>
.btn {cursor:pointer;}
</style>
<img src="경로" alt="" class="btn" onclick="clickBtn(); />
커서의 모양을 바꾸는 것은 스타일로 해버리면 된다. (보통은 img에도 border:0을 기본적으로 주기는 하지만 이 상황에서 꼭 필요한건 아니다.) 그리고 심플한 img태그만 사용하면 된다. CSS를 사용한게 훨씬 많아 보인다면 웹사이트에 버튼이 한 100개쯤 있다고 생각해봐라. CSS는 공통적으로 쓸수 있으니 이미지 태그부분만 작성하면 끝이다.
A태그를 이미지를 감싸줄 필요가 없음을 얘기했고 그냥 하던대로만 하기에도 A태그를 사용했을 때의 문제가 있다. 좀 원론적인 웹표준얘기대로 A태그는 하이퍼링크를 위한 것이기 때문에 A태그는 하이퍼링크만 사용해 주는 것이 좋다. 이건 머 웹표준을 동의하지 않는 사람들에게는 그리 통하지 않을 논리고....
A태그의 구조를 보면 Anchor를 사용한 것임을 할 수 있다. Anchor는 다들 알고 있을꺼라고 생각하지만 간단히 설명하자면
<a href="#title">제목으로 이동</a>
........중간내용.............
<h3 id="title">제목</h3>
과 같이 사용하는 것이 Anchor이다. #과 같이 사용하며 #이 있으면 해당경로로 페이지를 이동시키는 것이 아니라 현재페이지에서 해당 id를 가지고 있는 엘리먼트를 찾아서 이동한다. 이걸 이용해서 #은 주고 id는 null을 주어버린 것이다. 그래서 페이지는 다른페이지로 이동하지 않고 현재 페이지에서 Anchor를 찾지만 찾지 못하는 허위 Anchor를 사용한 것이다.
말했듯이 Anchor는 현재 페이지의 해당위치로 이동하는데 이건 스크롤이 있어도 이동된다. 여기서 문제가 발생하는데 href="#"을 해 놓으면 무조건 페이지 최상단으로 이동한다. 이미지 버튼이 윗쪽에 있을 경우에는 상관없지만 스크롤 내려서 아래에 있다고 생각하면 버튼을 누를때마다 페이지 스크롤은 맨위로 올라가고 다시 스크롤 내려서 다른걸 해야하는 사용자의 편의성을 무진장 해친다...
거기에다가 Anchor도 URL에 포함되기 때문에 저 버튼을 누르면 주소맨뒤에 #가 붙게 된다. 크게 문제가 있다고 할 수는 없지만 보기에 좋지 않은건 사실이다. 그리고 자바스크립트 펑션을 호출해서 location.href로 페이지 이동만 할꺼라면 그냥 A태그에 경로를 주자!!
별거 아닌 내용으로 은근 길게 작성해 버렸다. 그냥 작업하는데 버튼마다 계속 A태그 달려있는거 보다가 짜증나서.. ㅎㄷㄷ
덧) 약간은 도전적인 제목이었는데 역시나 내 영역은 아니라 약간의 논란이 있었다. 보통 작성뒤에 잘못된 내용은 빨리 수정하는 편이지만 이번에는 애매모호한 면이 있어서 이 포스트를 읽으시는 분들은 아래 댓글들도 꼭 읽어주시기 바람. 위에 얘기한대로는 링크이동이 아닌 버튼의 경우에 a를 안쓸경우 선택할때 점선이 생기지 않아서 접근성을 해칠우려가 있음. 명확한 결론을 내리기 어려운 관계로 나라디자인의 정찬명님의 포스트를 참고로 건다. 많이 고민해 보아야 할 문제... 2008. 11. 11
저두 거의 a href 로 쓰네염;;
하지만 웹퍼블리셔 입장에서 onclick 을 잘 사용 안하려는 이유중 하나가
스크립트가 지원되지 않는 환경을 생각해서인 경우도 있긴 합니다.
그리고 최대한 스크립트사용을 머 줄이자... 이런 마인드도 있긴합니다.;;
마지막으로 onclick 이벤트로 하였고 cursor:pointer 를 주어서 마우스가 손모양
으로 주는 거까진 좋지만 사이트맵같은경우 링크이미지가 많이 있을때 키보드 탭키를
이용해서 이미지링크를 이동한다고 했을데 이미지에 점선테두리가 안생겨서 현재
어떤 이미지에 포커스가 가있는지, 전혀 모르거든요.... 그래서 a href 를 사용마니합니당.
이건 머 개발자와 웹퍼블리셔간에 서로 좀 협의를 하면서 진행하는게 좋을 듯하네요~
그렇다면 혹시 여러 링크이미지가 있을경우 어디에 포커스가 되어있는지 점선테두리가
생기게 하는 코드나 스크립트 아시나요?! 저좀 갈켜주세여 흐흐~
제가 내용전달을 잘 못해서 오해가 있었던 듯 합니다.
제가 쓰지 말자는건 A태그를 쓰지 말자는게 아니라 A태그를 썼는데 정작 href에는 #으로 기능 무효화를 한것을 의미합니다.
사이트 맵같이 링크기능으로 사용하는 경우에는 당연히 onclick을 사용하는것보다는 a href가 훨씬 좋습니다. 보통 보면 링크도 onclick줘서 location.href로 하는 사람들도 많긴 하지만요 제가 말하고 싶었던던 링크의 경우는 그냥 A태그를 쓰고 링크가 아닌 어떤 기능이 있는 버튼의 경우에는 A href="#"를 쓰지 말고 CSS와 onclick의 조합으로 쓰자는 것이었습니다.(물론 onclick도 분리해내서 자바스크립트코드에서 이벤트리스너를 등록하는 쪽이 분리의 면에서 더 좋겠지요)
말씀하진 키보드 탭으로 이동하는 경우는 제가 전혀 생각지 못한 부분이네요. 아직 퍼블리셔랑 같이 일해본적이 없어서요.. ㅠ..ㅠ 퍼블리셔 입장에 대한 피드백은 전혀 받아본적이 없거든요. 개발자의 입장만 강요하잔 뜻은 아니었습니다. ^^
마우스 클릭시 점선테두리 없애는 코드는 봤는데 생기는건 아직 잘 보르겠네요.. ^^ 좋은 의견 감사합니다.
이미지에 별도로 클래스를 줘서 마우스를 올렸을 때 손모양이 나타나게 하는 방법은 올바르지 않는 방법입니다. 이유는 치프님 말씀처럼 탭키로 눌렀을 시 키보드만 다루는 사람(장애인)들에게는 접근에 해가 되니깐요. 손쉬운 구현방법은<input type="image" src="" alt=""/>나 <button><img src="" alt="버"/></button>두가지 종류의 엘리먼트가 있는데 위 두가지 중에 적절한 태그를 써서, 탭키로 접근을 손쉽게 할 수 있어야 합니다.
감사합니다. 저도 치프님의 말씀을 보고 탭키로의 이동은 전혀 생각지 못했던 이유라서 고민하다가 다른곳에 질문은 해 놨는데 아직 대답은 못받은 상태네요.
input type="image"는 submit버튼과 동일하기 때문에 버튼용도로 사용하기에는 문제가 있지 않나요? <button>으로 감싸는 방법이 있었군요. 퍼블리싱은 그리 잘아는 분야는 아니라서 걱정했는데 역시 많은 문제가 좀 있었군요. 용도에 맞게 쓰자는게 웹표준의 기본취지라고 생각하고 있기 때문에 href="#"의 방식은 여전히 좋은 방법이 아니라고 생각하는데요(웹르라우저가 A태그에는 링크를 기대하기 때문에...) 그럼 대안은 <button>밖에는 없는걸까요?
역시 웹표준은 쉽지 않네요. 조언 감사합니다.
페이스북을 보면, <a onclick="">aa</a> 이렇게도 사용합디다..href를 아예 안쓰는거죠..그러면 원하는 기능도 되고 포커스도 가고..무엇보다 천재들이 모인 페이스북에서 그렇게 쓰고 있다는거....ㅎㅎ
아~ href를 빼는 방법도 있었군요. 좋은팁을 알았네요.
현실에서는 타협을 할때도 당연히 있지만 꼭 그런경우가 아니라면 링크이동이 아닌경우는 a태그를 안쓰는것이 더 맞다고 생각합니다.
지나가다가 글들 잘 읽고 갑니다. ^^
http://stackoverflow.com/a/9440536/5195935
href 를 빼면 tab 를 통한 focus 가 안되지 않나요 ?
그리고, 빼더라도 웹 브라우저에 따라 a:hover styling 이 안되는 등 소소하게 신경쓸 점이 있다는 것을 알고 있어야할 것 같아요. ^^
그 클릭하는 이미지 버튼의 용도가 무엇이냐에 따라 다르겠지만
경로 이동 목적이라면
<a href="주소"><img src="경로" alt="" /></a>
로 감싸는게 맞겠지요..
윗분 말씀대로 <img /> 자체에 커서를 포인터로 css 잡아준다고 해서
접근성까지 보장 되지는 않습니다.
하지만 말씀대로 단순 온클릭으로 주소이동 수준의 js는 쓰잘데기 없는 낭비..
다른 이벤트 및 정보를 제공하는 이미지 버튼이라면
href에 js가 불러지지 않았을때를 대비해서
대체 정보를 제공해주는 페이지 경로를 걸어주는 정도가 되어야 겠지요.
js에서 이벤트를 프리벤트 해버리고 말이죠.
예 케이스별로 다르겠지만 접근성 부분까지 얘기하려는 것은 아니었고 href="#"가 접근성을 보장하기 위해서 사용했다고 보기도 어려운것 같습니다. 말씀하신것처럼 대안적으로 해결할 수 있는 방법들이 있고 JS로 이를 보완할 수 있겠지요.
전 이미지를 버튼으로 써야하면 버튼에 스타일로 백그라운드 이미지를 입히는데
사람마다 조금씩 다 다른거 같습니다.
마크업을 주업으로 하지 않는 입장인지라 마크업작업하시는 분들의 의견도 많이 듣고 싶습니다. 사실 아직도 href="#"가 참 많네요...
막 블로그 운영을 시작했는데 필요한 코드가 여기있었네요! 잘 썼습니다~ 고맙습니다 :)
예~ ㅎㅎ
안녕하세요. 평소에 아웃사이더님 글 잘 읽고있습니다.
검색하다가 이 포스트로 왔는데, 옛날옛적에 적으신 글이군요~
개발 관점에서 불편한 점을 토로하셨는데, 이해합니다.
접근성에 문제가 많다는 점 공개된 많은 자료들을 통해 알 수 있는데요.
a태그는 링크인데, 모든 버튼들을 a로 쓰면서 생기는 문제라고 생각합니다.
버튼을 버튼답게 쓰려면, input type="button" 이나, type="submit", button, 과 같은 태그를 이용하는게 접근성에도, 개발에도 용이 하지 않을까요?
프로젝트 진행할때 마크업 담당자분과 잘 조율하시면 수월해질것 같습니다.
이런 문제는 조직에 따라 좀 다른것 같습니다.
마크업을 개발하시는 분이 팀원이나 프로젝트 멤버처럼 함께 일한다면 좀 자유롭게 의견개진이 가능한데 서로 떨어져서 메일로만 받다보면 다른 사람의 영역에 좀 침범하는 느낌이 들어서 쉽지 않은것 같습니다. (전에 a를 쓰는 이유에 대해서 좀 얘기했던 기억이 있는데 자세한 내용은 까먹었네요..)
기술의 전수(?)가 안된다는 거겠죠...
저같은 경우에 <a> 태그의 href 에 # 을 쓰면 이런저런 문제가 있다는 걸 알기 때문에 그렇게 코딩하지 말라고 애들 가르친게 10년도 더 전입니다...
왜 아직도 이런 문제가 포스팅 되는지 신기할 뿐입니다...;;;;
포스팅 자체는 6년전에 이뤄진 포스팅입니다. ^^
잘보고갑니다
단지 커서기능만을 위해 <a href="#">쓰면 안되겠지만
javascript 로 링크를 거는건 더 안되는 일 아닐까요?
네 그렇죠. 진짜 링크이동만 한다면 자바스크립트로 걸 이유가 전혀 없죠.
웹접근성 때문에 a태그에다가 onclick 걸지 무슨 img에다가 onclick 을 왜검. 시멘틱 태그의 의미를 모르시나.. a태그는 a태그 용으로 img는 이미지만. 의미를 확실히 하는게 맞는데
관리자만 볼 수 있는 댓글입니다.
이거 글 자체가 노답인데. 경험이 없으면 없다고 말해,,,~
내용은 둘째치고 얹을 수 있는 잇점... 맞춤법부터 너무 거슬리네요
ㅋㅋㅋㅋㅋㅋㅋㅋ아니 본인이 잘못 알고 있으면서 제목에 제발이랰ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
개발자 및 퍼블리셔 여러분들
블로그에 써놓은 잘못된 가르침 글 같은거에 너무 휘둘리시면 안 됩니다
글만 보면 마치 웹퍼블리셔&웹개발자들의 잘못된 습관들을 꼬집어 지적하는 듯 해 보이지만
잘못된 습관도 아닌데 잘못된 거라고 꼬집는 글입니다
2018년 현재 많은 웹개발자들이 경력 불문하고 잘못 알고 있어 이행하는 작업방법 중에 하나가 포커싱을 못 잡아내는 태그에 onclick 등의 클릭이벤트 속성을 건다는 것입니다.
사실 그렇게 건다고 해서 기능적으로 안 되는 것은 아니지요
그러나 그건 웹접근성 상 잘못 된 방법입니다.
'뭐~ 기능 작동시키는데에 문제 없으니까~' 하면서 잘못된 지식들이 선임에서 후임으로 전해지고 학원에서도 그렇게 가르치고 있는 것 아닌가 싶기도 합니다
포커싱이 되는 태그인 a, button, input 태그에 걸면 됩니다
몇가지 팁으로 button은 그냥 <button></button>으로 두면 클릭시 submit 되어버립니다
<button type="button">버튼명</button>으로 해야 submit 안 됩니다
input은 일반 버튼용으로 쓰고 싶을 땐 <input type="button" value="버튼명" />으로 쓰면 됩니다
<button type="button"></button>과 <input type="button" />은 기능상 큰차이 없는 듯 합니다만 보통 둘중에선 <button type="button"></button>을 더 많이 쓰는 추세이긴 하는 듯 합니다. <input type="image" src="" />는 <input type="submit" />과 같은 submit 기능을 하는 듯 하고요
그리고 a태그에 href 값을 아예 빼버려도 웹표준, 웹접근성에 위반되지 않습니다. a태그에 href를 쓰지않고 onclick을 쓰고 싶은 경우에는 href=""를 그냥 없애버리면 됩니다.
다만 주의점은 href 값을 없애버리면 커서가 손가락 모양이 안 될 수도 있습니다. 그건 reset.css에서 a {cursor:pointer;}를 넣어주면 해결됩니다.
이런 잘못된 정보글에 웹퍼블리셔, 웹개발자분들이 낚일까봐 저도 모르게 주절주절 적었네요
href 속성이 없으면 키보드를 이용한 포커싱이 되지 않습니다.
물론 tabIndex 속성을 이용하면 되긴합니다 :)
아는척 오졌따리~
남아서 SM할꺼면 자기 편한거~ SI처럼 치고 빠질꺼면 표준대로 꼼꼼히~ 막하고 도망가려다가 안정화 징집되면 개망...
이미지 하나까지도 자바 걸어서 프로그램 해놓은거 제일 싫어.
네이버에서도 href="#"을 씁니다
다른 사이트들 소스 좀 보세요..