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

eunbeann · 2023-04-06T12:34:18Z

✨ 구현 기능 명세

기본 과제

header, nav, card section 으로 나누어 구현
- header - 상표와 메뉴 아이콘 / space-around 사용
- header - 스크롤이 되어도 상단 고정
- nav - 카테고리는 전체, 분류 1~3 총 4가지로 구현
nav, card section은 flex 혹은 grid를 사용해 배치
상품 카드 안에는 상품 제목, 해시태그 목록, 이미지, 하트 찜 누르기 필수
- 상품 카드 - 가운데 정렬
- 상품 카드 - 특정 길이를 벗어나면 뒤의 태그 안보임

심화 과제

hover
- header - 가려져 있던 메뉴바가 옆에 나타나고, 상품 추가와 찜 목록 리스트가 나타남
- header - 특정 너비를 가지며, 높이는 100vh 고정
- nav - 배경과 글자색 변경
반응형 레이아웃
- header, nav 세로 정렬
- 상품 카드는 5 → 4 →•••→1 순서로 줄어듦
  - 마지막 한 줄 정렬 시 가운데로 상품 카드 레이아웃 변경

생각 과제

🌼 PR Point

나중에 자스로 기능 추가 하려고…
- 해시 태그 li 태그 작성
- 찜 button 태그 작성

🥺 소요 시간, 어려웠던 점

풀리퀘가 어색.. 커밋 단위를 잘게 쪼개려고 의식하는 데 맘 처럼 잘 안된다. 요거 과제하면서 계속 연습하기!!
하드 코딩으로 하나하나 이름 바꾸려니까 이게 맞나?하면서 진행…
시간은 자잘하게 틈날때마다 해서 오히려 리프레쉬 느낌으로 좋았다
CSS 셀렉터를 부모>자식 쓰는게 아직 헷갈림 자꾸 냅다 이름 박아서 쓰게 된다..
시멘틱 태그가 어색하니 잘 안쓰게 됨. strong, h1 같은 태그는 모양이 내 마음대로 나오지 않아서 안쓰게 됨. 웹 접근성을 더 생각해야했던 것 같다. 추후 리펙토링시에 고려할 부분들

🌈 구현 결과물

Happhee

오우!!!!!은비니 시멘틱화 하려고 상당히 많이 노력하고 클래스명도 고민있게 작성해준게 보인다!!
사소하게 놓치는 속성들이 있었는데 그것들만 천천히 보완하면
탄탄한 웹개발자 될것같넹💛 고생해써!!

Happhee · 2023-04-07T23:20:59Z

breadStore/main.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="kr">


kr은 오디언어래여?

ㅎㅎㅎㅎㅎㅎㅎㅋㅋㅋㅋㅋㅋㅋㅋㅎㅎㅎㅎㅎㅎㅎㅎ 머쓱하게 수정...

Happhee · 2023-04-07T23:21:14Z

breadStore/main.html

+    <div class="main">
+        <nav class="nav">
+            <ul>
+                <p class="nav-title">종류</p>


옹 디테일해,,,

Happhee · 2023-04-07T23:21:43Z

breadStore/main.html

+        <p class="title">은빈이네 빵집 🥐</p>
+        <img class="menuBar" src="./imgs/7216128.png" />
+    </header>
+    <div class="main">


main으로 묶지않고 클래스명을 main으로 한 이유는 무엇일까여?

그르게! 여기 바로 main으로 태그를 주고 클래스명은 주지 않아도 괜찮을 것 같은데!

아마 main 태그 역할을 확실하게 확인하고 수정하려고 뒀다가 그냥 잊혀졌나봐... 👀..
시멘틱태그가 어색하다 ㅠ

Happhee · 2023-04-07T23:22:55Z

breadStore/styles.css

+    padding: 1em;
+    background-color: #feffff;
+    border-radius: 20px;
+    box-shadow: 2px 2px #2b7a78;


var color사용하는 방법도 잇따우

다음 과제 땐 이거 꼭 써볼거야

Happhee · 2023-04-07T23:23:26Z

breadStore/main.html

@@ -9,6 +9,7 @@
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
+    <link rel="icon" href="./imgs/BreadA.png" />


앙웅!디테일해💛

Happhee · 2023-04-07T23:27:51Z

