[1주차 기본과제] 3번과제 #3

eastlaw80 · 2023-04-07T14:09:30Z

✨ 구현 기능 명세

기본 과제

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

🌼 PR Point

Header에는 fixed 속성을 부여했습니다. 그랬더니 아래에 있던 것들이 header 아래로 들어가버리길래 main섹션에 패딩을 부여하여 이를 해결했습니다.
nav와 card section 모두 flex로 정렬하였는데, 이때 nav의 크기가 card section에 밀려서 크기가 줄어드는 상황이 발생해서 flex-shrink를 0으로 넣어줘서 이를 해결했다. 또한 세로로 정렬하니 아래로 쭉 길어져 버리길래 height를 fit-content로 부여해서 조정해주었다.
card section은 flex wrap을 부여하여서 여러줄로 보이도록 하였다.
card content 내의 정렬은 felx 를 이용하여 felx-direction은 colum, 그리고 가로축 세로축 모두 center로 배열했다. 이때, 예시사진에서는 하트만 오른쪽에 붙어 있어서 이것만 오른쪽으로 붙이고 싶었는데 이것이 제대로 안됐음. 원래 어떻게 배열해야 하는지 궁금함.
태그 부분이 특정 길이를 넘어가면 뒤의 태그는 안보이게 만들기 위해 먼저 태그가 들어있는 div에 flex-wrap을 wrap으로 부여하여 태그의 길이가 넓이를 넘어가면 두줄로 넘어가도록 했다. 그후 넓이와 높이를 한정지은뒤, overflow를 hidden으로 하여 범위를 넘어간 것들은 안보이도록 하였다. 이 방법을 억지로 하긴 했지만,,, 뭔가 더 깔끔한 의도된 방법이 있을거 같은데 잘 되지 않았다.

🥺 소요 시간, 어려웠던 점

5h
의외의 곳에서 너무 시간을 많이 썼다. 속을 썩인 부분은 바로 nav였다. flex-shrink라는 속성을 몰라서 nav바가 자꾸 줄어드는데 이걸 어떻게 해야하는지 한참 찾았다. 또한 높이와 너비에 적용하는 fit-content라는 속성도 오늘 처음봤다. 자꾸 꽉차버리는 너비를 수정할 때 굉장히 빠르고 효과적이었다. 물론 이걸 찾는 과정이 빠르진 않았지만,,,태그를 안보이게 하는 건 뭔가 좀 깔끔한 방법을 찾다가 결국 그냥 내가 생각할 수 있는 가장 억지스러운 방법으로 해냈다. 왜인지는 모르겠는데 flex 속성을 부여 안하면 p태그로 작성된 글들이 이상한 모양으로 찌그러든다. 그래서 억지로 felx를 사용하면서 안보이게 하는 방향으로 했다.

🌈 구현 결과물

Happhee

오우! 시멘틱구조 잡는거에 신경쓴게보인다!!!ㅎㅎㅎ
대신 커밋 조금만더 분할시켜서 올려주면 편할것가타 ㅎㅎ

추가루 상품 정렬이지금 가운데에서 되고 있는데 왼쪽부터 채워지게 하려면
.cards 에 align-items: center; 넣어주면 델것가튼데!

고생많아써💛 심화도 나중에 도전해보길!

Happhee · 2023-04-10T01:27:36Z

Week1/3rd_assginment.html

+    ></script>
+  </head>
+  <body>
+    <header class="header">


태그가 header인데 클래스명을 header로 하신 이유가 있나요?!

앗 class를 그냥 다 부여하는 경향이 있어서,,굳이 클래스명이 같다면 부여하지 않고 태그이름으로 사용해도 되겠네요!

마자요!!

한글을 사용하니까 lang="ko"로 해주면 더 좋을 것 같아용!!
en는 한글을 변환하지 못하지만, ko는 한글과 영어를 모두 자동 변환해준다는 장점이 있다고 합니닷!!

Happhee · 2023-04-10T01:28:20Z

Week1/3rd_assginment.html

+  <body>
+    <header class="header">
+      <h1 class="header_title">Heon's Camera</h1>
+      <button class="header_btn">


button type 지정하는 이유도 살펴보기이!

넵 살펴봤습니다 button type에 그런 의미가 있는줄 몰랐네요,,

Happhee · 2023-04-10T01:28:37Z

Week1/3rd_assginment.html

+    <header class="header">
+      <h1 class="header_title">Heon's Camera</h1>
+      <button class="header_btn">
+        <i class="fa-solid fa-bars" style="color: #005eff"></i>


요기만 style을 지정해준 이유가 있낭?!

