[웹2]240307-17일차(relative, 이미지 잘라서 쓰기, vh예제)

 

[지정된 사이즈 벗어나는 이미지를  잘라쓰기]

 

- 이미지 박스를 사이즈 지정해서 만들어주고 overflow: hidden; 적용

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

 

- 원하는 방향으로 정렬

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

 

 

- 라이브러리 적용해서 텍스트 커스텀하기

p태그에 class 적용해서 라이브러리 적용

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

 

 

 

 

https://codepen.io/limyena/pen/GRLpYdZ

vh예제

[이미지 다운로드받아서 삽입]

 

(이미지 다운로드 사이트 : 언스플래쉬 -> 가공하지않고 사용하면 저작권 걸림)

- 사용할 이미지 다운로드후 새폴더 생성 -> 폴더 안에 다운로드 받은 이미지 넣기

 

 

 

- vs코드에서 이미지파일 생성된거 확인

- src에 img입력, 엔터

- 바로 나오는 이미지파일명 엔터

- 이미지 너비 높이 100% 적용

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

 

 

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

스크롤 없어졌고 이미지 잘린곳 없이 구현됐다.