2021-05-14 (32일차) 큰 이미지 하나, 이미지 부가설명 넣기, hover시 이미지 어두운 효과, 이미지 확대 효과 transform:scale, 효과에 시간걸기 transition, css 특수효과,

141강~144강

 

- 큰 이미지 하나만 넣기

  emmet : section.section.section-0>div.con>div.img-box>img

 

- 이미지 리스트의 이미지에 부가설명 넣는 방법 (작품명, 날짜, 제작기간 등)

  emmet : section.section.section-1>div.con>div.work-list-box>ul.inline-grid>li

  >div>(div.img-box>img)+div.work-name{작품명}+div.work-date-period{날짜, 제작기간}

  .work-list-box > ul > li > div > (.work-name, .work-date-period)

  {margin-top:5px; text-align:center;}

 

 

 

- 마우스 올리면 이미지가 어두워지는 방법

  1) div.img-box의 자식이자 img의 형인 'div.bg' 1개 넣어주기

  div.img-box>div.bg+img

 

  2) 위에 넣은 div.bg에 absolute값을 줘서 img위에 위치하기

  .work-list-box > ul > li > div > .img-box > .bg

  {background-color:rgba(0,0,0,0); width:100%; height:100%; position:absolute; top:0; left:0;}

 

  3) 유령div를 .img-box에 속하게 하기

  .work-list-box > ul > li > div > .img-box

  {position:relative;}

  4) 각각 li에 hover시 이미지가 어둡게 변하게 하기

  .work-list-box > ul > li:hover > div > .img-box > .bg

  {background-color:rgba(0,0,0,0.7);}

 

  5) 어둡게 변화하는 시간 걸기 (hover에 걸으면 마우스 올릴 때만 적용됨)

  .work-list-box > ul > li > div > .img-box > .bg에다가 {transition:background-color 1s;} 추가하기

 

 

 

- 마우스 올리면 이미지가 확대되는 방법

  1) 이미지를 커지게 하기

  {width:140%;}값을 주면,커지긴 하지만 한 쪽으로만 커짐

  {transform:scale(1.4);}값을 줘야, 중심축을 기준으로 하여 커짐

  ↓

  .work-list-box > ul > li:hover > div >.img-box > img

  {transform:scale(1.4);}

 

  ㄴ 문제점 : 크기가 커지면서 .img-box를 넘어가 여백을 침범함

  ㄴ 해결책 : .img-box에다가 침범하는 범위를 숨기라고 명령해야함

 

  2) 여백을 침범하는 이미지를 가려주기

  .work-list-box > ul > li > div > .img-box {overflow:hidden} 추가

 

  3) 이미지가 커지는 시간 걸기 (올릴 때만이 아닌, 땔 때도 같이 적용하기 위해 hover 사용X)

  .work-list-box > ul > li > div > .img-box > img

  {transition:transform 1s;}

 

 

 

- 이미지에 어둠효과와 확대효과 동시에 줬을 때 어둠효과가 안 보이는 이유

  absolute값을 준 어둠효과가 z축 가장 위에 위치하기 때문에 보여야 하는 게 정상이지만,

  transform의 특수효과 때문에 확대효과가 z축 가장 앞으로 나오게 됨

 

- z-index (유령들간의 우열)

  보이는 우선순위를 정해줄 수 있는 값

  ex){z-index:1;}

 

- 이미지에 어둠효과와 확대효과 동시에 주는 방법

  1) 뒤에 위치하는 어둠효과에게 z축 우선순위값 주기

  .work-list-box > ul > li > div > img-box >  .bg {z-index:1;}

 

  2) 앞에 위치하는 확대효과를 뒤쪽으로 위치하게 하기

  .work-list-box > ul > li >div > .img-box > img {z-index:-1;}

  ㄴ 하지만, 변화 없는 이유 : z-index는 absolute, relative에서만 작동함 (position:static에서는 작동X)

  ㄴ 해결책 : {position:relative;}값 추가하기

 

 

 

- 이미지에 마우스 올리면 텍스트 나타나는 방법

  1) div.img-box의 자식이자 div.bg의 동생이고, img의 형인 'div.text{내용}' 만들어주기

  

  2) absolute값(유령화)를 줘서 가장 앞에 위치하게 하기

  .work-list-box > ul > li > div > .img-box > .text

  {position:absolute;} =유령값을 위해

  {top:50%; left:50%; transform:translateX(-50%) translateY(-50%);} =유령값 가운데정렬을 위해

  {color:white; border:3px solid white; border-radius:10px; padding:10px; font-weight:bold;} =꾸미기 위해

  {transition:opacity 1s;} = 텍스트 나타나는 시간 걸기 위해

 

  3) 텍스트 평소에는 안 보이게 하기

  {opacity:0;}주기

  ※ opacity의 기본값 : 1

 

  4) 이미지에 마우스 hover시 텍스트 나타나게 하기

  .work-list-box > ul > li:hover > div > .img-box > .text

  {opacity:1;}