css 해상도관련 문의드립니다.
본문
배경이미지가 아닌 div에 이미지가 있습니다.
<div id="subbanner">
<ul class="subtitle">
<h2>브랜드스토리</h2>
<h4>천연 웰빙야채와 국내산 재료만을<br />고집합니다</h4>
</ul>
<?php 이미지들어감 ?>
</div>
-----------------------------
#subbanner img{
max-width: 100%;
float: left; width: 100%;
-webkit-transition-property: width;
-webkit-transition-duration: .3s;
position: relative;
left:0px;
top:0px;
z-index: 1;
}
#subbanner .subtitle {
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
text-align:right;
color:#fff;
width: 100%;
right: 30px;
top: 95px;
position:absolute;
z-index:5;
}
예를들어 이런 구조라고 했을때 현재 해상도에 따라서 이미지가 줄어들고
늘어나고 합니다.
1. 제가 하고싶은건 해상도가 일정크기로 줄어들었을때 이미지가 더이상
줄어들지 않게 하고싶습니다~
2. subtitle에 들어가는 텍스트가 해상도와 상관없이 일정위치에서 고정되고
해상도가 줄어들었을때는 텍스트크기가 같이 줄어들게 하고싶습니다.
어떻게 수정해주면 될까요?
답변 1
반응형을 사용하셔야 할 것 같네요.
@media 속성과 min-width, max-width 등 속성을 이용해 해상도 크기를 지정 후,
이미지에 대해서 min-width 설정해주시면 될 것 같네요.
해상도에 상관없는 부분은 @media 속성과 min-width, max-width 밖에 정의하고,
해상도에 따라 변하는 부분만 위 코드 안에서 정의해주시면 됩니다.
자세한 사용법은, 해당 키워드로 구글링 ^^
아 @media 로 하는 방법으로밖에 할수 없는거죠 ㅠㅠ
고맙습니다//
제이쿼리나 자바스크립트 같은 걸로 하는 방법도 있는 걸로 아는데, 이건 저도 잘..^^;;
