특정 화면 넓이 에서만 이미지 보이기
1,268
2015.06.25 12:15
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=14m 주소복사
본문
일을 하다 문득 생각이 든 것이 화면 사이즈에 따라
메인 레이어의 최대 넓이의 좌측 우측 빈 공간에 이미지를 보였다가 감췄다가 할 수 있지 않을까요?
이런게 진정한 반응형 웹이 될텐데...
@media 부분을 만지면 될거 같은데
해당 태그와 반응 넓이를 보니 만만치는 않겠네요
custom css로 그나마 쉽게 만들 수 있을 방법이 없을까요?
일단 저도 부족하지만 생각을 해 봐야겠습니다
메인 레이어의 최대 넓이의 좌측 우측 빈 공간에 이미지를 보였다가 감췄다가 할 수 있지 않을까요?
이런게 진정한 반응형 웹이 될텐데...
@media 부분을 만지면 될거 같은데
해당 태그와 반응 넓이를 보니 만만치는 않겠네요
custom css로 그나마 쉽게 만들 수 있을 방법이 없을까요?
일단 저도 부족하지만 생각을 해 봐야겠습니다
0
좋아요!
레벨 10
경험치 10,166
Progress Bar 59%
- 가입일 : 2015-03-16 21:00:17
- 서명 :
- 자기소개 :
댓글목록
레오나르도님의 댓글
해당 이미지 부분을 반응형 유틸리티 클래스로 감싸주시면 되겠군요.
- Phones (<768px) : hidden-xs
- Tablets (≥768px) : hidden-sm
- Desktops (≥992px) : hidden-md
- Desktops (≥1200px) : hidden-lg
클래스 중복으로 사용가능합니다.
ex) 768픽셀 미만에서 감출경우
http://getbootstrap.com/css/#responsive-utilities
축하합니다. 첫댓글 포인트 8포인트를 획득하였습니다.
red123님의 댓글
감사합니다 오래간만에 와서 이제 댓글을 확인해 봅니다 ^^
테스트 해보겠습니다
그리고 결과 공유드릴께요~
이렇게 도움 주셔서 감사 드립니다
shadow님의 댓글
다음과 같이 하면 될 듯 한데요?
그누보드5/eyoom/theme/설치된 테마/css/custom.css
아래는 가로폭 1201px부터 container는 1170px로 고정하고 양 여백에 이미지를 보이도록 하는 예제입니다
@media (min-width: 1201px) { .container { width: 1170px; } .boxed-layout { background: url('가로폭 최대 해상도 이미지 경로'); background-repeat: no-repeat; background-attachment: fixed; } }테스트 못해봤어요..무책임합니다 아주 ^^;
될껍니다.^^
red123님의 댓글
shadow님 ㅎㅎ 이렇게 댓글로 도움 주시는 것만으로도 얼마나 큰 힘인데요
물론 테스트 해 보고 말씀 드릴게요~ ^^
감사합니다