[ 1주차 기본/심화 과제 ] : assign3 - 웨비들의 냠냠 🍰 창업🏠 (Yeonsinsa 👗👖👚) #1

Yeonseo-Jo · 2023-04-07T02:15:37Z

✨ 구현 기능 명세

기본 과제

header , nav, card section으로 나누어 구현합니다. ☑️
1. header
  1. 상표와 메뉴 아이콘을 가지며 space-between를 사용합니다. ☑️
  2. 스크롤이 되어도 상단 고정입니다 ☑️
2. nav
  1. 카테고리는 전체, 분류1, 분류2, 분류3 총4가지로 구현됩니다. ☑️
nav, card section 은flex 또는 grid를 사용하여 배치합니다. ☑️
상품 카드 안에는 상품제목, 해시태그 목록, 이미지, 하트 찜 누르기 가 들어있습니다. ☑️
1. 가운데 정렬은 필수 입니다. ☑️
2. 해시태그를 보여주는 곳은 특정 길이를 벗어나면 뒤의 태그는 안보입니다. ☑️

심화 과제

hover
1. header
  1. 가려져있던 메뉴바가 옆에 나타나고, 상품 추가와 찜 목록 리스트가 나타납니다 ☑️
  2. 특정 너비를 가지며, 높이는 100vh 입니다. ☑️
2. nav
  1. 배경과 글자색이 변경됩니다. ☑️
3. card
  1. 하트 호버 효과 색변경 나타내기 ☑️
반응형레이아웃
1. header, nav는 세로 정렬
2. 상품 카드들은 5→ 4→3 → 2 → 1 로 줄어든다 ☑️
  단 . 마지막 한줄 정렬시 가운데로 상품 카드 레이아웃이 변경됩니다. ☑️

🌼 PR Point

📍 header 상단 고정

position : fixed를 통해 구현하고, 아래 영역은 header가 차지한 영역만큼 margin-top을 줘서 처리했습니다

📍 header 메뉴바

header 내부에 menu section을 만들어 메뉴바를 구현했습니다! 추후 페이지 이동처리 해야 할것 같아 a 태그로 구현했고, 현재는 href="#"으로만 처리해줬습니다
display: none & display: block을 통해 hover시에만 메뉴바가 나타나게 처리해줬습니다

<!-- index.html-->
        <section class="header__menu">
          <article class="header__list">
            <h2 class="header__sublist-title">메뉴</h2>
            <br />
            <a class="header__sublist" href="#">새 위시 추가</a>
            <a class="header__sublist" href="#">찜 목록</a>
          </article>
        </section>

/* style.css*/
.header__menu {
/* default로는 보이지 않게 */
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: 13rem;
  background-color: #dddddd;
  color: black;
  z-index: 10;
}

.header__button:hover + .header__menu,
.header__menu:hover {
/* hover시에만 나타나게 */
  display: block;
}

📍 특정 길이를 벗어나면 뒤의 태그 숨기기

ul & li 태그로 태그 영역을 만들어 주고, word-break와 wrap 성질을 이용해 단어가 통째로 다음 줄로 넘어가게 한 다음, overflow: hidden을 통해 태그 높이 이상을 넘어가는 영역을 숨겨주었습니다
li는 블록요소이기 때문에 inline-block처리 해주어 한 줄에 나란히 태그가 보일수 있도록 처리했습니다

<!-- index.html-->
          <ul class="cards__tagwrapper">
            <li class="cards__tag">#디젤피카부</li>
            <!-- 넘치는 태그는 안보이게 처리-->
            <li class="cards__tag">#태그길게길게넘치나안넘치나테스트</li>
          </ul>

/* style.css */
.cards__tagwrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
/* 단어(=태그)를 기준으로 줄 바꿈 처리 */
  word-break: keep-all;
  width: 9rem;
  height: 0.7rem;
  margin: 0.5rem 0;
}

.cards__tag {
  display: inline-block;
  font-size: 0.7rem;
  margin: 0 0.2rem;
  width: fit-content;
  text-align: center;
}

📍 반응형 레이아웃

media query와 grid를 통해 구현했습니다! 해상도를 기준으로 중단점을 설정하고자 했는데 6개로 나누기가 애매해서,, 임의로 설정한 값을 기준으로 반응형 처리 해줬습니다!
다른 분들은 중단점 처리를 어떻게 하셨는지 궁금해요!

/* default 값 */
.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  padding: 0 1.5rem;
}

