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

Yeonseo-Jo · 2023-10-13T09:43:06Z

✨ 구현 기능 명세

기본 과제

1. header

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

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

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

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

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

심화 과제

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

💎 PR Point

1️⃣ Preview section

가로 스크롤 : overflow-y 속성 활용!

/* 가로 스크롤 */
overflow-x: scroll;
white-space: nowrap;

스크롤바 커스텀

/* 스크롤바 커스텀 */
/* 스크롤바 설정*/
.preview-section::-webkit-scrollbar {
height: 0.8rem;
}

/* 스크롤바 막대 설정*/
.preview-section::-webkit-scrollbar-thumb {
background-color: #2f3542;
border-radius: 0.5rem;
background-clip: padding-box;
border: 0.2rem solid transparent;
}

/* 스크롤바 뒷 배경 설정*/
.preview-section::-webkit-scrollbar-track {
background-color: grey;
box-shadow: inset 0rem  0rem  0.5rem  white;
}

2️⃣ nav (목차)

hover 효과

.nav-section__items > li:hover {
color: #2f3542;

text-decoration: underline;
text-decoration-style: dotted;
text-decoration-thickness: 0.3rem;

cursor: pointer;
}

누르면 이동 : <a>를 사용했습니다!
- href의 속성 값으로 이동할 영역의 아이디를 주었습니다
- 보통 a 태그는 외부 문서로의 이동에서 사용하는 태그로, 목차 이동은 js를 활용해서 구현을 더 많이 하나, html/css만 이용하는 과제이므로 a 태그를 사용했습니다.

3️⃣ img section

목차 sticky 구현

position: sticky는 꼭 left, top, bottom 등 속성과 같이 사용해야 적용됩니다!

position: sticky;
top: 0;

첫번째 섹션

flex와 gap 속성을 사용해서 같은 크기와 일정 간격을 가지는 영역을 구현했습니다.
flex-wrap: wrap , flex-grow : 1 속성을 사용해서 반응형으로 남는 이미지 넓이를 차지할 수 있도록 적용했습니다.

두번째 섹션

큰 영역을 감싸는 flex 박스와, 왼쪽 오른쪽 영역의 flex 박스로 나누어 영역을 구현했습니다.
마찬가지로 flex-wrap: wrap , flex-grow : 1 속성을 주어 마지막 줄에 개수가 맞지 않는 경우 이미지 너비를 늘려 width 값을 채우도록 구현하였습니다.

세번째 섹션

grid를 통해 주어진 영역을 구현했습니다.
아래처럼 각 이미지 요소마다 차지하는 영역을 grid-row, grid-column 속성을 통해 구현했습니다. 이때, 넓이 값이 정해져 있어야 적용되는 것을 알 수 있습니다.

.busan-section__img-container  img:first-child {
/*grid에서 각 행, 열에 차지하는 영역 결정 => 시작 번호 / 끝 번호*/
grid-row: 1 / 2;
grid-column: 1 / 3;
}

이미지 hover 애니메이션

위로 올라갔다 내려오는 애니메이션을 적용하니 목차 헤더와 겹치는 현상이 발생해 z-index를 주어 해결하였고, 플로팅 버튼(top 버튼)은 최상단에 위치해야 해서 마찬가지로 더 큰 z-index를 주어 해결했습니다.

/*이미지 애니메이션*/
.jeju-section__img-container > img,
.tokyo-section__img-container  img {
transition: transform 0.2s ease, padding 0.2s ease;
}

.jeju-section__img-container > img:hover,
.tokyo-section__img-container  img:hover {
transform: translate(0, -0.5rem);
}

4️⃣ top 버튼

우측 하단에 위치하는 플로팅 버튼으로 구현하였습니다.

/*top 버튼*/

.btn-top {
position: sticky; // 플로팅 버튼! 스크롤 시 따라오도록
float: right; // 우측에 위치하도록
right: 2rem;
bottom: 2rem;

border: none;
background-color: transparent;
z-index: 100; // hover 이미지 애니메이션, 목차와 겹치지 않고 최상단에 위치하도록
}

