[1주차 기본/심화 과제] 웨비의 사진관 😋 #1

simeunseo · 2023-10-12T19:00:32Z

배포링크

✨ 구현 기능 명세

기본 과제
- header
- section
  - flex를 사용하여 일정한 간격으로 배치
  - width 값을 벗어나면 가로로 스크롤
- nav
  - 목차 hover시 underline과 색상 변경
  - 목차를 클릭하면 해당 목차가 있는 곳으로 이동
- section (img)
  - 목차는 sticky로 화면 상단에 닿으면 고정
  - 첫번째 섹션 : flex를 이용해서 같은 크기의 사진들로 나열
  - 첫번째 섹션 : width를 넘으면 다음 줄로 넘어감 (flex-wrap)
  - 두번째 섹션 : flex를 사용하여 제시된 형태로 배치
  - 세번째 섹션 : grid를 사용하여 제시된 형태르 배치
- footer
- 우측 하단에 top버튼을 누르면 최상단으로 이동
심화 과제
- scroll시 부드럽게 이동
- section (preview) : 스크롤바 커스텀
- section (img)
  - 첫번째 섹션 반응형 구현
  - 두번째 섹션 반응형 구현
  - 이미지 hover시 부드러운 애니메이션
  - object-fit:cover로 이미지가 영역에 맞게 잘리도록 구현

💎 PR Point

시맨틱 태그
- header, section, nav, main, footer 태그를 사용 했습니다. preview 부분은 header와 section으로 이루어진 div로 구성하고, 그 밑의 카테고리명은 nav로, 그 밑의 세가지 이미지 갤러리는 각각 section으로 구성한 뒤 main으로 감쌌습니다. 만들고보니 li태그도 충분히 활용할 수 있었는데 존재를 잊었네요...! 그리고 뭔가 article 태그를 써볼까 했는데 아직 어디에 써야하는지 잘 감이 안오는 것 같습니다.
첫 번째 섹션 반응형
- display: flex와 flex-wrap: wrap으로 기본적인 틀을 구현하고, 이 부모 아래 자식들 즉 모든 이미지에 flex-grow: 1을 부여하니 4 4 2 배치가 됐을 때 자동으로 마지막 줄의 두 이미지가 남는 영역을 모두 차지하게 할 수 있었습니다. 추가로 flex-shrink: 1을 사용해 창 너비가 줄어듦에 따라 이미지의 너비도 줄어들도록 했습니다. 하마터먼 media query로 구현할 뻔 했는데... YB 도윤님과 OB 재훈님의 도움을 받아 flex-grow라는 걸 난생 처음 써보게 되었어요 🙏

두 번째 섹션 반응형

왼쪽의 큰 이미지 하나를 제외한 나머지 네 개 묶음을 하나의 div로 묶고, media query를 사용했습니다.

index.html

    <div class="halftone second-section-gallery">
        <img
        class="first-img"
        src="./images/section2/1.png"
        alt="예쁜 커튼과 침구의 방"
        />
        <div class="right-side">
        <img src="./images/section2/2.png" alt="빛이 비친 팔과 손" />
        <img
            src="./images/section2/3.png"
            alt="카메라를 들고 친구와 거울 찍기"
        />
        <img src="./images/section2/4.png" alt="오사카 밤거리" />
        <img
            class="last-img"
            src="./images/section2/5.png"
            alt="걸터 앉아 셀프카메라"
        />
        </div>
    </div>

style.css

.second-section-gallery img {
    flex-shrink: 1;
    flex-grow: 1;
}

.second-section-gallery > .first-img {
    width: 41rem;
    height: 41rem;
}

.second-section-gallery > .right-side {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex: 0 0 calc(50% - 10px);
    gap: 1rem;
}

@media (max-width: 879px) {
    .second-section-gallery > .first-img,
    .second-section-gallery > .right-side > .last-img {
        width: 62rem;
        height: 20rem;
    }

    .second-section-gallery {
        flex-wrap: wrap;
    }
    .second-section-gallery > .right-side {
        flex: auto;
    }
}

@media (max-width: 659px) {
    .second-section-gallery > .right-side > .last-img {
        width: 20rem;
    }   
    .second-section-gallery > .first-img {
        width: 41rem;
    }
}

첫 번째 분기에서 1 3 1 형태로 배치하기 위해서 첫 번째 사진과 마지막 사진의 너비를 두 배로 늘렸습니다.
두 번째 분기에서는 1 2 2 형태로 배치하기 위해서 마지막 사진의 너비를 원래대로 되돌렸습니다.
제가 생각해도 이런 무대뽀 식의 너비 하드코딩은 좀 아닌 것 같은데 다른 분들 어떻게 했는지 궁금하네요!

세번째 섹션 그리드

grid-template-areas를 활용했습니다. 처음에는 grid-template으로 구현을 하려고 했는데 areas로 구성하는게 더 직관적이고 편하더라구요..!

style.css

