[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : 2주차 과제3️⃣

m_ngyeong·2023년 6월 18일
IT개발캠프React개발자부트캠프리액트리액트캠프부트캠프스나이퍼팩토리웅진씽크빅유데미인사이드아웃프로젝트캠프프로젝트캠프후기
0

[유데미x스나이퍼팩토리] 10주완성 프로젝트 캠프 React

목록 보기
10/28
post-thumbnail

2주차 과제3️⃣

Requirement

Coding

1920px 프레임을 기준으로 레이아웃을 잡았다.

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

body {
  margin: 0;
  padding: 0;
  font-family: "Spoqa Han Sans Neo", "sans-serif";
}
a {
  text-decoration: none;
}

/ navbar /

.navbar {
  margin: 0 auto;
}
.navbar {
  /* 수직 중앙 정렬하기 */
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.navbar img {
  width: auto;
  height: 25px;
  object-fit: cover;
}
.nav-link {
  margin: 10px;
  font-size: 12px;
  font-weight: 500;
}
#btn-contact {
  color: #333d4b;
}
#btn-started {
  border-radius: 4px;
  background-color: #0e7159;
  color: white;

  padding: 0.5em 1.5em;
}

/ header /, / main /

/*        header       */
#header-background-img {
  width: 100%;
  height: 100%;
  filter: brightness(0.2);
  position: relative;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
  color: white;
}
.inner h1 {
  font-size: 3em;
}
.inner a {
  color: white;
  font-size: 1em;
  font-weight: 200;
}
/*         main        */
main {
  margin: 5.5em 0;
}

/ section /

section {
  text-align: center;
}
.title,
.btn-page-move {
  color: #0e7159;
}
.title {
  font-size: 2.5em;
}
.btn-page-move {
  font-weight: 600;
}

.service,
#app-service,
#service-price {
  margin-bottom: 9em !important;

/ section1,2,3 /

.contents {
  display: grid;
  grid-template-columns: repeat(3, 270px);
  place-content: center;
  column-gap: 2.5em;
  row-gap: 2.5em;

  margin: 1em auto;
}
.service-contents {
  text-align: left;
}
.service-contents img {
  width: 270px;
  margin-bottom: 1em;
}
.contents-title {
  font-size: 1.2em;
  font-weight: 600;
  color: #333d4b;

  width: 10em;
}
.service-contents p {
  color: #6b7684;
  font-size: 0.9em;
}

#section2 div,
#section3 div {
  width: 100%;
}

#section3 {
  margin-top: 4em;
  margin-bottom: 4em;
}
.number {
  font-size: 1.4em;
  font-weight: 400;
  color: #0e7159;

  margin-bottom: 0.5em;
}

/ section4 /

#app-service {
  margin: 0 auto;
}
.app-service-contents {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: left;

  margin-bottom: 7em;
}
.app-service-contents img {
  width: 300px;
}
.app-service-explain {
  width: 300px;
}
.app-service-title {
  font-size: 1em;
  font-weight: 600;
  color: #0e7159;

  margin-bottom: 0.8em;
}
.app-service-subtitle {
  font-size: 1.8em;
  font-weight: 600;
  color: #333d4b;
}
.app-service-explain p {
  color: #6b7684;
  font-size: 0.9em;
  line-height: 1.5em;
}

/ section5 /

#service-price {
  margin: 0 5em;
}
.service-price {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: left;

  margin-bottom: 1.7em;
}
.price-box {
  width: 270px;
  height: 100%;
  background: #f2f3f4;
  border-radius: 16px;

  margin: 0 1em;
  padding: 1em;
}
.price-title {
  font-size: 1.2em;
  font-weight: 500;
  color: #333d4b;
}
.price-explain,
.pricing-policy {
  color: #6b7684;
  font-size: 0.9em;
}
.price {
  color: #0e7159;
  font-size: 1.8em;
  font-weight: 600;

  margin-bottom: -0.2em;
}
.price-box > button {
  width: 100%;
  background: #0e7159;
  color: #fff;
  border: none;
  border-radius: 8px;

  margin-top: 0.5em;
  padding: 1em 3em;
}

/ section6 /