🥺 소요 시간, 어려웠던 점

4h
grid에서 자꾸 영역이 안맞아서 어려웠어용

🌈 구현 결과물

영상 나누기 번거로워서.. 그냥 노션 링크 첨부합니당 ㅎㅎ
https://quasar-smelt-153.notion.site/week1-assign3-2c665410e34a49be9ad2421a79783a94?pvs=4

SooY2

하띵!!!😚

SooY2 · 2023-10-16T09:00:43Z

week1/aissgn3/style.css

+
+/* a 태그 기본 스타일 제거*/
+a {
+  color: inherit;


어디에서 상속받는건가요??!!

브라우저에서 상속 받는 a 태그 기본 스타일링 속성 (밑줄 / 파란 글씨)를 제거 해주었습니다! 보통 global.css에서 전역으로 많이 적용해주는 편인데, 여기서는 스타일 파일 하나만 사용해서 맨 위에서 전역으로 적용해줬어요 !

SooY2 · 2023-10-16T09:16:24Z

week1/aissgn3/style.css

+/*이미지 애니메이션*/
+.jeju-section__img-container > img,
+.tokyo-section__img-container img {
+  transition: transform 0.2s ease, padding 0.2s ease;


padding에는 어떤 효과가 들어가는건가요???!

말 그대로 애니메이션 효과로 padding에도 변화가 들어갑니당! padding 속성이 변할 때 0.2초동안 ease로 변화하게 하는 속성입니다!

SooY2 · 2023-10-16T09:18:56Z

week1/aissgn3/style.css

+}
+
+.img-container__left,
+.img-container__right {


중복되는 스타일을 묶어서 지정해주니 가독성이 좋네요!!

SooY2 · 2023-10-16T09:23:40Z

week1/aissgn3/style.css

+/*세 번째 갤러리 섹션 - 부산*/
+.busan-section__img-container {
+  display: grid;
+  grid-template-rows: repeat(4, 15rem);


간단하게 repeat써서 하는 방법이 있군요!! 전 15rem 4번써서 했는데,,,

grid를 쓸 때 자주 쓰는 방법입니다! 추천추천

nayujin-dev

수고했어용 ~~ 스크롤바 디자인 탐난당 ,,

nayujin-dev · 2023-10-16T18:13:03Z

week1/aissgn3/style.css

+  background-color: #2f3542;
+  border-radius: 0.5rem;
+  background-clip: padding-box;
+  border: 0.2rem solid transparent;


나 궁금한게!! transparent는 투명도 설정이라고 알고있는데, 영상의 스크롤바에 border 0.2rem으로 지정해둔게 안보이는 이유는 transparent를 지정해서 그런건가? 근데 그러면 border이 none인거랑 어떤게 다른건지 궁금해!!

border: none으로 주면 그냥 border(테두리)가 없어지는데, 여기서는 스크롤바보다 영역이 적게 차지하도록 하고 싶어서 0.2rem만큼 border를 주고, transparent로 투명하게 처리를 해줬습니당!

cf)
* border none 일 때

border: 0.2rem solid transparent 일 때

nayujin-dev · 2023-10-16T18:14:11Z

week1/aissgn3/style.css

+/* 스크롤바 뒷 배경 설정*/
+.preview-section::-webkit-scrollbar-track {
+  background-color: grey;
+  box-shadow: inset 0rem 0rem 0.5rem white;


헐 섬세해 멋지다 ,,

nayujin-dev · 2023-10-16T18:15:00Z

week1/aissgn3/style.css

+  color: #2f3542;
+
+  text-decoration: underline;
+  text-decoration-style: dotted;


이거 귀여워 ㅎㅎㅎ

nayujin-dev · 2023-10-16T18:17:42Z

week1/aissgn3/style.css

+}
+
+.img-container__right > img {
+  flex-grow: 1;


이렇게하는거구나 ,, flex-grow 꽤나 어렵다 ,,

nayujin-dev · 2023-10-16T18:20:01Z

week1/aissgn3/style.css

+
+.busan-section__img-container img:nth-child(5) {
+  grid-row: 3 / 5;
+  grid-column: 4 / 5;


깔끔하다 !!!

nayujin-dev · 2023-10-16T18:22:14Z

week1/aissgn3/style.css

+}
+
+/*footer 영역*/
+.footer {


나 가계부때도 궁금했는데 footer를 class명으로 한번 더 지정해준 이유가 궁금해!! 통일성을 위한건가?

사실 class는 의미적인 내용을 가지는 것이 좋은 습관입니다! 더불어 해당 문서에서는 너무나도 명확히 하나의 footer라서 상관없겠지만, 추후 유지보수 측면에서도 태그 이름과 class를 똑같이 주는건 좋지 않은 습관이라고 하네용~ 그래서 이렇게 쓰게 되는 경우에는 그냥 footer를 쓰는 것도 좋겠죠!

클래스명을 bem 방식으로 짓다보니까 이렇게 지정해줬는데! 서현이 말처럼 클래스는 의미적 내용을 가지는게 좋을것 같네요 !! 더 구체적으로 수정하겠습니댜

nayujin-dev · 2023-10-16T18:22:52Z

week1/aissgn3/style.css

+/*top 버튼*/
+.btn-top {
+  position: sticky;
+  float: right;


float 이거 귀엽고 좋다 ,, 난 냅다 fixed로 고정시켜놨는뎅 ㅎ.ㅎ

seobbang

코드가 너무 깔끔하고 시맨틱합니당,,최고 ✨✨

seobbang · 2023-10-20T17:57:03Z

week1/aissgn3/index.html

+    <button class="btn-top">
+      <a href="#"><img src="./assets//icon/icon_top.png" /></a>
+    </button>


단순히 이동하는 역할을 하기 때문에 button으로 감싸지 말고, a로만 스타일링 하는 것이 좋을 것 같아용 ㅎㅎ button과 a는 의도에 맞게 분리해서 사용하는 것이 좋답니다!

오오 그렇군용 상단 이동 버튼이라고 생각해서 button으로 감싸줬는데! 이동의 역할이 주 역할이니까 a 태그만을 사용하는것도 좋을것 같네용

seobbang · 2023-10-20T17:57:19Z

week1/aissgn3/reset.css

reset.css까지 넘넘 야무집니데이 ✨

seobbang · 2023-10-20T17:59:38Z

week1/aissgn3/index.html

+      <section id="jeju-section">
+        <header class="jeju-section__header">


여기서 jeju-section에 관해서 section에는 id를 주고 header에는 class를 준 이유가 있나용?

스타일링만을 위한 속성에는 class를, a 태그의 href에 사용될 부분은 고유해야 한다고 생각하여 id를 사용했습니당 !

seobbang · 2023-10-20T18:00:48Z

week1/aissgn3/style.css

+.busan-section__img-container img:first-child {
+  /*grid에서 각 행, 열에 차지하는 영역 결정 => 시작 번호 / 끝 번호*/
+  grid-row: 1 / 2;
+  grid-column: 1 / 3;
+}


grid-template-areas 라는 편리한 속성도 있으니 참고 !

seobbang · 2023-10-20T18:05:43Z

week1/aissgn3/style.css

+}
+
+/*footer 영역*/
+.footer {


사실 class는 의미적인 내용을 가지는 것이 좋은 습관입니다! 더불어 해당 문서에서는 너무나도 명확히 하나의 footer라서 상관없겠지만, 추후 유지보수 측면에서도 태그 이름과 class를 똑같이 주는건 좋지 않은 습관이라고 하네용~ 그래서 이렇게 쓰게 되는 경우에는 그냥 footer를 쓰는 것도 좋겠죠!

Yeonseo-Jo added 23 commits October 11, 2023 13:33

init : 파일 생성

7b94875

feat : 기본 구조 세팅

830b9f6

feat : 이미지 추가

6e61c86

feat : reset css 추가

d00aa76

feat : 미리보기 이미지 추가

c5d719b

feat : 폰트 추가

157301c

feat : 헤더 구현

a7f4d91

feat : 미리보기 섹션 구현

9c24f0b

feat : 스크롤바 커스텀

ddcc0b7

feat : nav 영역 스타일링

0912616

feat : 목차 hover 구현

ef8e981

feat : 목차 이동 구현

a3bc1fc

feat : 갤러리 섹션 헤더 스타일링 및 sticky position 구현

e234d63

feat : 첫번째 갤러리 섹션 구현 완료

545ea9c

feat : 첫번째 갤러리 섹션 반응형 및 사진 추가

3b71cc5

feat : 이미지 높이 수정

071d209

feat : 두 번째 갤러리 섹션 구현(반응형까지)

974b042

feat : 세 번째 갤러리 섹션 구현

fd8d42f

feat : 푸터 구현

82a43bd

feat : top 버튼 구현

f500ecb

feat : 스크롤, hover 애니메이션 부드럽게 구현

4878038

fix : 스타일 수정

ace3f65

fix : reset css 수정, 배경색 적용

1e2e62c

Yeonseo-Jo added 1주차 기본과제 심화과제 labels Oct 13, 2023

Yeonseo-Jo requested review from nayujin-dev and SooY2 October 13, 2023 09:43

Yeonseo-Jo self-assigned this Oct 13, 2023

Yeonseo-Jo removed the request for review from SooY2 October 13, 2023 09:46

Yeonseo-Jo requested review from seobbang and SooY2 October 13, 2023 10:23

SooY2 reviewed Oct 16, 2023

View reviewed changes

nayujin-dev reviewed Oct 16, 2023

View reviewed changes

seobbang reviewed Oct 20, 2023

View reviewed changes

Yeonseo-Jo added 2 commits October 24, 2023 02:47

refactor : 코드리뷰 반영 - footer 클래스명 수정

50d66b0

refactor : 코드리뷰 반영 - top 부분 감쌌던 button 태그 제거

aa63355

Yeonseo-Jo merged commit 97deca2 into main Oct 23, 2023

Yeonseo-Jo temporarily deployed to github-pages October 26, 2023 19:17 — with GitHub Pages Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Yeonseo-Jo commented Oct 13, 2023

SooY2 left a comment

SooY2 Oct 16, 2023

Yeonseo-Jo Oct 23, 2023

SooY2 Oct 16, 2023

Yeonseo-Jo Oct 23, 2023

SooY2 Oct 16, 2023

SooY2 Oct 16, 2023

Yeonseo-Jo Oct 23, 2023

nayujin-dev left a comment

nayujin-dev Oct 16, 2023

Yeonseo-Jo Oct 23, 2023

nayujin-dev Oct 16, 2023

nayujin-dev Oct 16, 2023

nayujin-dev Oct 16, 2023

nayujin-dev Oct 16, 2023

nayujin-dev Oct 16, 2023

seobbang Oct 20, 2023

Yeonseo-Jo Oct 23, 2023

nayujin-dev Oct 16, 2023

seobbang left a comment

seobbang Oct 20, 2023

Yeonseo-Jo Oct 23, 2023

seobbang Oct 20, 2023

seobbang Oct 20, 2023

Yeonseo-Jo Oct 23, 2023

seobbang Oct 20, 2023

seobbang Oct 20, 2023

		<section id="jeju-section">
		<header class="jeju-section__header">

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

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

Conversation

Yeonseo-Jo commented Oct 13, 2023

✨ 구현 기능 명세

기본 과제

심화 과제

💎 PR Point

1️⃣ Preview section

2️⃣ nav (목차)

3️⃣ img section

4️⃣ top 버튼

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

SooY2 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

nayujin-dev 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

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