[1주차 기본/ 심화 과제] 루밍이의 사진관 📸 #1

Arooming · 2023-10-12T19:29:59Z

✨ 구현 기능 명세

🧩 기본 과제

header

주제를 담은 제목을 넣어줍니다.
section (preview)

다양한 사진들을 미리볼 수 있는 섹션입니다.
- flex를 사용하여 일정한 간격으로 배치합니다.
- width값을 벗어나면 가로로 스크롤이 되도록 구현합니다.
nav

목차
- 각 목차 hover시 underline과 색상 변경이 일어납니다.
- 목차를 클릭하면 해당 목차가 있는 곳으로 이동합니다.
section (img)

각 목차에 관련된 사진들이 있습니다
- 목차는 sticky로 화면 상단에 닿으면 고정되도록 구현합니다.
- 첫번째 섹션
  - flex를 이용해서 같은 크기의 사진들로 나열합니다.
  - width를 넘으면 다음줄로 넘어가도록 구현합니다 (flex-wrap)
- 두번째 섹션
  - flex 를 사용하여 위와 같은 형태로 배치합니다.
- 세번째 섹션
  - grid를 사용하여 위와 같은 형태로 배치합니다.
footer

마무리 말 또는 다양한 정보를 자유롭게 넣으셔도 됩니다!
우측 하단에 top 버튼을 넣습니다.
1. top 버튼을 누르면 최상단으로 이동합니다.

🧩 심화 과제

scroll시 부드럽게 이동합니다.**
section (preview)
- 스크롤바를 예쁘게 커스텀합니다.
section (img)
- 1️⃣ 반응형으로 구현합니다.
  - 첫번째 섹션
    - 이미지들이 한 줄씩 줄어듭니다.
    - 마지막 줄에 개수가 맞지 않는 경우 이미지 너비를 늘려 width 값을 채웁니다.
  - 두번째 섹션
    - 큰 이미지와 작은 이미지 그룹의 배치가 상하로 바뀝니다.
    - 각 이미지들은 브라우저 크기가 조정됨에 따라 width값이 꽉차게 변경됩니다.
    - 마찬가지로, 마지막 줄에 개수가 맞지 않는 경우 이미지 너비를 늘려 width 값을 채웁니다.
  - 세번째 섹션은 반응형을 구현하지 않습니다.
- 2️⃣ 애니메이션
  - 이미지 hover시 이미지가 살짝 올라갔다가 내려옵니다. (첫번째, 두번째 섹션만 해당)
  - 애니메이션을 부드럽게 처리합니다.

💎 PR Point

🍟 미리보기 섹션

스크롤은 overflow 를 활용해서 구현했어요!
세로 스크롤은 생기지 않게 하기 위해서 overflow-y: hidden; 를 활용했습니당.

/* 가로 스크롤만 가능하게 */
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;

🍟 목차

a태그를 활용하여 목차 클릭 시, 원하는 카테고리로 이동하도록 구현했습니다.

<ul>
    <li><a href="#animalSection">Animal🦁</a></li>
    <li><a href="#foodSection">Food🍔</a></li>
    <li><a href="#friendsSection">Friends👯‍♂️</a></li>
</ul>

목차 클릭 시, 부드럽게 이동하도록 scroll-behavior: smooth; 를 줬습니다.

/* a 태그 클릭 시, 부드럽게 이동 */
html {
  scroll-behavior: smooth;
}

🍟 첫번째 섹션

화면 비율에 맞게 이미지 비율을 적용하기 위해 각 이미지에 flex-grow: 1; 를 줬습니다.

#animalSection > article > img {
  width: 17rem;
  height: 17rem;
  /* 마지막 줄의 개수가 맞지 않는 경우 화면 비율에 맞게 이미지 너비 늘어남 */
  flex-grow: 1;
}

첫번째 섹션과 두번째 섹션의 이미지에 hover 시, 부드럽게 움직이게 하기 위해 transition과 transform 를 활용했습니다.

#animalSection > article > img:hover,
#foodSection > article > div > img:hover {
  /* 즉시 0.2초동안 일정한 속도로 부드럽게 변화 */
  transition: all 0.2s linear;
  /* 위로 0.5rem 이동 */
  transform: translateY(-0.5rem);
}

🍟 두번째 섹션

왼쪽 이미지(1개)와 오른쪽 이미지(4개)를 각각 div로 묶어줬습니다.