이부분은 색깔 확인하고 나중에 css로 다시 부여한다는 걸 깜빡하고 그대로 둔거 같네요,, CSS로 다시 부여하겠습니다!

Happhee · 2023-04-10T01:29:08Z

Week1/3rd_assginment.html

+        <h3 class="nav_title">종류</h3>
+        <ul>
+          <li class="nav_content"><input type="checkbox" /> 전체</li>
+          <li class="nav_content"><input type="checkbox" />풀프레임</li>


input label 로 묶어주면 더 시멘틱스럽겟다~💛

아 input은 라벨 태그 사용가능하다는 걸 까맣게 잊고 있엇습니다...! 사용해서 다시 묶어 주겠습니다!

갠차나요 그럴줄알고 2주차 과제에 넣어놓았다는 사실 >.<

오왕 nav 태그 안에 ul, li 사용해준 디테일 넘 멋져요

Happhee · 2023-04-10T01:29:45Z

Week1/3rd_assginment.html

+          <div class="cards_tagbox">
+            <p class="cards_tag">#소니</p>
+            <p class="cards_tag">#풀프레임</p>
+            <p class="cards_tag">#플래그쉽</p>
+          </div>


::before 속성사용하면 #은 제거할수있겟따!

이부분도 before써서 작성해줄 생각도 못했네요,, 사용해보겠습니다!

1차세미나때 배웠는데~.~

Happhee · 2023-04-10T01:30:07Z

Week1/3rd_assginment.html

+            <p class="cards_tag">#풀프레임</p>
+            <p class="cards_tag">#플래그쉽</p>
+          </div>
+          <img class="cards_img" src="./static/a7m4.jpeg" alt="a7m4" />


여기 alt는 기기 이름인가요?! 궁금

네네 alt안에 있는건 전부 기기명입니다!

Happhee · 2023-04-10T01:31:42Z

Week1/3rd_assignment.css

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


요걸 html 파일에서 불러오지 않고 css에서 Import 한 이유가 있나아?!

어,,,제가 처음 배울때 다들 이렇게 하길래 그냥 이렇게 했습니다..! 뭔가 html파일에 css 하나만 연결되는게 깔끔한거 같긴 한데 큰 이유는 없었습니다,,

아하!!! 저는 html에 불러와서 그냥 무슨이유였는지 궁금해써용!! 먼가 머랄까 css안에서 css부르면 파일 분리시키는 이유를 모르겟어서!

오홍홍!! 근데 reset.css를 global style처럼 사용한 거 같은데 !! 요래 써도 분리하는게 별론걸콰?? *{} 전체에 적용하는게 더 나운가??
아니 나더 이번에 오랜만에 css 쓰는데 코드가 생각보다 길어져서 분리하면 푠할텐데 생각이 들더라귱!! 궁금궁금!

Happhee · 2023-04-10T01:32:31Z

Week1/3rd_assignment.css

+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 10rem;
+  height: 0.65rem;
+  overflow: hidden;
+  word-break: keep-all;
+  padding: 0.2rem;


속성순서 깔끔한데 혹시 동헌이만의 규칙으로 적어준걸까요?!

어 음 그냥 보통 배열을 먼저 생각한뒤에 크기 지정하고, 그 뒤에 원하는 기능과 자잘한 속성들을 넣어주는 편이라 그런 순서로 적은것 같아요!

CSS 속성순서를 회사별로 지정하고 있다는사실!! ㅎㅅㅎ우리도 일관성있게 하면 좋겟죵!

왕 다 rem으로 통일시킨 거 넘 멋지다.. 나도 rem으로 이제 통일시켜봐야겠어..!

Dangpy · 2023-04-10T06:13:42Z

Week1/3rd_assginment.html

+      </nav>
+      <section class="cards">
+        <!--첫번째-->
+        <article class="cards_content">


article, section 시맨틱하게 사용하는거 헷갈려서 찾아봤는데!! section 안에 article이 들어가는 것보다 article안에 여러개의 section이 존재하는게 자연스럽다구 하더라구용~~
" 서로 관련 있는 내용을 모아 놓아야 할 <section>안에 각각이 독립된 <article>이 들어가 서로 다른 내용의 독립 <article>이 배치되기 때문"이라고 하더라구욥!!
(저는 결국 고민하다 <section>안에 <div>를 사용했지만요...)

무튼 알고있음 좋을 것 같아서 스리슬적 남겨놓고 갑네다 ~~

오옹 이건 단순 궁금증인데
1주차 셈나 자료 html - 시멘틱 태그 파트에
article - section ❌
section - article ⭕ 로
article 안에 section이 들어가는 건 지양하는 게 좋다라고 들은 것 같긴 한데,, 뭐가 더 좋은 걸까용?