#review {
  overflow: hidden;
  position: relative;
}
.review-contents {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;

  margin-inline-start: -7em;
  margin-inline-end: -7em;
  margin-bottom: 1.7em;
}
.linear-gradient {
  width: 100px;
  height: 300px;
}
.left-box {
  background: linear-gradient(90deg, #fff, #ffffff5b);

  position: absolute;
  top: 130px;
  left: 0;
}
.right-box {
  background: linear-gradient(270deg, #fff, #ffffff5b);

  position: absolute;
  top: 130px;
  right: 0;
}
.review-box {
  width: 600px;
  height: 230px;
  background: #f2f3f4;
  border-radius: 16px;
  overflow: hidden;

  margin: 0 1em;
  padding: 2em;
}
.profile {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.profile-img {
  width: 50px;
  height: 50px;

  margin-right: 1em;
}
.user-name {
  color: #333d4b;
  font-size: 1em;
  font-weight: 600;

  margin: 0;
}
.review-title {
  color: #6b7684;
  font-size: 1em;

  margin: 0;
}
.review {
  color: #6b7684;
  line-height: 2em;

  margin-bottom: 0;
}

/ section7 /

#started {
  background-color: #0e7159;
  height: 500px;
  position: relative;
}
#started > div {
  /* 수직 중앙 정렬하기 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#started h1 {
  color: white;
  font-size: 3em;
}
#btn-bottom-started {
  background-color: white;
  border: none;
  border-radius: 8px;
  color: #0e7159;
  font-size: 1em;
  font-weight: 600;

  padding: 1em 1.5em;
}

/ footer /

footer {
  padding: 2em 20em;
}
#footer > div {
  color: #333d4b;
  font-size: 1em;
  font-weight: 600;
}
#footer > p {
  color: #6b7684;
  font-size: 0.8em;
  line-height: 1.8em;
}

/ media query 1024px /

  • 1024px 레이아웃 구성과 768px 레이아웃 구성이 거의 거의 동일하여 1024px를 기준으로 media query를 작성하였다.
@media screen and (max-width: 1024px) {
  .inner {
    transform: translate(-50%, -150%);
  }
  .inner h1 {
    font-size: 2em;
  }
  .title {
    font-size: 2em;
  }
  .contents {
    display: grid;
    grid-template-columns: repeat(2, 270px);
  }
  .app-service-contents {
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
  }
  .reverse {
    flex-direction: column-reverse;
  }
  .alarm-img {
    display: none;
    visibility: hidden;
  }
  .service-price {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-content: center;
    column-gap: 3em;
    row-gap: 3em;

    margin: 3em auto;
  }
  #started h1 {
    font-size: 2em;
  }
  .review-contents {
    margin-inline-start: -20em;
    margin-inline-end: -20em;
  }
  .left-box,
  .right-box {
    background: #ffffff00;
  }
  footer {
    padding: 2em 10em;
  }
}

/ media query 480px /

@media screen and (max-width: 480px) {
  .inner {
    transform: translate(-50%, -260%);
  }
  .inner h1 {
    font-size: 1.3em;
  }
  #btn-sloving {
    display: none;
  }
  .title {
    font-size: 1.2em;
    margin-bottom: 2em;
  }
  .contents {
    display: grid;
    grid-template-columns: repeat(1, 270px);
  }
  .service-price {
    display: grid;
    grid-template-columns: 1fr;
  }
  #started h1 {
    font-size: 2em;
  }
  footer {
    padding: 2em 2em;
  }
}

Result

Frame 1920px

Frame 1024px, 768px

Frame 480px

용량 한계로 화질이 낮음

GitHub

개인 과제 제출

🫠 느낀점

CSS 작업을 하면서 HTML 태그를 수정해야 할 부분 꽤 있었다. 다시 한번 더 레이아웃의 중요성을 깨달았다. 네이밍은 너무 어려운 것 같다. 유지보수 측면에서 어떻게 네이밍해야 효율적인지 모르겠다...😢
em 단위와 같은 CSS에서 제공해 주는 반응형 속성을 사용하여 코드를 작성하였기에 media query를 사용할 작업할 부분이 적었다. Flexbox와 Grid를 이용하여 레이아웃을 구성하였는데 생각대로 되지 않아 골머리를 썼다. 좌, 우 여백을 동일하게 적용하여 Flexbox와 Grid를 어떻게 배치할 수 있는지 아직 감이 잘 안 잡힌다. 솔직히 말하면, 코드를 작성할 때, 소위 말하는 야매로 보이는 것만 비슷하게 코드를 짰다. 이런 방식 말고 어떤 상황에서든 동일하게 적용될 수 있게 레이아웃을 구성할 수 있는지 알고 싶다. 조금 더 레이아웃 구성에 대해 공부가 필요하다. 여러 웹사이트(네이버, 유튜브, 에이비엔비..등)의 구조를 하면 정리해 보아야겠다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

profile
m_ngyeong
사용자 경험 향상과 지속적인 성장을 추구하는 프론트엔드 개발자 ʚȉɞ
이전 포스트

[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : Javascript 1

다음 포스트

[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : Javascript 2

0개의 댓글