[html&css] 브라우저 크기에 따라 사이즈 자동 조절되는 이미지 div 배너

 

보통은 큰 슬라이드 배너를 많이들 만드시지만 용도에 따라 갤러리 형식의 배너를 만들어야 하는 경우도 있습니다. 제가 만들고 싶었던 배너에 몇 가지 조건이 있었습니다.

 

1. 3*2 구조의 이미지 배너.

2. 브라우저 크기에 따라 배열과 정렬을 유지하며 이미지가 잘리지 않고 자동으로 축소되고 확대될 것.

3. 이미지 위에 마우스 오버시 제목, 요약 설명, 보러 가기 버튼, 이미지 오파시티가 동시에 나타나기.

 

See the Pen xxZZBog by kindkimyoung (@kindkimyoung) on CodePen.

 

구조는 이렇습니다.

outer-div inner-div들을 감싸는 역할

inner-div 이미지, 제목, 요약설명, 보러 가기 글씨를 감싸는 역할

<div class="outer-div">

<div class="inner-div" style="background:url(.jpg) no-repeat center/cover;" >
 <div class="inner-hover">
    <div class="font-div"><span class="name-span">제목ㅣ 카테고리</span><br></div>
    <div class="font-div"><span class="inner-span">요약 설명</span><br></div>
    <div class="click-div">
     <span class="inner-span-view">
      <a href="#">보러가기></a>
     </span>
    </div>
 </div>
</div>

.
.
.

</div>

 

 

사이즈는 자동으로 변해야 하기 때문에 단위는 %와 auto, vw를 사용하였습니다.

outer-div

width:100%

height:auto (width값 기준 높이값 자동)

inner-div

width:30% (outer-div의 30% 로 3개 정렬)

height:30vw (이미지의 비율이 1:1이기 때문에 inner-div의 width 값 기준 동일한 값으로 30vw ) 

inner-hover-div

width,height: 100% (트랜지션을 위해)

.outer-div{
  width:100%;
  height:auto;
  background:#212121;
  text-align:center;
  padding-top: 10%;
  padding-bottom: 10%;
  margin:0;
  font-size:0;
}
  
.inner-div{
  display:inline-block;
  width:30%;
  height:30vw;
  margin:0;
}
 
.inner-hover{
  width:100%;
  height:100%;
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  transition-delay: 50ms
  }

 

 

.outer-div{
  width:100%;/*기준이 되는 div*/
  height:auto;
  background:#212121;
  text-align:center;/*내부 속성은 모두 center정렬. inner-div를 중앙에 위치하게 함.*/
  padding-top: 10%;
  padding-bottom: 10%;
  margin:0;
  font-size:0;
}
  
.inner-div{
  display:inline-block;/*inner-div를 늘어 놨을 때 좌측에 딱 붙어서 정렬*/
  width:30%;/*outer-div 100%기준 30% 6개의 div를 사용시 자동으로 3*2 배열*/
  height:30vw;/*width와 1:1 비율 자동 유지*/
  margin:0;
}
 
.inner-hover{
  width:100%;/*inner-div 안에 100% 어느 영역이든 hover시 트랜지션*/
  height:100%;
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  transition-delay: 50ms
  }
    
.font-div{
  text-align:left;/*outer-div의 center 속성이 싫어서 span을 font-div로 감쌈*/
}

.click-div{
    position: relative;
    text-align:left;
    top:17vw;/*inner-div 기준 top으로부터 17vw에 위치, 화대 및 축소에 따라 위치 자동 조절*/
    }

정렬은 inner-div들이 딱 붙어서 중앙에 정렬되길 바랐습니다.

 

outer-div

text-align:center (outer-div 안의 모든 요소 중앙 정렬, 이로써 inner-div 3*2가 중앙에 위치)

inner-div

display:inline-block (outer-div안에서 inner-div들 좌측으로 공백 없이 붙어 정렬)

font-div, click-div

text-align:left (outer-div에서 받는 center 속성을 무시하고 내용들이 left 정렬. center 정렬을 원하신 다면 span속성을 div로 감싸지 않으셔도 outer-div로부터 영향을 받아 중앙정렬 됩니다.)

 

 

hover 기능을 img style 따로, span style 따로, 주면서 트랜지션을 동시에 일어나도록 하자니 모든 속성을 각각의 div로 감싸면서도 이 모든 것을 한번 더 감쌀 inner-hover-div가 반드시 필요했습니다. '동시에'발생한다는 이유 때문에 움직임을 필요로 한 div들을 또다시 하나로 묶은 샘입니다. 

 

각각의 inner-div에 인라인 style로 원하는 이미지를 background url을 사용하여 넣고, 속성에 no-repeat(배경 이미지 반복하지 않음) center/cover(중앙 기점으로 div안에 꽉 차게)를 주었습니다.

 

트랜지션 속성은 opacity를 이용하여 글씨를 나타났다 사라지게 하고 이미지의 투명도를 낮추는 간단한 속성입니다.

 

이미지 사이즈와 폰트 사이즈가 div의 배열을 유지하며 브라우저 사이즈에 따라 자동으로 축소, 확대되는 디자인을 생각보다 많이 사용하시지 않는 것 같습니다. 미디어 쿼리로 지정된 min, max width를 사용하시기 때문에 그렇다고 생각됩니다. 하지만 이는 일정 가로사이즈 이하이거나 이상에서 배열이 변경되거나 브라우저 사이즈가 지정된 사이즈보다 작을 경우 이미지가 잘려 보인다던가 하는 경우가 있기 때문에 그러한 부분이 싫어 만들게 되었습니다.

 

이와 같은 내용이 필요하신 분이 계신다면 도움이 되셨으면 좋겠습니다.