HTML/CSS - 이미지 정렬, 이미지의 일부만 노출

** f12 혹은 ctrl + shift + i 로 개발자 도구를 열 수 있다

 

1) div태그 내에 이미지 삽입 시 여백이 생기는 경우

• display: block; - (이미지는 기본적으로 inline)
• vertical-align: bottom; - (인라인 요소의 기준선을 bottom으로 설정)

 

2) 페이지 축소 시 메인 이미지가 중앙이 아닌 좌로 정렬될 경우

• display: block;
• margin: 0 auto;

 

3) 설정된 크기의 영역보다 큰 이미지를 삽입해야할 경우

1. overflow: hidden; - 영역 내 이미지만 보이게
   -> 영역 태그에 작성
2. transform: translate(0, 0); - 이미지 위치 조절
   -> 삽입된 곳 : (0, 0) 을 기준으로 + or - 부호로 조절