breadStore/main.html

                <!-- ❤️  -->
            </div>
            <div class="card">
                <p class="bakery-title"> 빵 이름 </p>
                <p class="bakery-tag">#hash #tag</p>
                    <img class="bakery-img" src="./imgs/BreadA.png"/>
-                <button class="bakery-like"> ♡ </button>
+                    <button class="bakery-like"> ♥ </button>


button type 지정왜하는지 찾아보면 조흘것가타

Happhee · 2023-04-07T23:28:02Z

breadStore/styles.css

+    text-decoration: none;
+}
+
+.category [href] {


Happhee · 2023-04-07T23:28:29Z

breadStore/main.html

+            <div class="menu-bar__detail">
+                <ul class="menu-bar__list"> 메뉴
+                    <hr />
+                    <li class="menu-bar__list-title"> 새 상품 추가 </li>


클래스명이 완전 야무진데

Happhee · 2023-04-07T23:28:38Z

breadStore/main.html

-                <li class="detail-title"> 찜 목록</li>
-            </ul>
-        </div>
+        <div class="c-menu-bar"> ☰


c는 무슨의미에여?

그르게! c는 어떤 의미인가요?!

정답! choice에서 가져온거 같다!

container에서 가지고 왔던건데 지금 보니 의미가 명확하지 않군요.... 다른 클래스명을 다시 생각해봐야겠으요 🤔

Happhee · 2023-04-07T23:29:12Z

breadStore/main.html

+                    <li class="section__tag-list">#옆면이 보이는</li>
+                    <li class="section__tag-list">#바게뜨</li>
+                    <li class="section__tag-list">#바게뜨?</li>
+                    <li class="section__tag-list">#바게트?</li>


:before content :'#'하면 저거 굳이 #을 여기에 안써줘도 데게따! ㅎㅅㅎ 세미나 복습이용

pinktopaz

은빈이 첫 과제 너무 수고했어🌸
이것저것 시도한 게 보이고, 클래스명도 직관적으로 잘 지으려고 한 게 보인다!!
코드리뷰 보고 한 번 다시 쓱 살펴보면서 공부 다시 해보면 좋을 것 같아! ㅎㅎ

pinktopaz · 2023-04-09T16:15:55Z

breadStore/styles.css

@@ -0,0 +1,196 @@
+@import "reset.css";
+


보통 style.css로 명명하는데 styles.css로 지어준 이유가 있을까?!

의식의 흐름? 특별히 이유는 없는데 항상 CSS하면 Cascading Style Sheets 가 같이 떠올라서 styles.css 라고 적는 듯?! 뭔가 나한테 스타일 시트하면 여러 개인 느낌이ㅇㅑ..

pinktopaz · 2023-04-09T16:22:38Z

breadStore/styles.css

+@import "reset.css";
+
+body {
+    padding-top: 4em;


코드를 쭉 보니까 css 속성에 별 다른 순서를 정하지 않은 것 같은데, 순서에 맞춰서 속성을 적어주면 가독성도 올라가고 깔끔해져서 한 번 시도해보면 좋을 것 같아! 내 PR을 한 번 봐도 좋고, 현업에서 사용중인 CSS 작성 순서와 쉽게 자동 정렬하기(VScode 확장프로그램) 이거 참고해봐도 좋을 것 같아!

안그래도 성경이 코드 보고 CSS 가독성에 대해서 다시 한 번 생각해 봤어!!!!! 확장프로그램까지 있다니,, 참고해서 다음부턴 적용해보려고 덕분에 배웠당 🫡

pinktopaz · 2023-04-09T16:23:54Z

breadStore/styles.css

+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #feffff;


변수 이용해서 색상 지정하는 것도 연습해보면 좋겠당! 사용자 지정 CSS 속성 사용하기 (변수)

pinktopaz · 2023-04-09T16:25:31Z

breadStore/main.html

-                <li class="detail-title"> 찜 목록</li>
-            </ul>
-        </div>
+        <div class="c-menu-bar"> ☰


그르게! c는 어떤 의미인가요?!

pinktopaz · 2023-04-09T16:29:09Z

breadStore/main.html

+<body>
+    <!-- header -->
+    <header>
+        <p class="title">은빈이네 빵집 🥐</p>


p 태그 말고 h1 태그를 이용해보는 건 어때?! 아무래도 페이지에서 가장 중요한 제목이니까! p를 사용하니까 우선순위가 많이 떨어져보여서 ㅎㅅㅎ

h1~h6 태그에 손이 많이 안가서 거의 안썼는데 시멘틱 태그에서 이 태그들이 내용의 우선순위에도 유의미하단 걸 잊고 있었네!!! 리펙토링 할 때 참고해서 heading tag 부지런히 써봐야겠다

pinktopaz · 2023-04-09T17:03:06Z

breadStore/styles.css

+.nav__category:hover {
+    color:#def2f1;
+    background-color: #17252A;
+    text-decoration: none;


text-decoration: none; 이것도 기본값이라서 빼도 될 것 같앙!

pinktopaz · 2023-04-09T17:04:31Z

breadStore/styles.css

+    text-decoration: none;
+}
+
+.nav__category [href] {


오홍 이렇게도 지정이 가능하구나 몰랏다 이건

저도 덕분에 새로운 방법 배워 갑니다~!👍🏻

pinktopaz · 2023-04-09T17:05:50Z

breadStore/styles.css

+}
+
+section {
+    flex-grow: 1;


section_card에 width가 지정되어 있고, flex-wrap도 적용이 되어있어서 flex-grow 필요없을 것 같은데!!

pinktopaz · 2023-04-09T17:12:31Z

breadStore/styles.css

+        width: 55vw;
+        height: auto;
+    }
+    .section__tag {


구현 화면 보니까 max-width:650px에서는 해시태그가 그대로 다 보여서 여기서도 따로 해시태그 컨테이너 width에 대해 처리를 해줘야할 것 같아!

안그래도 지민언니 PR 보면서 디테일한 부분들을 많이 놓쳤구나 체감했었어 ㅋㅋ ㅠㅠ 참고해야겠어

pinktopaz · 2023-04-09T17:18:36Z

breadStore/styles.css

+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    flex-shrink:0;


보니까 지금 nav에는 따로 너비를 주지 않고 nav-category에 width: 6rem;를 줘서 이 너비에 따라 nav의 너비도 맞춰진 상태인 것 같거든?! 그리고 height도 nav-category에 지정된 margin, padding에 따라 조정되고 있는 상황이라서 flex-shrink:0;를 안써도 될 것 같아! 원래 flex-shrink가 정해진 너비를 자식 요소가 벗어나면 너비에 맞춰서 얘를 줄이지 말고 정해진 크기를 유지하라는 건데, 부모 요소에 정해진 너비가 없고 자식 요소의 크기에 따라 조정되고 있잖아! 그래서 안써줘도 될 것 같아!

urjimyu

은빈 첫 과제 진짜 고생 많았어!! 엄청 꼼꼼하게 고민하면서 만든 게 보인다✨

urjimyu · 2023-04-10T03:05:58Z

breadStore/main.html

+    <!-- header -->
+    <header>
+        <p class="title">은빈이네 빵집 🥐</p>
+        <div class="c-menu-bar"> ☰


나는 아이콘 넣었는데 이렇게 그냥 텍스트로 넣어주는 게 더 깔끔하고 좋은 것 같네!

urjimyu · 2023-04-10T03:08:31Z

breadStore/main.html

+        <div class="c-menu-bar"> ☰
+            <div class="menu-bar__detail">
+                <ul class="menu-bar__list"> 메뉴
+                    <hr />


이전에는 hr 요소가 단순 가로선을 의미했고 지금도 브라우저는 수평 가로선으로 나타내지만, HTML5에서는 주제의 흐름이 바뀌었다는 의미적인 용어로 쓰인다고 해서 참고하면 좋을 것 같아요!

urjimyu · 2023-04-10T03:13:12Z

breadStore/main.html

+    <!-- main : except header -->
+    <div class="main">
+        <nav>
+            <p class="nav__title">종류</p>


p 태그를 쓴 이유가 궁금해요! 가능하다면 헤딩 태그를 써도 좋을 것 같아요~

특별한 이유는 없이 썼네..!! 시멘틱 태그가 어색해서 헤딩 태그를 써도 될지에 대한 걱정을 했던 것 같네여 좋은 의견 감삼당!! 코드 적을 때 이걸 왜 쓰는지에 대한 고민을 항상 해봐야겠어

위에서도 말했는데 heading 태그를 안써버릇하다보니까 손이 너무 안가서 거의 p 아니면 div 태그를 썼던 것 같아!!
웹 내 우선순위 표기에 있어서도 헤딩태그를 쓰는 쪽이 나을 것 같아서 리펙토링때는 고려해서 적어보겠습니당 !!!

urjimyu · 2023-04-10T03:14:39Z

breadStore/main.html

+        </nav>
+        <!-- section : container of cards -->
+        <section>
+            <!-- article : a card * 12 -->


주석으로 이런 구조 설명 적어놓으니까 이해하기 편하고 좋네요☺️

urjimyu · 2023-04-10T03:18:16Z

breadStore/main.html

+                    <li class="section__tag-list">#모르겟다</li>
+                </ul>
+                    <img class="section__img" src="./imgs/Bread1.png" alt="Baguette_IMG01"/>
+                    <button class="section__like"> ♥ </button>


자스까지 생각해서 태그 선택한 거 좋아요~

버튼 타입 힉힉...써쥬긔~

urjimyu · 2023-04-10T03:26:51Z

breadStore/styles.css

+    text-decoration: none;
+}
+
+.nav__category [href] {


저도 덕분에 새로운 방법 배워 갑니다~!👍🏻

[ 1주차 기본/심화/생각 과제 ] WEB 💛 TO DO MATE

eunbeann added 16 commits April 3, 2023 00:42

feat: basic layout [breadStore]

f96c027

style: add favicon

9f18c30

refactor: Change nav List to Checkbox

a7a964a

style: detail Css, add nav hover style

cb57ed4

feat: hamburger hover

d6176f8

style: Add hover style likebtn

55e25e7

refactor: Edit image file names

39f07c6

refactor: Edit TagName

0d803d7

feat: to-do init

7cbd0af

style: calc grid, detail styles

cde34d5

style: Edit CSS, hardcoding

cc1ba30

docs: Add Think About Web performance

e7503d2

feat: fin the breadStore

acfa7ea

style: edit media tagName

f0bd499

feat: add alt in img tag

e76fe39

style: add Title, favicon

ed758c5

eunbeann requested review from pinktopaz, Arooming and urjimyu and removed request for Arooming April 7, 2023 04:22

Happhee reviewed Apr 7, 2023

View reviewed changes

pinktopaz reviewed Apr 9, 2023

View reviewed changes

urjimyu approved these changes Apr 10, 2023

View reviewed changes

eunbeann added 기본과제 심화과제 1주차 labels Apr 12, 2023

eunbeann added 4 commits April 12, 2023 09:53

Commnet: Delete Comment in StyleSheet

399571c

style: CSS sorting

da6b0bf

Codereview: edit html lang

f28d6b6

CodeReview: Edit TagNames

b39cb80

eunbeann and others added 15 commits April 12, 2023 10:54

CodeReview: edit hashtag Using :before

5e55958

CodeReview: pull menu text out of ul / hr to border-bottom

5f87ffc

CodeReview: px to rem / replace tag p to h2

0c2b22e

CodeReview: delete a/href tag in html/css

8b23b78

CodeReview: input selfclosing, replace a to p

385317a

CodeReview: Add type="button"

b58d3ba

CodeReview: delete meaningless css

9e2321f

refactor: change html lang

1fe5e41

code-review: Add type in button

d4276e9

refactor: rename class name to-dos

49978ab

code-review: 성경:달력 그리드구조 변경

22f7ff5

style: px to rem

d5bf28d

style: edit detail css

d247337

Merge branch 'week1' into week1-todomate

a0fbe43

Merge pull request #2 from GO-SOPT-WEB/week1-todomate

e03617a

[ 1주차 기본/심화/생각 과제 ] WEB 💛 TO DO MATE

eunbeann merged commit 63d81c7 into main Apr 14, 2023

eunbeann deleted the week1 branch April 26, 2023 08:50

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

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

Conversation

eunbeann commented Apr 6, 2023 • edited Loading

✨ 구현 기능 명세

기본 과제

심화 과제

생각 과제

🌼 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

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

eunbeann Apr 11, 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

Choose a reason for hiding this comment

Arooming Apr 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pinktopaz 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

urjimyu 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

eunbeann commented Apr 6, 2023 •

edited

Loading

eunbeann Apr 11, 2023 •

edited

Loading

Arooming Apr 10, 2023 •

edited

Loading