🎨CSS | <img> 하단 빈공간, <area>, <map>, 컨텐츠 비율 유지, z-index, Position

<img> 하단에 빈 공간 생기는 경우

• <img> 사용하면 밑에 여백 존재
• <img> 는 인라인 요소라 세로 정렬이 글자의 baseline에 맞춰져서 밑에 여백이 생김
• 아래 방법으로 이미지가 위쪽 라인에 정렬되어 여백없이 딱 맞게 들어감

img {
	vertical-align: top;
}

<area>, <map>

• 이미지에 부분 선택해서(약간 누끼따는 느낌) 해당 부분 클릭하면 설정한 링크로 넘어감
  area, map 사용한 코드로 변환 사이트

반응형에서 컨텐츠 비율 유지하기

1. aspect-ratio

• 반응형으로 가로, 세로 비율 정해줌

/* 가로 200px, 세로 350px 로 컨텐츠 만들고 반응형에서도 비율 유지 */
div {
	width: 200px;
	aspect-ratio: 200 / 350;
    /* 보통 배경이 이미지인 경우 이미지 중앙 중심으로 꽉 차게 보이게 설정*/
    object-fit:cover;
}

/* 가로는 부모의 크기와 같고 반응형에서도 1:1 정사각형 비율 유지 */
img {
	width: 100%;
    aspect-ratio: 1/1;
}

2. padding %값 이용

• padding-top or padding-bottom 을 이용해 부모의 가로에 대한 세로 비율 결정

예시

<div class="parent">
  <div class="thumbnail">
    <img src="https://github.com/stronger-deer/myBlog/blob/main/img/main-visual.jpg?raw=true" alt="한 성인이 스케이트 보드를 타고있다" />
  </div>
</div>

.parent {
	width: 50%;
}

.thumbnail {
	position: relative;
    height: 0;
    /* parent의 width 속성값 기준으로 padding-top(세로) 비율 정함 */
    /* 50% 의미 : 가로:세로 비율 2:1 */
    padding-top: 50%;
    overflow: hidden;
}

.thumbnail img {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

결과

---

z-index

• 값이 클수록 앞에 위치
• 부모는 z-index 값이 커도 자식 앞에 위치할 수 없음
• 자식은 음수 값으로 부모 뒤에 위치할 수 있음
• 유지보수 쉽게 하기 위해서 100단위로 할당

---

Position

static

• 기본 상태로, 웹 문서의 흐름에 따라 배치

relative

• static일 때 기본 위치 기준으로 어디에 위치하는지 top, right, bottom, left 값으로 지정
• 다른 콘텐츠의 위치에 영향 X

absolute

• 부모의 위치 기준으로 어디에 위치하는지 top, right, bottom, left 값으로 지정

relative vs absolute

기준점의 위치 다름

fixed

• 브라우저 화면 기준으로 어디에 위치하는지 top, right, bottom, left 값으로 지정
• 스크롤이 움직여도 고정
  -보통 맨 위로가기/맨 밑으로 가기 버튼 등에 이용

sticky

• 부모의 위치 기준으로 어디에서 고정될 지 top, right, bottom, left 값으로 지정
• 스크롤이 움직여도 고정되는 위치에 도달한 경우 더이상 움직이지 않고 고정

참고사항

부모 박스 기준으로 고정된 위치에 자식 박스를 놓고 싶을 때

• 부모 박스 position: relative;,
  자식 박스 position: absolute; 주고 부모 박스 기준으로 어디에 위치할 지 값 지정