[1주차 기본/심화 과제] 웨비들의 냠냠 🍰 창업🏠 #1

simeunseo · 2023-04-03T07:04:14Z

🔗 구현 페이지

✨ 구현 기능 명세

기본 과제
- header
  - 상표와 메뉴 아이콘을 space-between으로 정렬
  - position:fixed로 상단 고정
- nav
  - 제목과 4개의 카테고리로 구성
- nav와 card section 배치
  - grid로 nav와 cards를 두 개의 column으로 배치
- card section
  - card section 내 cards또한 grid로 배치
  - 상품 제목, 해시태그, 이미지, 하트찜 구현 및 가운데 정렬
  - 하트찜은 align-self: flex-end로 오른쪽정렬
  - 해시태그 글자수가 특정 width(9rem)를 넘어가면 보이지 않도록 처리
심화 과제
- hover
  - 메뉴 아이콘 hover시 메뉴바 나타남
  - 10rem으로 width 고정, height는 100vh
  - nav 카테고리에 hover시 배경과 글자색 변경
- 반응형 레이아웃
  - media query로 특정 분기점에 따라 grid의 column개수를 5->4->3->2->1로 변경
  - 마지막 한 줄 정렬시에는 card section을 nav를 제외한 영역에서 가운데 정렬
  - header, nav는 align-items:center로 세로 정렬

🌼 PR Point

시맨틱 코드

평소 남발하던 div와 p태그를 한번도 쓰지 않아보았습니다!
https://inpa.tistory.com/entry/HTML-🏷️-태그-요약표
이 자료에 많은 태그들이 정리되어 있어서 참고하기 좋았습니다~
메뉴 아이콘 hover시 메뉴바가 나타나도록 하기

display:none으로 되어있던 메뉴바를 메뉴 아이콘 hover시에 display:block으로 바꿨습니다. 그런데 메뉴바가 화면에 나타나면 메뉴바가 메뉴 아이콘을 가리기 때문에, 더이상 메뉴아이콘을 hover하지 않은 상태가 되어 메뉴가 제대로 나타나지 않았습니다. 따라서 '메뉴 바'에 마우스가 hover되어있을 때도 display:block이 되도록 하는 코드를 추가하여 해결했습니다! 현수랑 보미는 어떻게 구현했을지 궁금하네용...
```
#header__menu {
  display: none;
}

#header__button:hover + #header__menu,
#header__menu:hover {
  display: block;
}
```
넘치는 해시태그 숨기기

해시태그 영역에 9rem으로 width를 정해주고, white-space:nowrap으로 하여 글자가 너비를 넘어가도 줄바꿈이 되지 않도록 했습니다. 그러면 width를 넘어가는 부분이 숨겨지게 해야했는데, overflow: hidden을 통해 구현 가능했습니다!

➕ (0407 수정사항 1)
정찬우님🙏 코드에서 해시태그 앞에 '#'을 붙일 때 하드코딩이 아니라 before라는 가상 클래스 선택자를 사용하신 걸 보고 훨씬 스마트한 방법인 것 같아서 저도 변경해보았습니다! {선택자}::before는 해당 요소의 앞을 가리키는 선택자이며, ::after는 해당 요소의 뒤를 선택할 수 있습니다.
```
.cards__card__tags > small::before {
  content: "#";
}
```
➕ (0407 수정사항 2)
마찬가지로 정찬우님🙏 코드를 참고해서, 넘치는 부분이 중간에 그냥 잘리는 게 아니라 단어 단위로 잘릴 수 있도록 수정했습니다!
해시태그들을 하나의 div로 묶고, 여기에 다음과 같은 css를 추가했습니다.
```
.cards__card__tags {
  width: 9rem;
  height: 1rem;  /*new*/
  overflow: hidden;
  word-break: keep-all; /*new*/
  text-align: center;
}
```
word-break:keep-all로 글자가 width를 넘어갈 시에 단어 단위로 줄바꿈이 되도록 하고, 두번째 줄로 넘어간 글자는 보이지 않도록 height를 주었습니다.

이 줄바꿈 속성은 언어에 따라 다르게 적용되는데, 한글단어의 경우 앞의 #와 다른 단어로 취급되어 아래와같이 #는 윗 줄에 남아있게 됩니다.

그러나 영어의 경우 #와 붙어서 함께 줄바꿈이 되는 것을 알 수 있었습니다!