.third-section-gallery {
    height: 60rem;

    display: grid;
    gap: 1rem;
    grid-template-rows: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas:
        "item1 item1 item2 item2"
        "item3 item3 item2 item2"
        "item4 item4 item4 item5"
        "item4 item4 item4 item5";

    padding-right: 3rem;
    padding-bottom: 3rem;
}

🥺 소요 시간, 어려웠던 점

8h
이렇게 복잡한 반응형을 구현하는 건 생소해서 어려웠어요...! 특히 flex-grow라는 것의 존재를 몰랐어서 그 부분에서 많이 헤맸어요. 반응형을 구현하면서 뭔가 더 적절한 방법이 있을 것 같은데... 하면서 고민을 많이 하다보니까 시간을 많이 썼는데, 결과적으로 만족스러운 방법을 채택하진 못해서 아쉬워요 ㅠㅠ

🌈 구현 결과물

배포링크

eonseok-jeon

너무나도 이쁘고 깔끔하게 잘 만드신 거 같아 사이트 구경하는 게 재밌었습니다!! 사진도 너무 이쁘게 잘 찍으시는 거 같아요~~

저의 짧은 지식을 총동원하여 리뷰 남겼습니다,, ㅎㅎ 제가 틀린 부분이 있을 수도 있으니 잘 걸러서 들어주세요!!

마지막으로, 승희가 저희 노션에 css 순서 관련해서 글 올렸는데 여기에 링크 달아놓을게요! 좋은 글인 거 같아서요

https://beautifulcss.com/archives/203

eonseok-jeon · 2023-10-17T15:10:08Z

week1/assign3/index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">


r u American?

eonseok-jeon · 2023-10-17T15:20:38Z

week1/assign3/style.css

