비주얼 스튜디오 코드⑭ 피그마이용해서 이미지크기 조절 ㅣ 콘텐츠 모양을 자유롭게 변형하기_2

w1920 

h500

layout grid > columns으로 변경

margin: 360으로 설정

줄자켜기

줄자로 가이드라인 넣어주기

alt+드래그+shift: 고정이동 + 복사

그리드 설정하기

사각형 10*10px / 사각형 400*200px 로 가이드라인 그려주기

아래이미지 참고

 

이미지 크기 설정해주기

file > place image

이미지 선택 export > 다른이름으로 저장

plugins_unsplash 생성

file > plugins > find more plugins > 검색창에 unsplash 검색 > unsplash Run 클릭

unsplash 플러그인을 통해 다양한 이미지를 사용할 수 있다.

 

position

이미지 박스 내려가는 동작 만들기

 

li안에 img와 span(박스)이 동등하게 있어야 한다.

position: relative; li가 기준이 되어야함

span이 position:absolute가 움직이는 아이

기준점 top:0 / left:0 으로 설정

 

#contents .notice ul li:hover span{

top: 130px}

마우스 올릴 시 동작을 해 기준점0에서 top:130px; 내려간다.(기준이 top이기 때문에 같이 사용)

반대로 올라갈 시는 #contenst .notice ul li span {top: 130px; / left: 0px;)

#contents .notice ul li: hover span{ top: 0px;}

이미지 안에서 박스가 움직이게 하려면

span과 img를 감싸고 있는 li에서 overflow:hidden; 명령을 넣어 주면 된다.

transform: translateY

#contents .gallery ul li span{ transform: translateY(-130px)}

#contents .gallery ul li:hover span{

transform: translateY(0px)}를 넣어준다.

span과 img를 감싸고 있는 li에 cursor: pointer; 와 overflow: hidden 명령어를 넣어주어 

이미지에 커서를 갖다대면 손가락모양이 되고 이미지 안에서 span이 움직임

Opacity

이미지 밝기 변화 주기 

img에 투명도를 줘서 hover명령시에 1(불투명)이 되도록 명령어를 사용한다