줄바꿈 속성 참고자료
card 한 줄 정렬시 가운데 정렬

card section 안의 card들을 grid로 배치하고, nav와 card section또한 두 개의 column으로 이루어진 grid로 배치했습니다. 따라서 card section이 한 줄 정렬이 됐을 때 이 영억을 단독적으로 가운데 정렬할 수 있었습니다.

화면의 width에 따라 한 행에 위치하는 frame의 개수가 달라집니다. (5->4->3->2->1)
```
@media screen and (max-width: 690px) {
  #cards ul {
    grid-template-columns: repeat(1, 13rem);
  }
  #cards {
    justify-self: center;
  }
}
```

🥺 소요 시간, 어려웠던 점

3h
처음에 grid를 안쓰고 display:flex로만 정렬을 하려고 시도했는데, 그렇게 했더니 card section이 한 줄 정렬 됐을 때 가운데로 배치하는걸 어떻게 해야할 지 모르겠더라구요..! nav와 card section을 따로 나눠서 정렬하는게 필요했는데... 뭔가 복잡해져서 grid로 전부 바꿨습니다. flex로 구현한 분들은 어떻게 했는지 궁금!!

🌈 구현 결과물

전체 화면

hover

반응형

해시태그 영역에 긴 텍스트가 들어가도 9rem을 넘어가면 나타나지 않는 모습

borimong · 2023-04-03T08:12:04Z

week1/assign3/style.css

+  border-radius: 1rem;
+}
+
+nav h2 {


nav 내부에 있는 요소를 많이 선택했는디 요거는 nav { & > h2{ margin-bottom: 2rem; } } 이런 식으로 부모 선택자와 자식 선택자를 이용해서 nav 안으로 묶어서 정리해 주면 더 편할 것 같은데 어때요오?? :)

헉! 항상 중복해서 쓰면서 아뭔가 방법 없나,, 했었는데 &를 이용하면 되는구나! 완전 몰랐어 🤩🤩

borimong · 2023-04-03T08:14:01Z

week1/assign3/style.css

+time,
+mark,
+audio,
+video {


요거는 * (전체 선택자) 로 선택하면 좋을 것 같은데 어떨까요??? :)

엇 에릭마이어 reset.css 긁어온거라 그건 생각못했다ㅋㅋㅋㅋㅋ 근데 뭔가 전체가 아니라 일부에만 적용하려고 저렇게 하나하나 나열한게 아니려나 생각도 든다..! 그치만 reset.css도 생각하고 써야겠어

borimong · 2023-04-03T08:18:29Z

week1/assign3/index.html

+          </li>
+        </ul>
+      </nav>
+      <section id="cards">


시맨틱 태그 사용 굿굿!!! 👍👍

borimong · 2023-04-03T08:19:19Z

week1/assign3/index.html

+            <h3>청경채</h3>
+            <small>#푸릇푸릇 #신선</small>
+            <img
+              alt="청경채"


img 태그에 alt 태그 붙여주는 거 야무지게 잘 했다 ㅎㅎ 접근성 높은 코드를 위해 꼭 써주는 게 좋져!!! :)

borimong · 2023-04-03T08:24:23Z

week1/assign3/index.html

+      </nav>
+      <section id="cards">
+        <ul>
+          <li class="cards__card">


요거 li 대신에 article 로 해주면은 어떨까??? 나도 확실하진 않지만 이 카드 내용들은 웹사이트랑 독립적인 부분인 것 같아서!!! :)

오오.. 뭔가 리스트 형식인거는 ul ol로 써야지라고만 생각했는데 듣고보니 article도 맞는거같네.. 어떤것이 좋은 시맨틱 태그일까...

borimong · 2023-04-03T08:27:02Z

week1/assign3/style.css

+
+button {
+  background: inherit;
+  border: none;


none 은 디폴트 속성이라 안 넣어줘도 괜찮을 것 같아요!! :)

헙 그렇구나... 저거 왜 넣은거지... 고마워 👍👍👍

borimong · 2023-04-03T08:27:30Z

week1/assign3/style.css

+  border-radius: 0;
+  padding: 0;
+  overflow: visible;
+  cursor: pointer;


버튼에 커서 포인터 속성 주는 것 귯귯!!!! 💯

borimong · 2023-04-03T08:28:27Z

week1/assign3/style.css