+}
+
+html,
+body {


html과 body 둘 다에 font-size와 line-height을 주신 이유가 따로 있으신가요? 제가 알기론 font-size는 html 요소인 걸로 알고 있어서요

참고 자료 : https://stackoverflow.com/questions/48451764/how-to-set-base-size-for-rem

eonseok-jeon · 2023-10-17T15:27:20Z

week1/assign3/style.css

+}
+
+/* third section */
+.third-section-gallery {


세번째 섹션은 반응형이 아니라서 width 고정해 두어야 하는 건 아닌가 싶습니다!

아 그리고 다른 section이나 footer 이런 부분을 봐도 height만 설정 되어있고, width를 잘 설정 안 해놓으셨던데, 혹시 안 해도 무관한 부분일까요?? 결과물이 너무나도 깔끔하게 잘 나와서 없어도 상관 없는 건지 살짝 궁금합니다!

eonseok-jeon · 2023-10-17T15:30:12Z

week1/assign3/style.css

+  bottom: 3rem;
+  z-index: 2;
+
+  cursor: pointer;


화살표(▴) 부분에는 cursor: pointer; 가 적용되지 않고 있어요
확인부탁드려요~

eonseok-jeon · 2023-10-17T15:37:25Z

week1/assign3/style.css

+header {
+  padding: 0.7rem 0.5rem;
+  margin-bottom: 2rem;
+  width: fit-content;


우왕 이런 게 있었는지 몰랐어요!! 배워갑니다 :)

eonseok-jeon · 2023-10-17T15:43:40Z

week1/assign3/style.css

+  color: var(--gray-color);
+
+  border-bottom: 0.2rem solid var(--gray-color);
+  border-style: none none dotted none;


border-bottom: 0.2rem dotted var(--gray-color);
가 아니라

border-bottom: 0.2rem solid var(--gray-color);
border-style: none none dotted none;
이런 식으로 2개 나눈 이유가 있을까요?

eonseok-jeon · 2023-10-17T15:48:30Z

week1/assign3/style.css

+  z-index: 1;
+}
+
+.halftone {


이미지 삽입인 줄 알았는데 CSS로 하신 거군요! 너무 이쁩니다 😄

eonseok-jeon · 2023-10-17T15:56:58Z

week1/assign3/style.css

+
+  display: grid;
+  gap: 1rem;
+  grid-template-rows: 25% 25% 25% 25%;


repeat()를 사용하시면 더 간결하게 작성하실 수 있을 거 같아요!

eonseok-jeon · 2023-10-17T16:00:48Z

week1/assign3/style.css

+  gap: 1rem;
+}
+
+@media (max-width: 879px) {


저도 무대뽀 식으로 작성을 했었어 가지고요ㅜ
은서님 코드 보면서 제 코드 좀 수정하고 혹시라도 다른 방법 찾게 되면 다시 comment 남기러 올게요!

qwp0

진짜 너무 이쁘게 잘하신 것 같아요 ㅎㅎ

저 정말 너무 말하는 감자라....할 수 있는 게 감탄 밖에 없는 점 사죄드리고 분발하겠습니다 🥹🥹

qwp0 · 2023-10-18T01:06:14Z

week1/assign3/style.css

+  margin-bottom: 2rem;
+  width: fit-content;
+
+  border-bottom: 0.4rem solid var(--green-color);


전 지정한 색 계속 찾아다니면서 rgb값 복사했는데 ..ㅎ var함수를 쓰면 편리하게 쓸 수 있군요!

qwp0 · 2023-10-18T01:08:25Z

week1/assign3/style.css

+.first-section-gallery > img {
+  flex-grow: 1;
+  flex-shrink: 1;
+}


전 첫 번째 섹션도 미디어쿼리를 이용했는데 flex-shrink 써서 다시 도전해보겠습니다!

qwp0 · 2023-10-18T01:11:50Z

week1/assign3/style.css

+  grid-area: item4;
+}
+.grid-item:nth-child(5) {
+  grid-area: item5;


grid 구현할 때 저는 아이템마다 row와 column을 줬는데 grid-template-areas를 이용하면 훨씬 편리하군용

qwp0 · 2023-10-18T01:13:38Z

week1/assign3/images/onboarding/6.png

분위기 미쳐따

[3주차 기본/심화 과제] 🍚 점메추 🍚

[2주차 기본/심화 과제] 웨비의 사진관 😋

simeunseo added 30 commits October 12, 2023 00:23

docs: initial html structure

eccf678

style: add reset.css

08224bd

design: header design

b2ea784

design: onboarding section scroll

6272ba6

design: nav design

32663d5

design: font and color design

7452cc9

design: font change

73e90ca

design: nav design

6869e92

design: nav hover event

3d01f4d

design: first sectionq

354d492

docs: nav scroll

d22a47f

design: second section flex

a86a831

design: first section responsive

0ab0fc8

design: second section responsive

18a9091

design: second section flex grow and shrink

9c85fa7

design: third section grid

b15dd18

design: third section padding

62b4bb6

design: footer

335c35b

design: image hover animation

25c7c0c

docs: top button

3e3535e

design: fixed, sticky items z-index

cdaa66e

design: scrollbar design

8845a61

add: section1 images

55b785c

docs: replace section1 images

1921659

add: section2 images

bcdb3dc

docs: replace section2 images

1f5c3cd

add: section3 images

6265715

add: onboarding images

de639ed

docs: replace onboarding images

5971b21

docs: alt text

6919e70

simeunseo added 4 commits October 13, 2023 03:59

docs: edit alt text

3a40264

add: delete dummy image

b258f49

chore: create assign3 directory

e1b06da

docs: add favicon

72a7d8e

simeunseo marked this pull request as ready for review October 13, 2023 13:32

simeunseo self-assigned this Oct 13, 2023

simeunseo added 기본과제 심화과제 labels Oct 13, 2023

simeunseo requested review from qwp0, eonseok-jeon and Grandelwald October 14, 2023 08:42

eonseok-jeon reviewed Oct 17, 2023

View reviewed changes

qwp0 reviewed Oct 18, 2023

View reviewed changes

simeunseo merged commit 6f46fc1 into main Feb 13, 2024

simeunseo added a commit that referenced this pull request Feb 13, 2024

Merge pull request #7 from DO-SOPT-WEB/week3/#1

7a466dc

[3주차 기본/심화 과제] 🍚 점메추 🍚

simeunseo added a commit that referenced this pull request Jun 18, 2024

Merge pull request #4 from DO-SOPT-WEB/week2/#1

94e8fd5

[2주차 기본/심화 과제] 웨비의 사진관 😋

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차 기본/심화 과제] 웨비의 사진관 😋 #1

[1주차 기본/심화 과제] 웨비의 사진관 😋 #1

simeunseo commented Oct 12, 2023 •

edited by Rose-my

Loading

eonseok-jeon left a comment •

edited

Loading

eonseok-jeon Oct 17, 2023

eonseok-jeon Oct 17, 2023

eonseok-jeon Oct 17, 2023

eonseok-jeon Oct 17, 2023

eonseok-jeon Oct 17, 2023

eonseok-jeon Oct 17, 2023

eonseok-jeon Oct 17, 2023

eonseok-jeon Oct 17, 2023

eonseok-jeon Oct 17, 2023

qwp0 left a comment

qwp0 Oct 18, 2023 •

edited

Loading

qwp0 Oct 18, 2023

qwp0 Oct 18, 2023

qwp0 Oct 18, 2023

+              }
+              html,
+              body {

[1주차 기본/심화 과제] 웨비의 사진관 😋 #1

[1주차 기본/심화 과제] 웨비의 사진관 😋 #1

Conversation

simeunseo commented Oct 12, 2023 • edited by Rose-my Loading

✨ 구현 기능 명세

기본 과제

심화 과제

💎 PR Point

시맨틱 태그

첫 번째 섹션 반응형

두 번째 섹션 반응형

세번째 섹션 그리드

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

eonseok-jeon left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qwp0 left a comment

Choose a reason for hiding this comment

qwp0 Oct 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simeunseo commented Oct 12, 2023 •

edited by Rose-my

Loading

eonseok-jeon left a comment •

edited

Loading

qwp0 Oct 18, 2023 •

edited

Loading