[오성준] Sprint1 #24

yeram7591 · 2024-04-26T09:30:55Z

요구사항

UI 디자인 기초 토픽을 수강해 보세요.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
PC사이즈만 고려해 주어진 디자인으로 구현합니다.

기본

심화

사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)
palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.

주요 변경사항

스크린샷

멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다.

KingNono1030 · 2024-04-27T05:29:58Z

index.html

+  <main>
+    <div class="container">
+      <div class="wrapper">
+        <div class="section02 hot-item">


.section01 랑 .section02 가 다른 부모 요소와 계층 구조를 가지는데, 유사한 클래스명을 부여한게 독특합니다.

맞습니다 ! 해당 사항은 코드리뷰를 통해서 설명드릴게요 !

KingNono1030 · 2024-04-27T05:39:39Z

style.css

+  font-size: 40px;
+  margin:12px 0px 24px;
+  line-height: 56px;
+  font-weight: 700;


font 속성의 경우 아래 mdn 참고하셔서, 한 줄 안에 표현할 수 있습니다.
위 코드의 경우
font: 700 40px / 56px 로 표현할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/font#formal_syntax

KingNono1030 · 2024-04-27T05:44:20Z

index.html

+  </header>
+
+  <main>
+    <div class="container">


.container 안에 .wrapper 가 있고 div 가 계속 중첩되어 있는 모습이 가독성이 좋지 않다고 생각합니다.
.conainer 태그 안에 요소를 배치한 의도가 있을거라 생각해, 모든 커밋에서 .container 검색해봤습니다. .container 에 어떠한 스타일링도 없더군요. 빼버리는게 더 나을거 같습니다.

좋은 생각입니다 !wrapper라는 단어를 container로 변경하는 것도 고려해보세요 😊

KingNono1030 · 2024-04-27T05:48:26Z

index.html

+      </div>
+
+      <div class="section01 image-bottom">
+        <div class="visual-text">


위의 클래스명의 경우 "section02-요소명" 처럼, 블록-요소 느낌으로 네이밍했다는 인상을 받았습니다. 그래서 visual-text 라는 클래스명이 기존 흐름에 비해 특이하다는 생각해봤습니다.

KingNono1030 · 2024-04-27T05:52:40Z

index.html

+
+  <footer>
+    <div class="footer-content">
+      <span>@codeit - 2024</span>


span 요소를 자주 쓰시네요. 부모인 div.footer-content 가 플렉스 박스여서
인라인이든 블록이든 flex-flow 따르게 되는데,
div 요소와 span 요소를 번갈아 쓰신 점 궁금합니다.

KingNono1030 · 2024-04-27T05:54:49Z

index.html

+    <div class="footer-content">
+      <span>@codeit - 2024</span>
+      <div class="privacy-faq">
+        <a href="privacy.html"><span>Privacy Policy</span></a>


a 태그 안에 바로 컨텐츠를 넣는 것이 아닌,
span 태그로 한번 더 감싼 의도가 궁금합니다.

kiJu2 · 2024-04-29T15:12:44Z

수고 하셨습니다 ! 위클리 미션 하시느라 정말 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다.

kiJu2 · 2024-04-29T15:22:07Z

commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?

git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
흔히 하는 말이 있습니다:

커밋은 합칠 수 있지만 나눌 수 없습니다.

그럼 커밋을 언제 해야 할까요?

저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:

커밋을 하는 단위는 커밋 메시지 한 줄로 설명할 수 있는 행동
하나의 목표 혹은 액션이 달성될 때

또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:

tl;dr:

커밋 메시지 형식

type: Subject

body

footer

기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다.

메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다.

feat : 새로운 기능 추가
fix : 버그 수정
docs : 문서 내용 변경
style : 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 등
refactor : 코드 리팩토링
test : 테스트 코드 작성
chore : 빌드 수정, 패키지 매니저 설정, 운영 코드 변경이 없는 경우 등

원문보기

kiJu2 · 2024-04-29T15:22:27Z

images/Group 19-1.png

파일명에 띄어쓰기는 넣지 않는게 좋습니다 !

브라우저에서 불러올 때 url의 경우 띄어쓰기는 %20과 같이 인코딩 되므로 웹 접근성이 저하될 수 있습니다. 또한 서버와 클라이언트 간의 인코딩 설정이 다를 경우 문자가 깨질 수 있습니다. 😊

kiJu2 · 2024-04-29T15:28:49Z

images/Group [email protected]

혹시.. 팬더친구 로고가 너무 많은 것 같은데 히스토리가 있으실까염..?

kiJu2 · 2024-04-29T15:29:09Z

images/Group [email protected]

kiJu2 · 2024-04-29T15:29:13Z

images/Group [email protected]

kiJu2 · 2024-04-29T15:29:15Z

images/Group [email protected]

kiJu2 · 2024-04-29T15:53:25Z

index.html

+  <main>
+    <div class="container">
+      <div class="wrapper">
+        <div class="section02 hot-item">


맞습니다 ! 해당 사항은 코드리뷰를 통해서 설명드릴게요 !

kiJu2 · 2024-04-29T15:54:35Z

index.html