<section id="foodSection">
      <h3>Food🍔</h3>
      <article>
        <div class="left">
          <img src="./media/food/food5.jpeg" alt="1번 음식" />
        </div>

        <div class="right">
          <img src="./media/food/food1.jpeg" alt="2번 음식" />
          <img src="./media/food/food2.jpeg" alt="3번 음식" />
          <img src="./media/food/food3.jpeg" alt="4번 음식" />
          <img src="./media/food/food4.jpeg" alt="5번 음식" />
        </div>
      </article>
    </section>

각각의 div에 flex-grow: 1; 을 주었고, div 내부 이미지들에도 flex-grow: 1; 을 주었습니다.
1. .left와 .right는 1:1의 비율을 갖습니다.
2. .right의 이미지는 할당된 화면에서 모두 같은 크기(1:1:1:1)를 유지하게 됩니다.

article > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 35rem;
  flex-grow: 1;

  gap: 1rem;
}

#foodSection > article > .left > img {
  width: 100%;
  height: 35rem;
  flex-grow: 1;
}

#foodSection > article > .right > img {
  width: 17rem;
  height: 17rem;
  flex-grow: 1;
}

🍟 세번째 섹션

세번째 섹션이 들어갈 전체 화면을 4행 6열로 나눠주었습니다.

/* 전체 화면에 grid를 깔아줌 (4행 6열)*/
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(6, 1fr);

화면을 분할해놓은 좌표를 기준으로, 이미지의 위치를 잡아주었습니다.

#friendsSection > article > img:nth-child(1) {
  width: 100%;
  /* 높이에 할당된 전체 화면의 1/4 크기 할당*/
  height: calc(100vh / 4 - 0.5rem);

  /* 화면 분할해놓은 곳의 좌표를 기준으로 해당 요소의 위치 잡아줌 */
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}

#friendsSection > article > img:nth-child(2) {
  width: 100%;
  height: calc(100vh / 4 - 0.5rem);

  grid-row: 2 / 3;
  grid-column: 1 / 4;
}

...

→ 이렇게 구현했어요!

🥺 소요 시간, 어려웠던 점

5h
두번째 섹션에서 화면 크기를 줄였더니, 구현했던 사진비율이 모두 깨지는 문제가 있었어요!

→ 크게 왼쪽과 오른쪽 이미지로 나누고, 내부 flex-grow 설정을 다시 해줬더니 해결할수 있었습니당

🌈 구현 결과물

1.-2.mp4

1.-3.mp4

1.-4.mp4

1.-5.mp4

1.-6.mp4

ExceptAnyone · 2023-10-16T01:27:58Z

assignment/week_1/photoBooth.css

+  white-space: nowrap;
+}
+
+section > div {


아 class 이름 하나하나 안주고 이렇게 하면 훨씬 깔끔하네.. 나는 img에 하나하나 클래스 달아놨는데 어쩐지 비효율적이라는 생각이 들더라

옹 아마 사람마다 다르겠지만, 나는 중복코드가 생기는걸 좋아하지 않아서 모든 요소에 class를 주기보단 생성자 활용해서 대체할 수 있으면 그렇게 하는 편이야..!! 따로 뭔가 css 적인 요소를 줘야하는 경우라면 class를 활용하기도 하고!!

ExceptAnyone · 2023-10-16T02:08:44Z

assignment/week_1/PhotoBooth/photoBooth.css

+#friendsSection > article > img:nth-child(5) {
+  width: 100%;
+  height: calc(100vh / 2 - 0.5rem);
+
+  grid-row: 4 / 5;
+  grid-column: 5 / 7;
+}


나는 보통 px 단위를 많이 쓰는데 rem을 쓰는 이유가 혹시 뭔지 가르쳐 줄 수 있을까...?

px은 절댓값을 사용하는 단위야!
A 요소의 값을 px 단위로 주게되면 A의 크기는 고정이 되고 모든 브라우저 설정을 덮어버린다고 생각하면 돼! 결국에는 화면 크기가 변하더라도 A가 화면에 표시되는 크기는 같기 때문에 사용성에 제약이 생기게 되는거지..!!

그에 반해, rem은 루트 글꼴 크기에 따라 상대적으로 바뀌는 단위야! (실제로 rem의 첫글짜인 r은 root를 의미한다고 해😲)
보통 1rem = 16px이지만, 만약 루트 글꼴 크기를 10px로 바꿔줬다면 1rem = 10px이 되겠지..! (rem은 루트 글꼴 크기에 비례하니까)

