질문과 답변 (구)

최근본상품
TOP
DOWN

질문과 답변 (구)

특정 화면 넓이 에서만 이미지 보이기

2015.06.25 12:15 1,202 4

본문

일을 하다 문득 생각이 든 것이 화면 사이즈에 따라

메인 레이어의 최대 넓이의 좌측 우측 빈 공간에 이미지를 보였다가 감췄다가 할 수 있지 않을까요?

이런게 진정한 반응형 웹이 될텐데...

@media 부분을 만지면 될거 같은데
해당 태그와 반응 넓이를 보니 만만치는 않겠네요

custom css로 그나마 쉽게 만들 수 있을 방법이 없을까요?

일단 저도 부족하지만 생각을 해 봐야겠습니다
0
로그인 후 평가 가능합니다.
- red123 - 회원등급 : 지상계 / Level 12
포인트 49,887
경험치 13,270
[레벨 12] - 진행률 3%
- 가입일 : 2015-03-16 21:00:17
- 서명 : 미입력
- 자기소개 : 미입력

댓글목록 4

레오나르도님의 댓글

해당 이미지 부분을 반응형 유틸리티 클래스로 감싸주시면 되겠군요.

- Phones (<768px) : hidden-xs
- Tablets (≥768px) : hidden-sm
- Desktops (≥992px) : hidden-md
- Desktops (≥1200px) : hidden-lg

클래스 중복으로 사용가능합니다.

ex) 768픽셀 미만에서 감출경우


<div class="hidden-xs">
    이미지
</div>

http://getbootstrap.com/css/#responsive-utilities

축하합니다. 첫댓글 포인트 8포인트를 획득하였습니다.

red123님의 댓글

red123 2015.07.02 19:24

감사합니다 오래간만에 와서 이제 댓글을 확인해 봅니다 ^^

테스트 해보겠습니다

그리고 결과 공유드릴께요~

이렇게 도움 주셔서 감사 드립니다

shadow님의 댓글

shadow 2015.06.25 17:29

다음과 같이 하면 될 듯 한데요?
그누보드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님의 댓글

red123 2015.07.02 19:24

shadow님 ㅎㅎ 이렇게 댓글로 도움 주시는 것만으로도 얼마나 큰 힘인데요

물론 테스트 해 보고 말씀 드릴게요~ ^^

감사합니다

질문과 답변 (채택기능) 게시판이 신설되었습니다.
질문과 답변 (구) 게시판은 글쓰기가 제한되오니 착오 없으시길 바랍니다. (댓글 및 조회는 여전히 가능합니다.)

전체 2,800 건 - 133 페이지
제목
훈이운 2015.07.01 988 0
톡톡톡 2015.07.01 750 0
프리피피티 2015.06.30 748 0
암스원 2015.06.29 1,161 0
레아엘 2015.06.29 810 0
프리피피티 2015.06.29 756 0
크롱크롱 2015.06.29 915 0
레아엘 2015.06.29 1,186 0
맥주걸 2015.06.27 1,407 0
프리피피티 2015.06.27 802 0
버섯먹은나 2015.06.26 1,088 0
연시기81 2015.06.26 754 0
서종득 2015.06.25 916 0
red123 2015.06.25 1,203 0
크롱크롱 2015.06.25 777 0