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,326
10년 전 조회 857
10년 전 조회 2,896
10년 전 조회 1,554
10년 전 조회 1,168
10년 전 조회 512
10년 전 조회 867
10년 전 조회 1,160
10년 전 조회 1,578
10년 전 조회 2,931
10년 전 조회 1,717
10년 전 조회 1,876
10년 전 조회 2,353
10년 전 조회 3,934
10년 전 조회 1,557
10년 전 조회 702
10년 전 조회 2,401
10년 전 조회 843
10년 전 조회 1,059
10년 전 조회 1,821
10년 전 조회 734
10년 전 조회 746
10년 전 조회 3,051
10년 전 조회 749
10년 전 조회 629
10년 전 조회 603
10년 전 조회 516
10년 전 조회 1,056
10년 전 조회 783
10년 전 조회 659
10년 전 조회 766
10년 전 조회 1,267
10년 전 조회 2,104
10년 전 조회 1,178
10년 전 조회 1,440
10년 전 조회 1,937
10년 전 조회 1,350
10년 전 조회 1,157
10년 전 조회 1,078
10년 전 조회 3,956
10년 전 조회 735
10년 전 조회 1,051
10년 전 조회 1,664
10년 전 조회 1,102
10년 전 조회 2,819
10년 전 조회 1,043
10년 전 조회 968
10년 전 조회 1,048
10년 전 조회 4,621
10년 전 조회 925
10년 전 조회 2,446
10년 전 조회 1,752
10년 전 조회 2,405
10년 전 조회 1,967
10년 전 조회 2,712
10년 전 조회 878
10년 전 조회 1,131
10년 전 조회 2,943
10년 전 조회 1,310
10년 전 조회 684
10년 전 조회 1,704
10년 전 조회 1,439
10년 전 조회 1,178
10년 전 조회 1,123
10년 전 조회 1,356
10년 전 조회 986
10년 전 조회 622
10년 전 조회 1,430
10년 전 조회 1,901
10년 전 조회 1,414
10년 전 조회 1,481
10년 전 조회 2,129
10년 전 조회 3,241
10년 전 조회 792
10년 전 조회 827
10년 전 조회 1,339
10년 전 조회 1,559
10년 전 조회 1,081
10년 전 조회 774
10년 전 조회 941
10년 전 조회 1,015
10년 전 조회 1,246
10년 전 조회 1,406
10년 전 조회 2,080
10년 전 조회 735
10년 전 조회 927
10년 전 조회 5,044
10년 전 조회 801
10년 전 조회 1,268
10년 전 조회 1,221
10년 전 조회 1,688
10년 전 조회 1,122
10년 전 조회 1,372
10년 전 조회 1,456
10년 전 조회 1,836
10년 전 조회 1,603
10년 전 조회 2,435
10년 전 조회 1,848
10년 전 조회 1,950
10년 전 조회 1,010
🐛 버그신고