B'Friend!!
BFriend

[CSS] image link with CSS

Monday, July 25, 2005

웹표준을에 관한 내용을 보면 컨텐츠와 디자인의 분리. 즉 HTML 은 내용을, CSS 파일로는 디자인을 관여한다. 어쩔수 없는 경우라면 모를까, 가능하다면 디자인과 내용을 분리 해줘야 한다고 생각한다.

텍스트에 링크거는건 아주 일상적인 내용이지만 웹페이지에 이미지 테그 안쓰고 이미지에 링크를 거는 방법은? (이상한 표현..-_-)

간단하게 본 블로그의 로고 부분 경우, HTML 문서에 이미지 삽입 없이 CSS 파일로 이미지에 링크 건 경우다. 아는사람은 다 아는... 이 소스를 알아봅시다~!

제목이 맞는지 모르겠지만 업데이트 하면서 변경된 내용때문에 포스팅 제목을 영문으로 당분간 가져가려 합니다.

IMG

결과보기

CSS PARTS
<style>
#imglink {
background:url(buttt1.jpg) no-repeat;
text-indent:-3000px;
display:block;
width:160px;
height:60px;
}
#imglink a:hover {background:url(buttt2.jpg);}
</style>

HTML PARTS
<span id="imglink"><a href="#" id="imglink">image link with CSS</a></span>

설명
CSS 부분에 text-indent:-3000px;라고 된건 HTML 문서에 적힌 이미지 대용 글과 이미지가 겹치는걸 방지하기 위해 텍스트는 브라우저에서 안보이는 위치로 보내버리는 역할을 한다. ( CSS 를 제거하면 당연히 텍스트만 정상위치에 보이게 된다.)
-3000px라고 하는건 임의 숫자로, 브라우저에서 안보일 정도로만 적어주면 된다.

display:block; 부분은 링크를 클릭 영역을 지정된 사이즈로 블럭화 시키는 역할을 한다. (아마도..)

width 와 height 는 이미지 사이즈.

#imglink a:hover 이 부분은 추가적인 부분으로 마우스를 오버했을때 이미지가 바뀌게 하고 싶은경우 추가 해주면 된다.

비록 HTML 부분에 <span></span> 테그로 묶어 놨지만 이건 사용자 나름대로 <p></p> 로 써도 되고, 네비게이션바 처럼 같은형식(리스트 아이템)의 링크라고 한다면 <li></li> 나 <ul></ul>, 등등 원하는 엘리먼트에 ID/CLASS 로 정해서 사용하면 된다.

나름대로 해본건데, 틀린점이나 보완되어야 할 부분이 있다면 코맨트로 다스려 주세요

July 25, 2005. PM 7:28 by tux | Tag : CSS , design , source , web standard

Next : Warning
Previous : CSS validation에 통과하려면?
Go to : Main page

Comments

Tux님의 방법은 자주 사용되고 있는 방법이긴 하지만, 권장되는 방법은 아닙니다.

마우스 호버(:hover)시 배경이미지의 포지션을 조절해서 롤오버 효과를 보여줄 때(제 블로그에 자주 사용함)를 제외하고는 그다지 유용한 방법이 아니라고 하더군요.

W3C의 접근성 포럼에서 권장하는 방법은 그냥 이미지를 넣고, alt에 적당한 내용을 쓰는 것입니다.

그리고, href를 위한 앵커(a)는 xhtml2.0에서 사라진다고 합니다. 모든 태그(p, img, h1~6, span, 등등)에 직접 url을 입력할 수 있답니다. 솔직히 앵커 태그는 불필요한 넘이었던 거죠~ ^^;

마지막으로, tux님의 글중에서 css 코드의 height는 좀 더 복잡한 계산과정이 필요하죠. text-indent는 문단의 첫째줄 text를 좌우 위치만 이동시키는 것(주변의 책들을 보면, 보통 문단의 첫째줄이 오른쪽으로 조금 밀리는 것과 같음)이기 때문에, font-size와 line-height는 그대로 상속한답니다.

즉, font-size:12px, line-height:18px에 위의 이미지 대처기술을 사용한다면, 기본 height가 20px가 지정된 상태에서 height 60px를 추가하게 되니 총 80px가 되는 현상이 있답니다.

이 문제는 ie에서만 발생하는 것으로 알고 있는데, 해결법은 간단히 line-height:1%를 쓰면 되죠~ ^^;

