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;}
댓글