반응형 배너 컨트롤
본문
안녕하세요.
반응형 배너를 메인에 노출 하고 있습니다.
모바일로 볼때는 문제가 되지 않습니다.
하지만 PC로 보면 배너가 화면 비율만큼 커지니 너무~ 커집니다.
그래서 혹시 이런게 가능한가요?
PC로 접속시? 아니면 가로 화면이 *** 이상 일때는
배너 사이즈가 *** 가 되고
그게 아니라면 반응형 사이즈로 반응해라~
여기 메인 이미지를 PC로 보시면 제말이 무슨 말인지 아실거에요.
혹시 도움 가능 하신분 부탁드립니다.
감사합니다.
이번 한주도 건강하고 활기찬 주가 되시길 바랍니다.
답변 4
미디어 쿼리를 이용해 보세요..
https://opentutorials.org/course/2418/13517
// 가로가 1200이상일때
@media (min-width: 1200px) {
.banner {
width: 500px;
}
}
안녕하세요.
현재 원본 소스를 가장 안 건들고 간단해서 이 소스를 적용해 봤습니다.
이미지 속성을 block으로 변경 후 text-align:center를 줘야한다고 해서 했는데 안되네요.
그래서 구글링을 해보니... 아래와 같은 설명 있는데요.
제 코드에서 부모요소는 어딘가요? 너무 코드를 여기저기서 구글링해서 붙여넣기 해서 엉망입니다. 그래서 어디가 부모요소인지 모르겠네요.
이제 거의 다 된거 같은데 중앙정렬만 되면 될것 같습니다.
마져 도와 주실 수 있을까요?
" img태그는 인라인 요소라 img 태그에 text-align을 적용해도 안되고, 부모요소(블록요소이거나 인라인블록인 요소)에다가 적용시켜야 정렬이 가능합니다."
/* 가로가 1200이상일때 */
@media (min-width: 800px) {
.banner {width: 500px; padding:10px; margin:10px; display:block; text-align:center;
}
}
<div class="banner">
<?php echo display_banner('랜덤'); ?>
</div>
update)
이렇게 저렇게 짜집기를 하다가 성공했습니다.
아래와 같이 적용하니 제가 원하는대로 되었습니다.
기본이 없어 수없는 수정을 하면서 터득하고 있어서 아래 코드가 맞는지 조차도 모르겠습니다.
수정을 해야 하는 부분이 있으면 알려주세요.
CSS 부분
/* 가운데 정렬 */
.outer { text-align: center; }
.inner { display: inline-block; }
.inner_img { display: inline-block; padding:10px; margin:10px;}
/* 가로가 1200이상일때 */
@media (min-width: 800px) {
.inner_img {width: 500px;
}
}
본문 부분
<div class='outer'>
<div class="inner_img">
<?php echo display_banner('랜덤'); ?>
</div>
</div>
현재의 문제는 이미지의 사이즈라기보다 이미지의 레이아웃을 모바일형과 PC형으로 제작 한 다음 style sheet 에서 미디어 쿼리를 이용하여 width값이 기준 이상 또는 이하일때 display:none 또는 displat:block 을 스위치 하는 방식으로 교체 해주는 형태가 좀더 이상적 일 것 같습니다.
bootstrap 을 사용하신다면 pc 이미지의 클래스명을 hidden-xs 모바일 이미지의 클래스명을 hidden-sm hidden-md hidden-lg 이런식으로 지정해서 스위치 할 수가 있습니다.
안녕하세요. 퇴근 후 차근차근 보고 있습니다,. 의견 감사합니다.
현재 미디어쿼리 강의 보고 왔습니다. 신기하네요. ^^
제작하시는 img 를 보니 800px / 800px 로 제작하시는거 같은데요.
pc 버전에서는 넓이 100% 로 맞추면 높이마저 커져버려 늘어날수 밖에 없습니다.
더군다나 크기를 작은 이미지를 넓이에 맞게 늘리면 깨질수 밖에 없어요.
pc 용을 따로 제작하셔서. img를 pc / mobile로 구분
@media 쿼리로 일정 넓이 아래로 내려가면. pc : display:none; / mobile : display:block
으로 사용하시는게 좋아보이네요 .
이렇게 번거롭게 하기가 귀찮으시다면.
img에 내부 엘리먼트 width 100%를 삭제하신뒤.
@media (max-width:600px){
img:width:100%
}
@media (min-width:601px){
img:display:block;
text-align:center;
}
이렇게 사용하여 중앙 정렬하셔야 할 것 같네요.
친절한 의견 감사합니다.
3분 모두의 의견을 차근차근 이해 하려고 노력하고 있습니다.
의견 주신 모든 분께 감사 드립니다.
3분의 의견을 조금씩 참고가 되어 모든 분들을 선택하고 싶지만...한분만 선택해야 되어 제이쿼리 공부를 할수 있게 동기부여를 해주신 뽕송이3님을 선택했습니다.
10년넘게 소스만 쳐다보기만해서 감만 살아서..기초를 공부해야 한다는 마음이 들게끔해준 좋은 기회였습니다. 핑계같지만 나이들어 회사다니며 코딩 공부를 첨부터 한다는게 쉽지 않네요.
모두 건강하세요~