/* 반응형 구현 */
@media screen and (max-width: 1500px) {
  .cards {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media screen and (max-width: 1280px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 780px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 670px) {
  .cards {
    grid-template-columns: repeat(1, 1fr);
    place-items: center;
  }
}

📍 BEM 패턴

맨날 중구난방으로 클래스명을 작성하다 세션에서 배운 BEM 패턴에 최대한 맞게 구현해봤습니당 좀 더 연습해보고 싶어요!

🥺 소요 시간, 어려웠던 점

3h
중간중간 시간 나는대로 해서 정확히는 모르겠지만 한 세시간정도 걸린것 같습니당! 오랜만에 한 페이지 전체 css를 입혀봐서 좀 오래 걸린 감이 있네요,, 태그 숨기는 기능을 잘못 이해해서 마지막에 다시 구현했습니다 햄버거 메뉴도 처음에 위치 잡는게 좀 어려웠던것 같아요

🌈 구현 결과

week1_assign3.mov

Happhee

옷을 조아하는 연서였구나>.< ㅎㅎㅎㅎ 옷은 사도사도 모자르긴하지ㅋㅎㅎㅋㅎㅋ
bem도 노력해서 명명한게 느껴진당!!! 넘 고생해떠 ㅎㅎ

Happhee · 2023-04-09T05:34:48Z

week1/assign3(myShop)/index.html

+          <ul class="cards__tagwrapper">
+            <li class="cards__tag">#디젤피카부</li>
+            <!-- 넘치는 태그는 안보이게 처리-->
+            <li class="cards__tag">#태그길게길게넘치나안넘치나테스트</li>


요거 ::before content사용하면 #없앨수이써용 ㅎㅎ

오 그런 방법이 있었구나! 이번 주 과제 하면서 고쳐볼겡 고마오 🫶🏻

Happhee · 2023-04-09T05:37:01Z

week1/assign3(myShop)/style.css

+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  word-break: keep-all;


꺄웅!! 넘 야무진데?!

Happhee · 2023-04-09T05:37:26Z

index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">


아 디테일해 ㅎㅎ

Happhee · 2023-04-09T05:42:03Z

index.html

+            <input type="checkbox" />
            <h3>ALL</h3>


input label 사용하는게 더 적절한것가타! 여기서 all은 input 체크박스에 대한 설명이니까?!

맞네 맞네 안그래도 여기에 h태그를 쓰는게 맞는지 긴가민가 했는데 바꿔봐야게써

Happhee · 2023-04-09T05:43:25Z

index.html

+        <section class="header__menu">
+          <article class="header__list">
+            <h2 class="header__sublist-title">메뉴</h2>
+            <br />


참 이게 접근성에 br태그가 적절하지 않아서...! 나같은 경우에 padding 이나 margin 으로 조절하는것가타!

헉 그렇구나 ,,! br 사용은 최대한 지양해야겠당

Happhee · 2023-04-09T05:47:06Z

index.html

        <!--card1-->
-        <article>
+        <article class="cards__card">


앙!! 몬가 복수단수 가 나열되어있어서 첨에 살짝쿵 잘 안와닿앗던것가타..! 음음 나라면 cards__cardItem이라고 하거나 cards__cardContent정도로 중복 단어를 완화(?)시켜줬을것가튼데 이거에대해서는 어떻게 또 생각할지 궁금하넹!

흠 마자 나도 이게 고민이었는데!! cardItem이나 cardContent가 더 적절한것 같넹 !👍

Happhee · 2023-04-09T05:48:45Z

index.html

+        <!--card2-->
+        <article>
+          <header>
+            <h2>사고싶은데 못구하는거</h2>


하놬ㅎㅋㅎㅋㅎㅋㅎ

Happhee · 2023-04-09T05:51:41Z

index.html

+        <h2 class="nav__title">CATEGORY</h2>
+        <section class="nav_content">
+          <article class="nav__category">
+            <input type="checkbox" class="nav__checkbox" />


bem방법론 조금더 디테일하게 하면 사실 여기서부터는 input이 article태그의 자식이니까 nav 밑의 블록으로 표현하기보다는

Suggested change

<input type="checkbox" class="nav__checkbox" />

<input type="checkbox" class="nav__category__checkBox"/>

가 조콤더 명확하게 보이겠찌?!

bem 방법론 요기 링크 참고했는데
여기서 계층 구조로 선언하는 것은 추천하지 않아서 이렇게 이름 지었던거여써! 어떤게 더 적절한 방법일까 고민되네 💭..!

Geun-Oh

완전 수고했어!! 다음 주차도 힘내자구..!

Geun-Oh · 2023-04-09T14:46:14Z

week1/assign3(myShop)/index.html

+      </nav>
+
+      <section class="cards">
+        <!--card1-->


요렇게 주석 달아서 구분한거 좋다...나는 css에서만 이렇게 구분했는데 앞으로는 html도 요래 적용해야지! 꿀팁 고마우

앗 사실 내가 헷갈려서 달아놓았던건데 ㅎㅎ 고마웅

Geun-Oh · 2023-04-09T14:49:23Z

week1/assign3(myShop)/index.html

+            <!-- 넘치는 태그는 안보이게 처리-->
+            <li class="cards__tag">#태그길게길게넘치나안넘치나테스트</li>
+          </ul>
+          <img class="cards__img" src="./img/disel.jpg" alt="디젤 반팔티" />


img alt 작성할 때 html에서는 하이픈(-)을 띄어쓰기로 인식하니까 띄어쓰기 대신에 하이픈 사용해주는게 웹 접근성을 고려했을 때 더 좋은 방법이라고 하네요!!

오 그렇구낭 !! 바로 수정해야겠다 고마어

Geun-Oh · 2023-04-09T14:50:59Z

week1/assign3(myShop)/style.css

@@ -0,0 +1,220 @@
+@font-face {


요 위에 GLOBAL 이나 CONFIG 같은 주석 달아줘도 좋을 것 같아!!

마자마자 깜빡했다! 꼼꼼히 봐줘서 고마웅

Geun-Oh · 2023-04-09T14:51:49Z

week1/assign3(myShop)/style.css

+  padding: 0 1.5rem;
+}
+
+/* 반응형 구현 */


아주 섬세하네...나도 이렇게 했어야 했는데..잘 했다!!

gunom · 2023-04-11T03:33:18Z

week1/assign3(myShop)/index.html

+          <header>
+            <h2>WishList 2</h2>
+          </header>
+          <ul class="cards__tagwrapper">


tag를 div로만 생각했는데 li태그가 훨씬 맞겠네요!

마자 나도 span으로 했다가 li로 고쳤었어 !!

Yeonseo-Jo added 9 commits April 3, 2023 16:37

init: 초기 설정

4839fe8

feat: 화면 구조 잡기

b9a527a

feat: 카드 요소 추가

ec6aa38

feat: 기본 과제 구현 완성

69c3500

feat: 심화 과제 구현 완성

f332b92

fix: 최종 수정(안쓰는 클래스 제거, title 수정

40202e6

rfc: 폴더 구조 수정 및 이미지 크기 조정

0a67bbe

fix: 이미지 크기 수정

f0003a8

fix: 태그 넘치면 통으로 안보이게 처리

a1e9ad7

Yeonseo-Jo added the 1주차 label Apr 7, 2023

Yeonseo-Jo requested review from gunom, Geun-Oh and parkheeddong April 7, 2023 02:15

Yeonseo-Jo self-assigned this Apr 7, 2023

Yeonseo-Jo changed the title ~~[ 1주차 기본/심화 과제 ] : assign3 - Yeonsinsa 👗👖👚~~ [ 1주차 기본/심화 과제 ] : assign3 - 웨비들의 냠냠 🍰 창업🏠 (Yeonsinsa 👗👖👚) Apr 7, 2023

Happhee reviewed Apr 9, 2023

View reviewed changes

Geun-Oh reviewed Apr 9, 2023

View reviewed changes

gunom reviewed Apr 11, 2023

View reviewed changes

Yeonseo-Jo merged commit 9e0471c into main Apr 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ 1주차 기본/심화 과제 ] : assign3 - 웨비들의 냠냠 🍰 창업🏠 (Yeonsinsa 👗👖👚) #1

[ 1주차 기본/심화 과제 ] : assign3 - 웨비들의 냠냠 🍰 창업🏠 (Yeonsinsa 👗👖👚) #1

Yeonseo-Jo commented Apr 7, 2023

Happhee left a comment

Happhee Apr 9, 2023

Yeonseo-Jo Apr 11, 2023

Happhee Apr 9, 2023

Happhee Apr 9, 2023

Happhee Apr 9, 2023

Yeonseo-Jo Apr 11, 2023

Happhee Apr 9, 2023

Yeonseo-Jo Apr 11, 2023

Happhee Apr 9, 2023

Yeonseo-Jo Apr 11, 2023

Happhee Apr 9, 2023

Happhee Apr 9, 2023

Yeonseo-Jo Apr 11, 2023 •

edited

Loading

Geun-Oh left a comment

Geun-Oh Apr 9, 2023

Yeonseo-Jo Apr 11, 2023

Geun-Oh Apr 9, 2023

Yeonseo-Jo Apr 11, 2023

Geun-Oh Apr 9, 2023

Yeonseo-Jo Apr 11, 2023

Geun-Oh Apr 9, 2023

gunom Apr 11, 2023

Yeonseo-Jo Apr 11, 2023

	<input type="checkbox" class="nav__checkbox" />
	<input type="checkbox" class="nav__category__checkBox"/>

[ 1주차 기본/심화 과제 ] : assign3 - 웨비들의 냠냠 🍰 창업🏠 (Yeonsinsa 👗👖👚) #1

[ 1주차 기본/심화 과제 ] : assign3 - 웨비들의 냠냠 🍰 창업🏠 (Yeonsinsa 👗👖👚) #1

Conversation

Yeonseo-Jo commented Apr 7, 2023

✨ 구현 기능 명세

🌼 PR Point

📍 header 상단 고정

📍 header 메뉴바

📍 특정 길이를 벗어나면 뒤의 태그 숨기기

📍 반응형 레이아웃

📍 BEM 패턴

🥺 소요 시간, 어려웠던 점

🌈 구현 결과

Happhee 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Yeonseo-Jo Apr 11, 2023 • edited Loading

Choose a reason for hiding this comment

Geun-Oh 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

Yeonseo-Jo Apr 11, 2023 •

edited

Loading