S

다들 메뉴 등 하실때 background-position 많이 쓰세요?

저같은 경우 메뉴 이미지를 통째로 짜서 넣은 후 image map으로 작업을 해본 적은 있는데 (아주 옛 표준을 맞추거나 그렇게 요청이 들어온 경우) 대형 사이트의 경우 메뉴를 background-position을 통해 하나의 이미지에 넣고 좌표값으로 맞추더라구요 (포털을 비롯한 수많은 사이트들)

 

해외 웹에서는 잘 보지 못했던 것 같은데 국내 대형 웹에서 자주 보여서 이 방식을 써야 하나... 싶네요.

보통은 이미지를 쓰던 아니면 웹폰트를 쓰던 했는데 생각해보니 이미지 하나만 로드하니 속도가 확실히 개선되겠구나 싶더라구요.

 

다들 원래 많이 써오셨나요?

|

댓글 14개

저는 일본에서 퍼블리셔를 목표로 하는 웹디입니다.
말씀하신대로 한장의 이미지를 가지고 위치 지정해서 넣는 방법을 사용하고 있습니다 ^^
원래 많이 쓴지는 모르겠네요; -ㅅ -
이전까지는 한장한장 따로 만들어서 마우스오버용 이미지까지 따로 만들었는데,
지금은 한장으로 다 해결하네요 ...
부지런하시네요.. 네이버에서 그런식으로 작업을 하고있죠.
제작시에 시간이 더 많이 걸려서 -ㅁ-...
탈환대님 방가방가 ^^;; 부지런하다뇨 하하하
게으름 하면 접니다 후후후
전 이미지 슬라이드를 플래시로 할까 제이쿼리로 할까 아침부터 아직 고민중인데요 ㅋㅋ
전 플래시를 싫어해요 ㅋㅋ 제이쿼리로 고고싱 ㅎ
넵~image replace기법이라고 보통 IR기법이라 부릅니다.
메뉴 뿐만 아니라, 이미지가 들어가는 전반적인 요소에 많이 쓰이구요~
말씀하신대로 이미지를 여러번 요청하는 것보다는 아무래도 속도가 빠르니깐요ㅎ

하지만 속도뿐 아니라 접근성을 고려해서 IR기법을 사용하기도 하는데요~
(IR기법에도 또 다양한 방법론이 있습니다ㅎ)
포털같은 경우는 이미지를 못불러올 경우나, 고대비 모니터 사용자들을 위해 이미지밑에 텍스트를 고정시켜놓는 경우도 많습니다.
(네이버같은 경우 개발자도구에서 백그라운드 이미지를 끄면 텍스트가 보일꺼예요~)
하 정말 이렇게 하나하나 생각을 하시고 만드시는분들 정말 대단한것 같아요..

저는 제가 만든 소스를 보면 하... 뭐 이런게 있나 싶어지네요...
유지보수가 극악이죠. ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ휴ㅠㅠㅠ
ㅋㅋ 근데 이미지 하나로 만들어 놓고,
메뉴 늘어나거나 하면 귀찮귀찮 ㅋ
스프라이트 이미지(sprite image) 말씀하시나 보네요.
아이콘의 경우 이런 식으로 많이 쓰더라구요.
new, hot 등의 아이콘류은 괞찮지만
다른건 유지 보수할적에 힘들다라는.....
전 구관이 명관이라 생각하는데.... 따라 갈 수 밖에요.....ㅠㅠ
기본적으로 많이 쓰는거는 한장에 하면 편리합니다. 그리고 그때그때 변경하는건 귀찮아서 그냥 합니다.
많이 사용은 합니다만, "확실히 수정이 없겠다." 싶은곳에만 사용합니다.
구축시에는 수정은 엄청 오거든요.

단, 온/오버가되는 메뉴에는 각 메뉴당 ON/OFF를 한 장에 정의해서 사용합니다.
댓글을 작성하시려면 로그인이 필요합니다. 로그인

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
10년 전 조회 2,283
10년 전 조회 817
10년 전 조회 2,862
10년 전 조회 1,513
10년 전 조회 1,132
10년 전 조회 473
10년 전 조회 828
10년 전 조회 1,116
10년 전 조회 1,540
10년 전 조회 2,899
10년 전 조회 1,679
10년 전 조회 1,845
10년 전 조회 2,319
10년 전 조회 3,899
10년 전 조회 1,515
10년 전 조회 667
10년 전 조회 2,358
10년 전 조회 803
10년 전 조회 1,025
10년 전 조회 1,789
10년 전 조회 690
10년 전 조회 711
10년 전 조회 3,018
10년 전 조회 711
10년 전 조회 589
10년 전 조회 556
10년 전 조회 480
10년 전 조회 1,019
10년 전 조회 737
10년 전 조회 624
10년 전 조회 724
10년 전 조회 1,231
10년 전 조회 2,072
10년 전 조회 1,136
10년 전 조회 1,406
10년 전 조회 1,900
10년 전 조회 1,314
10년 전 조회 1,115
10년 전 조회 1,044
10년 전 조회 3,922
10년 전 조회 700
10년 전 조회 1,024
10년 전 조회 1,630
10년 전 조회 1,068
10년 전 조회 2,782
10년 전 조회 1,005
10년 전 조회 936
10년 전 조회 1,020
10년 전 조회 4,592
10년 전 조회 892
10년 전 조회 2,410
10년 전 조회 1,727
10년 전 조회 2,366
10년 전 조회 1,941
10년 전 조회 2,679
10년 전 조회 842
10년 전 조회 1,099
10년 전 조회 2,913
10년 전 조회 1,281
10년 전 조회 653
10년 전 조회 1,675
10년 전 조회 1,403
10년 전 조회 1,146
10년 전 조회 1,089
10년 전 조회 1,321
10년 전 조회 951
10년 전 조회 593
10년 전 조회 1,395
10년 전 조회 1,865
10년 전 조회 1,380
10년 전 조회 1,456
10년 전 조회 2,095
10년 전 조회 3,213
10년 전 조회 760
10년 전 조회 791
10년 전 조회 1,298
10년 전 조회 1,534
10년 전 조회 1,048
10년 전 조회 745
10년 전 조회 909
10년 전 조회 979
10년 전 조회 1,206
10년 전 조회 1,368
10년 전 조회 2,054
10년 전 조회 699
10년 전 조회 895
10년 전 조회 5,015
10년 전 조회 773
10년 전 조회 1,236
10년 전 조회 1,187
10년 전 조회 1,656
10년 전 조회 1,087
10년 전 조회 1,343
10년 전 조회 1,424
10년 전 조회 1,806
10년 전 조회 1,570
10년 전 조회 2,399
10년 전 조회 1,821
10년 전 조회 1,927
10년 전 조회 980
🐛 버그신고