유용한 css property 정리

How to get div height to auto-adjust to background size?

💫 background-size의 ratio를 유지하며 height: auto로 설정하기

<!-- html -->
<div class="wrapper">
  <div class="main">something</div>
</div>

.wrapper {
  width: 100%;   /* whatever width you want */
  display: inline-block;
  position: relative;
  background-size: contain;
  background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
  margin: 0 auto;
}
.wrapper:after {
  padding-top: 75%; /* 600/800 (height/width) */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: black;
  text-align: center;
  margin-top: 5%;
}

Center one flex item and bottom-align another

It centers the .box1 element in the remaining space.

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.box1 {
    margin: auto; // (*)
}

<div class="container">
  <div class="box1"></div>
  <span class="box2">Text</span>
</div>

Child div의 너비에 따라서 Parent div너비 정하기

• Child div은 스크롤 가능

<Wrapper>
  <MapWrapper>
  <Map />
  </MapWrapper>
</Wrapper>

export const MapWrapper = styled.div`
  overflow-x: scroll;
  width: 100%;
  display: flex;
  justify-content: center;
`;

export const Map = styled.div`
  overflow: hidden;
  display: inline-flex;
  margin: 3rem 0;

  svg {
    display: inline-table;
  }
`;