정리해보자면,
px은 고정값을 부여하기 때문에 반응형에 대응하기 어렵고, px로 크기를 고정시킬 경우 사용성에 제약이 생기게 돼 🥶
rem은 루트 글꼴 크기에 따라 상대적으로 크기가 변하기 때문에 루트 글꼴 크기를 기반으로 px 값을 계산할 수 있고,
원하는 글꼴 크기에 맞춰 다른 요소의 크기까지 변경할 수 있어서 유연하게 반응할 수 있다는 큰 장점이 있어 🤗

즉, 오빠도 이제 px 대신 rem을 사용해보는걸 추천할게 !!! 처음에는 낯설 수 있는데 사용하다보면 이게 훨씬 편하고 화면 대응도 쉬워서 금방 적응할 수 있을거야!!! 그리고 px, rem 외에도 다양한 단위들이 있으니까 한번 쓱 훑어보면 좋을듯 !!

ExceptAnyone · 2023-10-16T02:12:25Z

assignment/week_1/PhotoBooth/photoBooth.html

+    <section id="foodSection">
+      <h3>Food🍔</h3>
+      <article>
+        <div class="left">
+          <img src="./media/food/food5.jpeg" alt="규카츠" />
+        </div>
+
+        <div class="right">
+          <img src="./media/food/food1.jpeg" alt="삼겹살" />
+          <img src="./media/food/food2.jpeg" alt="칠면조" />
+          <img src="./media/food/food3.jpeg" alt="장어덮밥" />
+          <img src="./media/food/food4.jpeg" alt="당고" />
+        </div>
+      </article>
+    </section>


아 나는 section 태그로만 구분지었는데, section 안에 article 태그를 둬서 더 세세하게 구분했구나. 이거 좋은듯..!

웅!! section 태그가 하나의 주제를 나타낸다면, article 태그는 주제를 묶는 독립적인 컨텐츠를 나타낸다고 해!
그래서 Food라는 주제 안에 해당 주제를 묶는 음식 사진들을 article 태그로 감싸주었어..!!

1주차 세미나 자료 > HTML > Semantic Tag 부분에 자세히 나와있으니 참고하면 좋을듯 !!

moondda

군더더기 없는 너무 깔끔하게 잘 한 아름이! 내가 하면서 귀찮거나 미처 생각하지 못해서 넘어갔던 부분들까지 넘 세심하게 잘 구현한 거 같아서 보면서 많이 배우는 거 같아. 특히 alt는 이번주 생각과제처럼 웹접근성에도 중요하다고 하던데 나도 고쳐야겠다. 그리구 카테고리별로 사진폴더 다르게 만든것도 깔끔한 거 같아 짱짱✨✨

seobbang

아웅 너무 깔끔하다!! 고생했어용 ✨

seobbang · 2023-10-19T09:42:58Z

assignment/week_1/PhotoBooth/photoBooth.css

+@font-face {
+  font-family: "ONE-Mobile-POP";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/ONE-Mobile-POP.woff")
+    format("woff");
+  font-weight: normal;
+  font-style: normal;
+}


폰트까지.. 야무져 ✨

seobbang · 2023-10-19T09:43:17Z

assignment/week_1/PhotoBooth/photoBooth.css

+  color: #fffff0;
+}
+
+/* 1. 미리보기 섹션 */


친절한 주석 최고에용 ✨

seobbang · 2023-10-19T09:44:59Z

assignment/week_1/PhotoBooth/photoBooth.css

+#animalSection,
+#foodSection,
+#friendsSection {
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  margin: 3rem 7rem;
+
+  border: 0.3rem solid #2d4849;
+  text-align: center;
+}


이건 하나의 공통 클래스를 사용하는게 좀 더 적합할 수 있겠다!

옹 그럴수도 있겠네요 !

seobbang · 2023-10-19T09:47:28Z

assignment/week_1/PhotoBooth/photoBooth.css

+  grid-row: 1 / 2;
+  grid-column: 1 / 4;
+}
+
+#friendsSection > article > img:nth-child(2) {
+  width: 100%;
+  height: calc(100vh / 4 - 0.5rem);
+
+  grid-row: 2 / 3;
+  grid-column: 1 / 4;
+}


Grid-template-areas 라는 속성을 사용하면 요런 계산 없이도 편하게 사용할 수 있어요!-! 그치만 멋지다🔥

seobbang · 2023-10-19T09:51:06Z

assignment/week_1/PhotoBooth/photoBooth.html

+
+    <footer>⚡️ 루밍이의 사진관 운영종료 ⚡️</footer>
+
+    <button><a href="#">🔝</a></button>


