에어비앤비 클론 코딩 - styled component

이빨 부상으로 한동안 컴퓨터 앞에 앉지 못했다...

어마무시한 고통을 겪느라 그럴 새가 없었다,...

 

 

---

styled component 를 사용하여 css구성하기

 

원래는 따로 css파일에 있었던 것을

styled component 를 사용하여 만들어보았다.

const Button = styled.button`
  cursor: pointer !important;
  display: inline-block !important;
  margin: 0 !important;
  position: relative !important;
  text-align: center !important;
  text-decoration: none !important;
  width: auto !important;
  touch-action: manipulation !important;
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border-width: 1px !important;
  border-style: solid !important;
  outline: none !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  border: none;
  border-color: #FF385C;
  background: -webkit-linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%) !important;
  background: -moz-linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%) !important;
  background: linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%) !important;

`;

버튼이 제대로 나오는 것을 알 수 있다.

같은 페이지 같은 버튼도 이를 적용하여 만들었다.

 

---

반응형 웹 만들기 

반응형 웹을 만들 땐 @media로 마치 따로 css를 구성하듯 만들어주는 것 같다.

 

첫번째는 로고 바뀌기

 

기본일땐

어느정도로 넓이가 줄어들면

이렇게 로고만 남게 해야 한다.

 

Problem

둘 다 따로 svg파일로 있는데 줄이면 기존 로고가 사라지지 않는다.

아무래도 최소 단위대로 설정해두고 로고를 display:none처리를 해주지 않아서 그런 것 같다.

 

Solve

@media (min-width: 1128px) {
    .logoqwe {
        display: block;
    }

    .logodfh {
        display: none;
    }
}

@media (max-width: 1128px) {
    .logoqwe {
        display: none;
    }

    .main_header_inner {
        padding-inline-start: 40px;
        padding-inline-end: 40px;
    }
}

 

min-width값과 max-width값을 따로 두었다.

그러니까 넓이가 줄어들깨 기존 로고 까지 사라진다!

 

---

Issue

Gird를 반응형으로 적용하는 방법은 무엇일까.

 

Rroblem

기존 코드

.main_ctt_mdl {
  display: grid;
  margin-block: 8px 32px;
  grid-template-columns: repeat(4, 321.8px);
  grid-template-rows: 405.7px;
  column-gap: 24px;
  row-gap: 40px;
  grid-auto-rows: minmax(0, 1fr);
}

반응형으로 작동되지 않는다.

 

Solve

auto-fill은 행과 열의 크기에 맞게 repeat()함수 처럼 자동적으로 조정한다.

 

fr은 사용가능한 공간에 대한 비율을 의미한다.

 

minmax는 최솟값과 최댓값.

 

바뀐 코드

.main_ctt_mdl {
  display: grid;
  margin-block: 8px 32px;
  grid-template-columns: repeat(auto-fill, minmax(321.8px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(405.7px, 1fr));
  column-gap: 24px;
  row-gap: 40px;
  grid-auto-rows: minmax(0, 1fr);
}

 

하지만 비율이 일정하게 줄어들지 않는다...