오늘부터 휴가시작이랍니다. 아마 내일은 제주도로 떠날듯.. ^^

by Site icon Hooney (July 26, 2005. AM 10:48)

후니님 말씀대로 이런거 저런거 따지다간 CSS 로 디자인 하는게 프로그래밍 하는것보다 더 골치 아퍼질수 도 있겠네요. '디자이너' 에겐 말이죠... ^^

웹페이지에 이미지 넣는건 나중에 일일이 페이지 열어 수정하기 귀챦아서 별루.. 프린트 한다고 해도 별로 이쁘게 안나오구요.
W3C 에서 왜 그런걸 권장하는지 궁굼하진 않지만 이런식으로 관리하는게 추후 페이지 수정없이 CSS 만으로 디자인 변경할때 편할거 같구요,

XHTML2.0 에서 앵커 없어지는건 알고 있는데 CSS 도 나온지 4~6년 지나서야 재대루 쓰고있는 마당에 벌써 그것에 마춰 뭔갈 준비한다는건 실재 업무에 별 도움 안되리라 생각 됩니다. 뚜껑은 열어봐야 알겠지만 말이죠.

걍 잘 보이고 보기 좋으면 장땡이죠. ^^


역시 후니님! ^^b 많이 아시네요~ 조언 감사.
휴가도 있고 좋으시겠네요.

회사에서 이번에 급하게 8개 프로젝트가 한꺼번에 걸리는 바람에 휴가 갈수 있을지 없을지도 불투명.. ㅠ.ㅠ

by Site icon tux (July 26, 2005. AM 11:40)

^^ 저녁먹고와서 한참을 둘러 보았습니다.
css와 여러가지 재미있는 정보들로 시간가는줄도 몰랐습니다. 자주 들르게 될듯합니다. ^^

by Site icon PINK (July 26, 2005. PM 8:53)

video editing 쪽 일 하시나봐요.
저도 그쪽에 관심이 많은데, 혹시 도움 받을 일 있을지 모르겠네요.('')(..)

가끔씩 생각날때 들려주세요. ^^

by Site icon tux (July 27, 2005. AM 12:34)

음.. 저도 친구가 코딩하는거 도와주면서 로고를 저런식으로 해줬어요
스탈없을땐 로고그림대신 텍스트가 떠주는게 맘에 들어서 -_ -);;
별거 아니지만.. 스탈 지웠는데도 로고가 그림으로 뜨는게 싫더라구요 ㅎㅎ

by Site icon kukie (July 27, 2005. AM 9:08)

좀 쌩뚱맞죠. 저도 몇개(style switcher, feed img) 아직 남았는데 시간날때 바꿀라구요. 스타일 없앴을때 깔끔하게 말이죠

by Site icon tux (July 27, 2005. PM 4:07)

굿팁..

by Site icon 떡아이 (August 5, 2005. AM 10:36)

으음... 저는 본문 내용보다도.. 답글에서 tux 님과 후니 님의 보이지 않는 심리전이 눈에 띄네요. 제가 이런 것에 민감해서.. -_-;

개인적인 의견으로 말하자면 이미지가 컨텐츠 그 자체에 포함된다라면 html/xhtml 에다가, 아니면 그냥 배경 이미지나 꾸미는 용도로라면 css 에다가 background 처리하는 게 의미론적으로 맞다고 생각합니다. 단 이것은 페이지를 만들 때 마다 또 사람의 판단 기준에 따라 달라질 수 있는 문제.. (회사의 캐치 프레이즈 문구가 컨텐츠에 포함될지 꾸미는 용도로 포함될지는 상황에 따라 다르겠죠?)

마지막으로 절대 tux 님을 비난하는 말은 아니지만, 보기 좋으면 장땡.. 이 무의식적인 사고방식이 국내 웹 사이트의 현 주소를 만들게 한 이유 중 하나가 아닌가 하고 생각합니다. 현업하다 보면 사실 이런 건 신경 쓸 겨를도 별로 없지만요. 그 법칙을 아시나요?
내가 만드는 개인 페이지는 심혈을 기울이지만, 회사에서 만드는 프로젝트 페이지는 일단 어떻게든 돌아가면 된다라는 사람의 교묘한 심리... ..저도 마찬가지랍니다. -v-;

by yser (August 8, 2005. PM 4:45)

- Made in Korea -