a 태그를 button으로 또 한 번 감싸준 이유가 있을까욤?

버튼을 구현해야한다고 생각해서 그렇게 했는데 버튼없이 a태그로만 감싸는게 나을까용?

moondda · 2023-10-20T10:45:09Z

assignment/week_1/PhotoBooth/photoBooth.css

+body {
+  position: relative;
+  height: 100vh;
+  margin: 0;


요거는 왜 해주는거양? 안하는 거랑 차이가 많이 나나..?!

margin을 0으로 준 부분 말해준걸까 !? 그거라면 body 전체에 마진값을 모두 빼고 시작하기 위해서 저렇게 줬어!

Arooming added 26 commits October 11, 2023 02:49

init: 초기세팅

4d8a2a5

feat: 헤더 생성

3cbd642

style: 기본 스타일 적용

ab6f3aa

chore: 폴더/ 파일명 변경

bb0447d

chore: 사진 추가

11dadc3

feat: 사진 미리보기 기능 구현

6e5624e

chore: 시멘틱 구조로 코드 수정

7b1ea4e

feat: nav 큰 틀 잡기

a8f930e

feat: 클릭 시 이동 구현

bb97443

feat: 목차 클릭 시, 부드럽게 이동 구현

987d696

chore: 이미지 폴더링

c901b7c

feat: 첫번째 섹션 기능 구현

6801b6a

feat: 이미지 호버 애니메이션 구현

f5b9522

chore: 사진추가

4ef5325

feat: 두번째 섹션 구현

24d1be4

chore: 주석추가

93cf087

chore: 사진 추가/ 정리

465d0c6

feat: 세번째 섹션 구현

6661a02

chore: 주석 추가

f3100be

feat: 푸터 구현

055886a

feat: 상단 이동 버튼 생성

7f2c6d8

feat: 하단 버튼에 상단이동 기능 추가

0c90346

fix: 반응형 대응 안되던 이슈 해결

1ab222e

chore: 파일 폴더링

3dd0fd6

chore: 이미지 alt 추가

987a60f

chore: 중복코드 정리

6dd7420

Arooming added 1주차 기본과제 심화과제 labels Oct 12, 2023

Arooming requested a review from moondda October 12, 2023 19:29

Arooming requested a review from ExceptAnyone October 12, 2023 19:30

Arooming self-assigned this Oct 12, 2023

Arooming changed the title ~~[1주차 기본/ 심화 과제] 웨비의 사진관 😋~~ [1주차 기본/ 심화 과제] 루밍이의 사진관 📸 Oct 12, 2023

chore: alt 구체적으로 수정

a734d00

ExceptAnyone reviewed Oct 16, 2023

View reviewed changes

moondda reviewed Oct 16, 2023

View reviewed changes

seobbang reviewed Oct 19, 2023

View reviewed changes

moondda reviewed Oct 20, 2023

View reviewed changes

Arooming merged commit ac20e68 into main Oct 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차 기본/ 심화 과제] 루밍이의 사진관 📸 #1

[1주차 기본/ 심화 과제] 루밍이의 사진관 📸 #1

Arooming commented Oct 12, 2023 •

edited

Loading

ExceptAnyone Oct 16, 2023

Arooming Oct 16, 2023

ExceptAnyone Oct 16, 2023

Arooming Oct 16, 2023 •

edited

Loading

ExceptAnyone Oct 16, 2023

Arooming Oct 16, 2023

moondda left a comment

seobbang left a comment

seobbang Oct 19, 2023

seobbang Oct 19, 2023

seobbang Oct 19, 2023

Arooming Oct 24, 2023

seobbang Oct 19, 2023

seobbang Oct 19, 2023

Arooming Oct 24, 2023

moondda Oct 20, 2023

Arooming Oct 24, 2023


		<footer>⚡️ 루밍이의 사진관 운영종료 ⚡️</footer>

		<button><a href="#">🔝</a></button>

[1주차 기본/ 심화 과제] 루밍이의 사진관 📸 #1

[1주차 기본/ 심화 과제] 루밍이의 사진관 📸 #1

Conversation

Arooming commented Oct 12, 2023 • edited Loading

✨ 구현 기능 명세

🧩 기본 과제

🧩 심화 과제

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Arooming Oct 16, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moondda left a comment

Choose a reason for hiding this comment

seobbang left a 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

Choose a reason for hiding this comment

Arooming commented Oct 12, 2023 •

edited

Loading

Arooming Oct 16, 2023 •

edited

Loading