+  grid-template-columns: repeat(5, 13rem);
+}
+
+@media screen and (max-width: 1330px) {


미디어쿼리도 야무지게 잘 해주었다!!! 수고 많아써 :)

borimong · 2023-04-03T08:29:30Z

week1/assign3/index.html

@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="ko">


꼼꼼하다ㅎㅎ

borimong · 2023-04-03T08:29:44Z

week1/assign3/index.html

+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>은서네 마라마라탕</title>


기여워여!!!!!

저도 들렸습니다!! 그래서 혹시 마라탕 개업일자는 언제 인가요? 먹으러 가려구요!😊

ㅋㅌㅋㅌ 포켓몬 체육관 관장 되시는 날에 개업해보겠습니다 ... 🫢

Happhee

오유!! 첫주차인데 야무지게 잘 해낸 은서 대다내!!!
시멘틱스럽게 작성하려고 노력한게 너무너무 잘보였어용 ㅎㅎ

나같은 경우에는 flex 안에 flex, flex 만들고 flex-wrap같은 속성 적용해서 가운데 배치 했던것같은데!
한번 리팩토링할때 flex로 바꿔서 도전 해봤으면 좋겟다욯ㅎㅎㅎㅎ

모르는거이씀 언제든 물어보구💛 마라탕 앱잼때 방문 할게~.~

Happhee · 2023-04-07T11:36:53Z

week1/assign3/index.html

@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="ko">


Happhee · 2023-04-07T11:37:34Z

week1/assign3/index.html

+  <body>
+    <header>
+      <h1>~은서네 샤브샤브~</h1>
+      <button><i class="fa-solid fa-bars"></i></button>


button type지정하는게 조하!! 함읽어바!

오오 몰랐던 정보야 고마워!!!

Happhee · 2023-04-07T11:39:59Z

week1/assign3/index.html

+        <h2>메뉴</h2>
+        <h3>새 상품 추가</h3>
+        <h3>찜 목록</h3>


약간말이지 요기는 오른쪽옆의 공간이니 nav랑 a태그로 구현하는게 어떨까시퍼!!

: 탐색 구획 요소함 참고해바요!

그로게 heading보단 그게 훨씬 시맨틱하다! 탐색 구획 요소?! 꼭 공부해보겠슴니당!!!

Happhee · 2023-04-07T11:40:39Z

week1/assign3/index.html

+            <img
+              src="https://img-cf.kurly.com/shop/data/goods/1619680685239l0.jpg"
+            />


img alt태그를 넣어주어야 하는 이유에 대해서도 읽어보고 적용해보기!

넵!! 검색엔진 반영에도 영항을 준다니 진짜 잊으면 안되겠다!

Happhee · 2023-04-07T11:42:18Z

week1/assign3/style.css

@@ -0,0 +1,125 @@
+/* reset.css */


reset.css 파일을 새로만들어서 적용하면 파일별로 기능이 명확하게 분리가 될것같네요!

그래야겠당 👊👊👊

Happhee · 2023-04-07T11:43:55Z

week1/assign3/style.css

+nav li {
+  display: flex;
+  background-color: white;
+  color: var(--main-color);


오!! var도 활용하는거 조하요!! ㅎㅎ

Happhee · 2023-04-07T11:44:38Z

week1/assign3/style.css

+}
+
+@media screen and (max-width: 690px) {
+  #cards ul {


자식 선택자를 사용하지 않은이유가 있나여?!

습관들여야겠다 ㅠ--ㅠ 최대한 distinct하게 선택하기!!!

Happhee · 2023-04-07T11:51:11Z

week1/assign3/style.css

+.cards__card > * {
+  margin-bottom: 1rem;
+}
+


옹 전체선택자가 클래스 밑에 오는건 첨보는데 ...! 사실 저는 전체 선택자가 지정되는 범위가 넓어서 오류룰 범할 가능성이 크다고 생각해요! 그래서 css 속성을 초기화 할때 말고는 사용을 지양하는 편인데..!

혹시 이렇게 만든 특별한 이유가 있나요?!

특정 구역 안에 있는 요소들에게 공통적인 마진을 줘야해서 그랬던 건데, 그 요소들에 class를 따로 부여하는 것이 더 낫겠네요!!!!o0o

Happhee · 2023-04-07T11:52:07Z

week1/assign3/style.css

+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--main-color);
+  text-underline-offset: 0.3rem;


진짜 디테일한데?!

Happhee · 2023-04-07T11:53:08Z

week1/assign3/style.css

