[Day5] 이미지 태그와 position, z-index

💀TIL

• img 태그
• position
• z-index

---

🕘img

<img src="chilli.jpg" alt="위니브 다람쥐 캐릭터 칠리" >

• src : 경로
• alt : 대체 텍스트. 이미지 설명
  • 시각장애인을 위한 스크린리더를 지원
  • 이미지를 대체하는 텍스트가 중복이면 alt="" 를 빈 값으로 둔다.

😶‍🌫️ 이미지 하단에 빈 공간이 생긴다!

• img가 인라인 요소여서 발생한다.
• 아래와 같은 초깃값을 넣어주면 된다.

img{
	vertical-align:top;
}

 

🤨 이미지 비율 유지하기

• aspect-ratio : 기본 가로세로 비율을 설정한다.

img{
  width:300px;
  aspect-ratio: 2 / 1;
  object-fit:cover;
}

 

• padding % 값 이용
  • padding-top, padding-bottom % 값은 부모의 가로 너비를 기준으로 한다.

.thumbnail {
  position: relative;
  height: 0;
  padding-top: 50%; 
  overflow: hidden;
}

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

---

🕚 position

• static
  • 기본값
• relative
  • 상대적 위치
  • 다른 콘텐츠들의 위치에 영향을 미치지 않는다.
• absolute
  • 조상의 위치를 기준으로 자리 잡기
  • static을 제외한 position 속성값을 가진 가장 가까운 조상
  • 일반적인 문서 흐름에서 자기 요소를 제거하고 자리를 잡는다.
• fixed
  • 브라우저 화면(뷰포트) 를 기준으로 위치 지정
  • 스크롤을 내리거나 올려도 화면의 같은 위치에 고
• sticky
  • 조상의 위치를 기준으로 자리 잡

---

🕜 z-index

• position이 static 외의 값을 가진 박스에 대해 z축 위치를 지정한다.
• 값이 클수록 제일 위로 배치
• 부모는 자식 앞으로 나올 수 없다.
• 자식은 음수값을 주어 부모의 뒤로 갈 수 있다.

---

🕒 카드 UI 만들기 실습

다음과 같은 카드 ui를 만들어보자. 왼쪽 기준

 

• <a>로 카드를 눌렀을 때 링크로 이동할 수 있도록 내용을 감싸준다.
• border-radius로 테두리를 둥글게 하면 img가 네모라서 삐죽 빠져나가는데 이걸
  overflow:hidden; 속성으로 숨겨준다.
• img는 aspect-ratio로 288/196 비율을 맞춰준다. 
  object-fit:cover; 속성으로 콘텐츠 박스를 꽉 채운다.
• vertical-align: top; 속성으로 이미지와 글 사이의 여백을 제거한다.

 

😎 추가 헷갈리는 속성들

 

 

• inset
  • 가로값과 세로값이 없어도 부모 노드로부터 일정 간격을 두고 위치한다.
  • https://developer.mozilla.org/en-US/docs/Web/CSS/inset

inset - CSS: Cascading Style Sheets | MDN

 

• overflow
  • 요소의 콘텐츠가 너무 커서 블록 서식에 맞출 수 없을 때의 처리법이다.
  • visible 그대로 보이기
  • hidden 숨기기
  • scroll 스크롤 형태로 보이기
  • https://developer.mozilla.org/ko/docs/Web/CSS/overflow

overflow - CSS: Cascading Style Sheets | MDN

 

 

• white-space
  • 공백 문자를 처리하는 방법 지정
  • https://developer.mozilla.org/ko/docs/Web/CSS/white-space

white-space - CSS: Cascading Style Sheets | MDN

 

• vertical-align
  • inline 또는 table-cell box에서의 수직 정렬을 지정한다.
  • 블록라인에서는 못쓴다.
  • https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align

vertical-align - CSS: Cascading Style Sheets | MDN

 

• background-clip
  
  • 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 정한다.
  • border-box까지, padding-box까지, content-box까지 ...etc
  • https://developer.mozilla.org/ko/docs/Web/CSS/background-clip

background-clip - CSS: Cascading Style Sheets | MDN

 

• box-sizing
  • 요소의 너비와 높이를 계산하는 방법을 지정한다.
  • 크기를 설정할 때 테두리나 안쪽 여백을 고려해야 하는데 이 속성을 사용해 방식을 바꿀 수 있다.
  • content-box 는 요소의 너비를 100px로 설정하면 콘텐츠 영역이 100px 너비를 가지고, 테두리와 안쪽 여백은 이에 더해진다.
  • border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려한다.
    너비를 100px로 하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄면서 너비 100px을 유지한다.
    대부분 이 경우가 크기 조절이 쉽다.
  • https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

box-sizing - CSS: Cascading Style Sheets | MDN

---

 

🙉 Review

• 이미지 태그 들어서면서 우다다다 오는 느낌이다.
  flex grid 들어가기 전까지는 쉬울 줄 알았는데 생각보다 고려해야 할 게 많다.
  css선택자를 사용하는 방법을 좀 더 연습해야겠당