해상도에 따라 보이고 안보이는 이미지
초엘
음....
일단 기본적인 웹페이지 사이즈는 1024정도 입니다.
그런데 더 해상도가 높은(예를 들면 1360 해상도)모니터에서 보면
1024일때는 안보이던 이미지가 나타나 보여야 합니다.
그러니까 작은 해상도에는 안보이던 양쪽 이미지들이
큰 해상도의 모니터에서는 양쪽 이미지들이 보이는거죠.
이럴때는 어떤 속성을 주는 게 맞는걸까요??
읔 ㅠ 한마디씩 해주시면 감사하겠습니다-= ^^
-
희미햬 2024-12-03
다들 너무너무 감사합니다 ^^역시 하코사 ㅠㅠ
-
은새 2024-12-03
css3 media query 응용하셔서 배경이미지를 결정해주셔도 되겠구요. (뭐 ie 구버전에선 안됩니다만;)
음.. wrap 역할을 하는 div의 너비(width)가 1024면 1024*768 해상도 모니터에선 가로 스크롤바가 생길테니 1000이하로 주시는 게 좋겠구요 :)
양쪽 이미지가 큰 편이라면 한개의 이미지로 가는 게 어렵겠지만-
간단하게 생각하면 wrap 역할을 하는 div에 배경색을 white로 주시고 body에 배경이미지를 cent -
큰모음 2024-12-03
엇...넵 맞습니다 ㅎㅎ 본래 의도는 태클을 걸려고 한건 아닌데 뉘앙스가 그렇게 되버렸네요. 죄송합니다^^;
NoriTer님 말씀대로 레이아웃 모양을 bg짤리지 않고서도 css로 얼마든지 커버가 가능하기 때문에 css처리를 권장한거구요. 다시 읽어보니 제가 글을 잘못쓰긴썼네요 하하~ -
잎새 2024-12-03
onresize 이벤트 하나면 되는데요~ 딱히클라이언트에 무리주는것도 아니고 css로 이리저리 브라우져 호환성 고민하면서 복잡하게 만들기보단 이런건 그냥 스크립 처리하는게 정신적으로나 능률적으로나 좋을듯 합니다
-
야미 2024-12-03
스크립트로 처리하면 사용자가 화면을 줄였다 늘였다 할 때를 캐치하는것이 까다로워질거구요.
1024짜리 div 하나를 화면의 중간에 만드세요.
#wrapper{width:1024px; margin:0 auto; position:relative; z-index:1; background:#fff;}
body에 좌우 레이어 각각 하나씩 띄우시고 z-index:0; 으로 주세요.
화면이 작을때는 wrapper에 가려서 안보이실거예요.
비록 1280화면에서는 -
보아라 2024-12-03
너무 css로만 하려고 하지 마시고, onload 이벤트에 브라우져 크기값 가져오셔서 해당 부분을 보이거나 감추게 하세요. 아니면 width를 줄이고 overflow:hidden 으로 해당 부분을 가리게 하셔도 되겠죠.