+.cards__card__tags > small::before {
+  content: "#";
+}


세미나 자료 적극활용하는 은서 멋져💛

정찬우씨에게 배워왓스빈다 ㅎㅎㅎ

kwonET

전반적으로 선택자와 시맨틱 태그를 잘 활용한 것 같아서 많이 배우고 갑니다 ㅎㅎ
수고했어!

kwonET · 2023-04-13T11:43:30Z

week1/assign3/index.html

+        <ul>
+          <li>
+            <input type="checkbox" />
+            <h3>전체</h3>
+          </li>
+          <li>
+            <input type="checkbox" />
+            <h3>채소</h3>
+          </li>
+          <li>
+            <input type="checkbox" />
+            <h3>버섯</h3>
+          </li>
+          <li>
+            <input type="checkbox" />
+            <h3>기타</h3>
+          </li>
+        </ul>


ul li 태그는 이런 식으로 적용할 수 있겠구나- 라는 깨달음을 얻고 갑니다 👍

kwonET · 2023-04-13T11:45:50Z

week1/assign3/index.html

+            />
+            <i class="fa-solid fa-heart"></i>
+          </li>
+          <li class="cards__card">


class를 지어줄 때 은서만의 규칙같은 게 있는 걸까? 언더바 두개를 쓴 이유도 특별한 규칙이 있는 건지 궁금해 !

요거는 세미나에서 언급됐던 BEM 방법론을 이용한거야! https://velog.io/@fromzoo/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-BEM-%EB%B0%A9%EC%8B%9D

이렇게 하면 규칙도 생기고(협업할 때 좋쥐), 이름만으로도 구조화가 되어서 좋아 ㅎㅎ

kwonET · 2023-04-13T11:46:39Z

week1/assign3/index.html

+          <li class="cards__card">
+            <h3>배추</h3>
+            <div class="cards__card__tags">
+              <small>필수템</small>


small태그라는 것도 있구나 - p태그랑은 다른 느낌인 건가? 배우고 갑니다 ㅎㅎ

작은 글씨를 표시할 때 쓰는 것 같아 ㅎㅎ 다만 작다라는 의미가 상대적이다보니 좋은 태그인지는 잘 모르겠다... 개발하다보면 나중에 저거보다 더 작은 글씨가 생길수도 있으니...

kwonET · 2023-04-13T11:48:13Z

week1/assign3/style.css

+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;


기본 속성을 이렇게 초기화(?) 해주면 좋은 점이 있나요-? 저걸 지정 안해줘도 같은 결과가 아닌가 해서 !

이거는 reset css라고도 하는데! 기본적으로 크로스 브라우징을 위한거래. 브라우저마다 기본으로 설정되어있는 값이 다르다보니, 이러한 리셋 과정을 안해주면 chrome브라우저 기준으로 만들었던 것이 다른 브라우저에서는 그 브라우저의 기본 설정값 때문에 다르게 보이는 일이 발생할 수 있을거같아..! 또 이렇게 전체를 쫙 초기화해주고 시작하면 거슬리는 것 없이 깔끔하게 css를 작성할 수 있어서 좋아!

kwonET · 2023-04-13T11:49:20Z

week1/assign3/style.css

+h1 {
+  font-family: EBSHunminjeongeumSBA;
+  font-size: 2rem;
+}
+h2 {
+  font-family: EBSHunminjeongeumSBA;
+  font-size: 1.8rem;
+}
+h3 {
+  font-size: 1.3rem;
+}
+small {
+  font-size: 0.8rem;
+}


원래 태그에 기본으로 크기 설정이 되어있는 거 아닌가? 이렇게 따로 크기를 지정해줘야하는 건가요? 😮

heading태그에 기본적으로 설정되어있는 글꼴크기와 내가 바라는 크기가 달라서 내가 새로 지정해주었어 !

kwonET · 2023-04-13T11:50:22Z

week1/assign3/style.css

+:root {
+  --main-color: rgb(141, 19, 19); /* CSS 전역 변수 선언 */
+}


css에서 변수를 사용한 게 인상깊습니다 👍👍

kwonET · 2023-04-13T11:51:46Z

week1/assign3/style.css

+nav li:last-child {
+  margin-bottom: 0;
+}


나는 항상 클래스를 부여해서 따로 속성을 부여해줬었는데 선택자를 잘 활용하면 이렇게 편하게 할 수도 있구나-를 알고 가요 ㅎㅎ