Dangpy

시간 없었을텐데 !!!! 욜심히 했돠 !!!! 심화도 시간 있을 때 차근차근 해보면 좋을 것 같아유~~~~>< 코딩짱이 되는 그날까지 함께 달려가보자구 화이탱탱~~~ css 스타일링 일관되게 한 것도 넘 죠았다... 당신은 쵝오...

yesongoget

이정도면 시멘틱좌.. 동헌쓰 배워갑니다~!~!

yesongoget · 2023-04-11T07:09:26Z

Week1/3rd_assginment.html

+    ></script>
+  </head>
+  <body>
+    <header class="header">


한글을 사용하니까 lang="ko"로 해주면 더 좋을 것 같아용!!
en는 한글을 변환하지 못하지만, ko는 한글과 영어를 모두 자동 변환해준다는 장점이 있다고 합니닷!!

yesongoget · 2023-04-11T07:10:32Z

Week1/3rd_assginment.html

+        <h3 class="nav_title">종류</h3>
+        <ul>
+          <li class="nav_content"><input type="checkbox" /> 전체</li>
+          <li class="nav_content"><input type="checkbox" />풀프레임</li>


오왕 nav 태그 안에 ul, li 사용해준 디테일 넘 멋져요

yesongoget · 2023-04-11T07:25:35Z

Week1/3rd_assginment.html

+      </nav>
+      <section class="cards">
+        <!--첫번째-->
+        <article class="cards_content">


오옹 이건 단순 궁금증인데
1주차 셈나 자료 html - 시멘틱 태그 파트에
article - section ❌
section - article ⭕ 로
article 안에 section이 들어가는 건 지양하는 게 좋다라고 들은 것 같긴 한데,, 뭐가 더 좋은 걸까용?

yesongoget · 2023-04-11T07:27:00Z

Week1/3rd_assignment.css

+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 10rem;
+  height: 0.65rem;
+  overflow: hidden;
+  word-break: keep-all;
+  padding: 0.2rem;


왕 다 rem으로 통일시킨 거 넘 멋지다.. 나도 rem으로 이제 통일시켜봐야겠어..!

feat.기본과제완료

fb800ea

eastlaw80 changed the title ~~feat.기본과제완료~~ [1주차 기본과제] 3번과제 Apr 7, 2023

eastlaw80 requested review from yesongoget and Dangpy April 7, 2023 14:19

eastlaw80 self-assigned this Apr 7, 2023

eastlaw80 added the 1주차 label Apr 7, 2023

Happhee reviewed Apr 10, 2023

View reviewed changes

Dangpy reviewed Apr 10, 2023

View reviewed changes

yesongoget closed this Apr 11, 2023

yesongoget reopened this Apr 11, 2023

yesongoget reviewed Apr 11, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차 기본과제] 3번과제 #3

[1주차 기본과제] 3번과제 #3

eastlaw80 commented Apr 7, 2023

Happhee left a comment

Happhee Apr 10, 2023

eastlaw80 Apr 10, 2023

Happhee Apr 10, 2023

yesongoget Apr 11, 2023

Happhee Apr 10, 2023

eastlaw80 Apr 10, 2023

Happhee Apr 10, 2023

eastlaw80 Apr 10, 2023

Happhee Apr 10, 2023

eastlaw80 Apr 10, 2023

Happhee Apr 10, 2023

yesongoget Apr 11, 2023

Happhee Apr 10, 2023

eastlaw80 Apr 10, 2023

Happhee Apr 10, 2023

Happhee Apr 10, 2023

eastlaw80 Apr 10, 2023

Happhee Apr 10, 2023

eastlaw80 Apr 10, 2023

Happhee Apr 10, 2023

Dangpy Apr 10, 2023

Happhee Apr 10, 2023

eastlaw80 Apr 10, 2023

Happhee Apr 10, 2023

yesongoget Apr 11, 2023

Dangpy Apr 10, 2023 •

edited

Loading

yesongoget Apr 11, 2023

Dangpy left a comment

yesongoget left a comment

yesongoget Apr 11, 2023

yesongoget Apr 11, 2023

yesongoget Apr 11, 2023

yesongoget Apr 11, 2023

[1주차 기본과제] 3번과제 #3

Are you sure you want to change the base?

[1주차 기본과제] 3번과제 #3

Conversation

eastlaw80 commented Apr 7, 2023

✨ 구현 기능 명세

🌼 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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Dangpy Apr 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Dangpy left a comment

Choose a reason for hiding this comment

yesongoget 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

Dangpy Apr 10, 2023 •

edited

Loading