+    <div class="footer-content">
+      <span>@codeit - 2024</span>
+      <div class="privacy-faq">
+        <a href="privacy.html"><span>Privacy Policy</span></a>


<span>는 불필요한 태그로 보입니다:

Suggested change

<a href="privacy.html"><span>Privacy Policy</span></a>

<a href="privacy.html">Privacy Policy</a>

kiJu2 · 2024-04-29T15:54:50Z

index.html

+    </div>
+  </main>
+
+  <footer>


굳굳 ! 적절한 시맨틱 태그입니다 👍

kiJu2 · 2024-04-29T15:55:20Z

style.css

+:root {
+  --header-btn-bgcolor : #3692ff;
+  --header-btn-bgcolor--hover :#1251AA;
+  --section01-bg-color : #cfe5ff;
+  --section01-h1-color: #374151;
+  --section02-span-color :#3692ff;
+  --section02-p-color : #374151;
+  --section02-title-color : #374151;
+  --footer-bg-color : #111827;
+  --footer-text01 : #9CA3AF;
+  --footer-text02 : #E5E7EB;
+  --white : #ffffff;
+}
+
+* {
+  box-sizing:border-box;
+  margin: 0;
+}


해당 클래스는 global.css 혹은 color.css라는 파일에서 따로 관리하셔도 될 것 같아요 😊

kiJu2 · 2024-04-29T15:57:29Z

index.html

+  <header>
+      <div class="gnb">
+        <div class="gnb-logo">
+          <img src="images/판다 얼굴.png" alt="판다얼굴로고">


alt는 사람이 읽기 편하게. 그리고 그림을 표현하도록 작성하시면 됩니다 😊

Suggested change

<img src="images/판다 얼굴.png" alt="판다얼굴로고">

<img src="images/판다 얼굴.png" alt="판다 얼굴 로고">

kiJu2 · 2024-04-29T15:58:27Z

훌륭합니다 ! 성준님 ! 재밌게 봤어요.
다음 코드도 기대가 되는군요 🤗🤗

yeram7591 added 5 commits April 25, 2024 20:31

commit first

a813e04

Docs header

23fec1e

Docs main

41f81f8

Docs footer

f93be34

Docs all

ddabee9

yeram7591 requested a review from kiJu2 April 26, 2024 09:37

yeram7591 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Apr 26, 2024

yeram7591 closed this Apr 26, 2024

yeram7591 reopened this Apr 26, 2024

KingNono1030 reviewed Apr 27, 2024

View reviewed changes

kiJu2 approved these changes Apr 29, 2024

View reviewed changes

kiJu2 merged commit 55bc41b into codeit-bootcamp-frontend:Basic-오성준 Apr 29, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[오성준] Sprint1 #24

[오성준] Sprint1 #24

yeram7591 commented Apr 26, 2024 •

edited

Loading

KingNono1030 Apr 27, 2024

kiJu2 Apr 29, 2024

KingNono1030 Apr 27, 2024

KingNono1030 Apr 27, 2024

kiJu2 Apr 29, 2024

KingNono1030 Apr 27, 2024

KingNono1030 Apr 27, 2024

KingNono1030 Apr 27, 2024

kiJu2 commented Apr 29, 2024

kiJu2 commented Apr 29, 2024

kiJu2 Apr 29, 2024

kiJu2 Apr 29, 2024

kiJu2 Apr 29, 2024

kiJu2 Apr 29, 2024

kiJu2 Apr 29, 2024

kiJu2 Apr 29, 2024

kiJu2 Apr 29, 2024

kiJu2 Apr 29, 2024

kiJu2 Apr 29, 2024

kiJu2 Apr 29, 2024

kiJu2 commented Apr 29, 2024

	<a href="privacy.html"><span>Privacy Policy</span></a>
	<a href="privacy.html">Privacy Policy</a>

	<img src="images/판다 얼굴.png" alt="판다얼굴로고">
	<img src="images/판다 얼굴.png" alt="판다 얼굴 로고">

[오성준] Sprint1 #24

[오성준] Sprint1 #24

Conversation

yeram7591 commented Apr 26, 2024 • 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

kiJu2 commented Apr 29, 2024

kiJu2 commented Apr 29, 2024

commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?

그럼 커밋을 언제 해야 할까요?

관련하여 읽으시면 좋은 아티클을 추천드릴게요:

tl;dr

또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:

tl;dr:

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

<span>는 불필요한 태그로 보입니다:

Choose a reason for hiding this comment

굳굳 ! 적절한 시맨틱 태그입니다 👍

Choose a reason for hiding this comment

해당 클래스는 global.css 혹은 color.css라는 파일에서 따로 관리하셔도 될 것 같아요 😊

Choose a reason for hiding this comment

alt는 사람이 읽기 편하게. 그리고 그림을 표현하도록 작성하시면 됩니다 😊

kiJu2 commented Apr 29, 2024

yeram7591 commented Apr 26, 2024 •

edited

Loading

`<span>`는 불필요한 태그로 보입니다:

해당 클래스는 `global.css` 혹은 `color.css`라는 파일에서 따로 관리하셔도 될 것 같아요 😊

`alt`는 사람이 읽기 편하게. 그리고 그림을 표현하도록 작성하시면 됩니다 😊