[CSS] 반응형, display:flex, align-items, justify-content

오늘 Netflix 홈페이지를 만들면서 막혔던 부분에 대해 정리해보고자 한다.

잊어먹지 말자!!

 

[MoviePage.jsx]

 

해상도를 줄였을때 (900px쯤 부터) 저 Dropdown박스옆에 공간이 남았다. (참고로 Bootstrap <Row>, <Col> 사용함)

보아하니 width-max값이 700px정도로 고정값으로 들어가있었다.

@media (min-width: 768px) {
  .main-container {
    max-width: 100%;
  }
}

<Row>태그에 className을 주고 CSS파일에서 넣은 코드.

 

[MoviePage.jsx]

오른쪽 끝에 있는 삼각형이 글씨랑 붙어있고 크기도 작아서 수정하고 싶었다.

.dropdown-box {
  width: 100%;
  border: 1px solid white;
  background-color: black;
  font-size: 1.3rem;
  text-align: left;
  align-items: center;
  padding: 10px 15px 15px;
  display: flex;
  justify-content: space-between; /* 글씨와 삼각형 공간 띄우기 */
}

.dropdown-box::after {
  font-size: 2.3rem; /* 삼각형 크기 키우기 */
  margin-left: 10px; /* 삼각형과 텍스트 사이에 공간 추가 */
}

 

 

[MovieDetailPage.jsx]

아무리 패딩을 먹여도 ALL글씨가 가운데로 이쁘게 오지 않았다.

.all-icon span {
  color: black; 
  font-weight: bold; 
  font-size: 14px;
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  height: 100%; */
}

저 동그란 div안에 <span> 태그를 넣고 그 태그에 css를 줬다.

<span>태그는 inline태그이기 떄문에 block태그인 div처럼 이쁘게 정렬이 되지 않는다.

그래서 display flex를 주고 justify-content:center로 양옆기준 가운데로 가운데 정렬, align-items:center로 위아래 기준으로 가운데 정렬을 해주었다.

 

CSS는 어려워