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,355
10년 전 조회 891
10년 전 조회 2,936
10년 전 조회 1,586
10년 전 조회 1,196
10년 전 조회 549
10년 전 조회 907
10년 전 조회 1,194
10년 전 조회 1,610
10년 전 조회 2,967
10년 전 조회 1,755
10년 전 조회 1,918
10년 전 조회 2,384
10년 전 조회 3,974
10년 전 조회 1,594
10년 전 조회 731
10년 전 조회 2,432
10년 전 조회 873
10년 전 조회 1,101
10년 전 조회 1,864
10년 전 조회 767
10년 전 조회 779
10년 전 조회 3,093
10년 전 조회 785
10년 전 조회 664
10년 전 조회 638
10년 전 조회 561
10년 전 조회 1,090
10년 전 조회 821
10년 전 조회 693
10년 전 조회 802
10년 전 조회 1,300
10년 전 조회 2,143
10년 전 조회 1,216
10년 전 조회 1,476
10년 전 조회 1,973
10년 전 조회 1,392
10년 전 조회 1,199
10년 전 조회 1,110
10년 전 조회 3,993
10년 전 조회 773
10년 전 조회 1,088
10년 전 조회 1,702
10년 전 조회 1,137
10년 전 조회 2,853
10년 전 조회 1,076
10년 전 조회 1,013
10년 전 조회 1,085
10년 전 조회 4,658
10년 전 조회 957
10년 전 조회 2,483
10년 전 조회 1,786
10년 전 조회 2,442
10년 전 조회 2,005
10년 전 조회 2,749
10년 전 조회 914
10년 전 조회 1,166
10년 전 조회 2,981
10년 전 조회 1,348
10년 전 조회 728
10년 전 조회 1,745
10년 전 조회 1,475
10년 전 조회 1,213
10년 전 조회 1,162
10년 전 조회 1,396
10년 전 조회 1,031
10년 전 조회 660
10년 전 조회 1,468
10년 전 조회 1,939
10년 전 조회 1,454
10년 전 조회 1,519
10년 전 조회 2,163
10년 전 조회 3,285
10년 전 조회 835
10년 전 조회 864
10년 전 조회 1,384
10년 전 조회 1,600
10년 전 조회 1,120
10년 전 조회 823
10년 전 조회 975
10년 전 조회 1,053
10년 전 조회 1,280
10년 전 조회 1,444
10년 전 조회 2,123
10년 전 조회 767
10년 전 조회 962
10년 전 조회 5,089
10년 전 조회 848
10년 전 조회 1,308
10년 전 조회 1,264
10년 전 조회 1,722
10년 전 조회 1,159
10년 전 조회 1,409
10년 전 조회 1,499
10년 전 조회 1,874
10년 전 조회 1,646
10년 전 조회 2,480
10년 전 조회 1,890
10년 전 조회 1,986
10년 전 조회 1,052
🐛 버그신고