child 선택자가 무궁무진하더라구 ㅎㅎ

kwonET · 2023-04-13T11:53:21Z

week1/assign3/style.css

+.cards__card__tags > small::before {
+  content: "#";
+}


와 css도 이런 것들을 알면 진짜 손이 덜 고생하는구나,,ㅎㅎ
굉장히 효율적인 방법이네요!

::before, ::after 속성 잘 활용하면 진짜 스마트하게 짤 수 있는 것 같아!!!

Week3/#1

[2주차 기본/심화 과제] 웨비들의 냠냠 🍰 창업🏠 손님을 모셔오자!🌈

[3주차 기본/심화 과제] 🌼 짱구는 못말려! 폭풍을 부르는 카드게임 대격돌 💖

[7주차 과제] 3주차 과제 리팩토링

simeunseo added 10 commits April 3, 2023 02:34

docs : 전체 태그 구조 작성

544daa3

init : css 세팅

fe6f7fd

style : 글꼴 세팅

3569270

style : 글꼴 변경, header 완료

bd18121

style : nav 완료

0197280

style : cards 및 반응형 완료

aa8c605

style : 찜하기 버튼 오른쪽 정렬, 호버이벤트

815936c

style : 넘치는 해시태그 가리기, 전체적 디테일 수정

b1ad23a

style : 글꼴 수정, header 세로정렬

188f9f3

docs : img 태그에 alt 추가

4aa3a67

simeunseo requested review from kwonET and borimong April 3, 2023 07:04

simeunseo self-assigned this Apr 3, 2023

simeunseo changed the title ~~[1주차 기본/심화 과제 ] 웨비들의 냠냠 🍰 창업🏠~~ [1주차 기본/심화 과제] 웨비들의 냠냠 🍰 창업🏠 Apr 3, 2023

simeunseo added the 1주차 label Apr 3, 2023

borimong reviewed Apr 3, 2023

View reviewed changes

simeunseo added 기본과제 심화과제 labels Apr 5, 2023

refactor : 넘치는 해시태그 자르기

02bca98

Happhee reviewed Apr 7, 2023

View reviewed changes

kwonET reviewed Apr 13, 2023

View reviewed changes

simeunseo merged commit ed9bb71 into main Apr 14, 2023

simeunseo added a commit that referenced this pull request May 4, 2023

Merge pull request #7 from simeunseo/week3/#1

412bb3d

Week3/#1

simeunseo added a commit that referenced this pull request May 4, 2023

Revert "Week3/#1"

3a6ff5d

simeunseo added a commit that referenced this pull request May 4, 2023

Revert "Week3/#1"

7275389

simeunseo added a commit that referenced this pull request May 4, 2023

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

92a3a5c

[2주차 기본/심화 과제] 웨비들의 냠냠 🍰 창업🏠 손님을 모셔오자!🌈

simeunseo added a commit that referenced this pull request May 12, 2023

Merge pull request #8 from GO-SOPT-WEB/week3/#1

890fbaa

[3주차 기본/심화 과제] 🌼 짱구는 못말려! 폭풍을 부르는 카드게임 대격돌 💖

simeunseo added a commit that referenced this pull request Jul 28, 2023

Merge pull request #12 from GO-SOPT-WEB/week7/#1

452bd5e

[7주차 과제] 3주차 과제 리팩토링

[1주차 기본/심화 과제] 웨비들의 냠냠 🍰 창업🏠 #1

[1주차 기본/심화 과제] 웨비들의 냠냠 🍰 창업🏠 #1

Conversation

simeunseo commented Apr 3, 2023 • edited Loading

✨ 구현 기능 명세

기본 과제

header

nav

nav와 card section 배치

card section

심화 과제

hover

반응형 레이아웃

🌼 PR Point

시맨틱 코드

메뉴 아이콘 hover시 메뉴바가 나타나도록 하기

넘치는 해시태그 숨기기

card 한 줄 정렬시 가운데 정렬

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

전체 화면

hover

반응형

해시태그 영역에 긴 텍스트가 들어가도 9rem을 넘어가면 나타나지 않는 모습

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

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

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

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

kwonET left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simeunseo Apr 14, 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 Apr 14, 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

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 Apr 3, 2023 •

edited

Loading

simeunseo Apr 14, 2023 •

edited

Loading

simeunseo Apr 14, 2023 •

edited

Loading