[230306] CSS Box Model | display | 이미지 태그 | 이미지 비율 유지 | position

오늘의 꿀팁

💡 관련 도서들 책상에 많이 두기! 보기도 하기..ㅎㅎ
나의 능력과 부지런함을 어필할 수 있다

오늘은 실습을 많이 진행해서 시간이 후딱 갔다!!
오늘도 새로운 css를 많이 알게 되었다😊 파도파도 끝이 없는 css..ㅎ 정복해주겠어..!!!

🎨 CSS Box Model

background(단축속성)

• background-color background-image background-repeat background-position / background-size background-origin background-clip background-attachment

background: red url("image.png") no-repeat 0 0 / auto 100% padding-box border-box scroll

• background-attachment
  • fixed: 뷰포트에 고정
  • local: 요소 콘텐츠에 대해 고정. 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤된다
  • scroll: 배경 요소 자체에 대해 고정. 요소에 스크롤이 존재해도 배경은 함께 스크롤 되지 않는다
• background-clip: 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할지 지정한다
  • 배경을 잘라낸다
  • border-box
  • padding-box
  • content-box
  • text
• background-origin : 배경 위치 시작점을 결정한다
  • border-box
  • padding-box
  • content-box
• background-color
• 그라디언트
  • linear-gradient()
  • radial-gradient()
  • conic-gradient()
• background-image
• background-position
• background-repeat
  • repeat
  • no-repeat
  • repeat-x
  • repeat-y
• background-size
  • contain
  • cover
  • 별도 크기 지정

💡 이미지가 페이지의 문맥상 정보를 제공하거나, 이미지 최적화 등의 역할을 해야 한다면
배경이 아닌 <img> 태그를 사용하는 것을 권장한다

box-shadow

• offset-x | offset-y | blur-radius | spread-radius | color
  border처럼 만들 수도 있다(box-shadow: 0 0 0 5px rgb(0,0,0))
• inset | offset-x | offset-y | color

opacity

0: 투명 - 1: 불투명

🎨 display

• block
• inline
• inline-block
• flex
• grid
• none: 해당 요소 및 해당 하위 요소가 사라지고, 스크린리더에도 읽히지 않는다(접근성 트리에서 해당 요소가 제거된다)
  ex) 모달, 메뉴

📝 이미지

img

이미지 하단에 생기는 빈 공간은 <img>가 인라인 블록 요소라서 발생하는 현상이다
<img>의 세로 정렬이 글자의 baseline을 따르기 때문이다
img {vertical-align: top;}이나 display: block;으로 해결할 수 있다

area, map

figure, figcaption

이미지에 캡션을 달고 싶을 때 사용한다
이미지와 캡션이 연결되도록 <figure>와 함께 쓸 수 있다
이미지뿐만 아니라 코드 조각, 인용문 등에도 사용 가능하다

🎨 이미지 비율 유지하기

aspect-ratio

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

기본 가로, 세로 비율을 설정한다
IE에서는 적용되지 않는다

padding %값 이용하기

<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: 100&;
}

.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;
}

padding의 top과 bottom % 값은 부모의 세로가 아닌 가로 너비를 기준으로 한다
ex) 부모요소의 너비가 1200px이라면 자식요소의 padding-top:50%의 값은 600px

🎨 position

• static
• relative
  자신이 있어야 하는 위치를 기준으로 자리를 잡는다
• absolute
  조상의 위치(static을 제외한 position 속성값을 가진 가장 가까운 조상)를 기준으로 자리를 잡는다
• fixed
  브라우저 화면(뷰포트)을 기준으로 자리를 잡는다
• sticky
  조상의 위치(static을 제외한 position 속성값을 가진 가장 가까운 조상)를 기준으로 자리를 잡는다
• z-index
  부모가 z-index를 높여 자식 앞으로 나올 수 없지만 자식은 z-index를 음수값으로 주어 부모 뒤로 갈 수 있다
  유지보수를 위해 100 단위로 작업하면 좋다

💡 position: absolute;, position: fixed;, float가 지정된 요소는 display: flex, display: inline-flex;를 제외하고 display: block;으로 변경된다