[정성현] sprint1 #14

jsh1147 · 2024-08-10T13:48:26Z

요구사항

기본

심화

palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.

주요 변경사항

메인 페이지 개발

스크린샷

Netlify 배포 사이트 바로가기
메인 페이지
메인 페이지(25%로 축소한, 너비 5000px 이상인 경우)

멘토에게

요구사항[기본] - 4번째 요구사항의 경우, 단순히 1920px로 기준을 잡기보다 퍼센트를 활용하여 유연하게 변하다 200px을 유지하는게 더 나은 것 같다고 판단되어 이에 맞춰 개발했습니다. (관련 CSS 코드에도 이와 같이 주석을 남겼습니다!)
구조적 시맨틱 태그에 대해선 어느 정도 적용했지만, 문자적 시맨틱 태그는 기본 CSS를 지워야 해서 대부분 span에 담았습니다. (a만 꼭 필요해서 의사 클래스를 지우고 사용했습니다.)
- reset CSS를 적용하면 맘 편히 문자적 시맨틱 태그들을 사용할 거 같은데 멘토님께서는 어떻게 생각하시나요?
CSS 선택자는 오른쪽->왼쪽으로 계산되므로 오른쪽 선택자의 범위가 좁은게 성능상 좋다는 글을 보았습니다. 그런데 의사 클래스는 일반적으로 오른쪽에 쓰이던데, .card:nth-child(n) 보다 :nth-child(n).card이 성능상 좋은 걸까요?
"다른 페이지로 넘어가는 버튼"은 <a>의 의미와 <button>의 형태를 가지는데, 어떤 태그를 활용하는 것이 좋을까요? (저는 의미에 초점을 맞춰 a를 활용했습니다.)

- 기초 HTML / CSS 파일과 README.md 파일 생성 - CSS 변수를 별도의 template.css 파일로 분리

- 페이지의 기본적인 구조와 내용을 작성

- div 태그로 나눠진 구조에 시맨틱 태그를 적용

- 페이지 구성에 필요한 이미지 저장 - img 요소에 이미지 연결

- body의 여백을 없애고 Pretendard 글꼴을 적용 - 클릭 가능한 요소에 커서를 두면 커서가 바뀌도록 CSS 작성 - header와 footer 요소에 클래스를 부여한 뒤, 주어진 디자인대로 CSS 작성

- 링크 요소의 경로 연결 - 링크 관련 가상 클래스 초기화 및 CSS 재적용

- 상하단 배너의 구조 통일 - 배너 요소에 클래스를 부여한 뒤, 주어진 디자인대로 CSS 작성 - 4xl CSS 변수 추가 및 rem값을 변수로 통일

- 내용 <br>로 2줄 구분 - 섹션 및 카드 요소에 클래스를 부여한 뒤, 주어진 디자인대로 CSS 작성 - CSS 변수 오타 수정

- a 태그를 통해 이동하는 페이지 틀 작성

- 각 페이지마다 로고 아이콘을 적용 - 이미지 경로를 상대 경로에서 절대 경로로 수정

- 좌우 패딩이 최소 200px가 유지되도록 변경

- 배포 URL과 기술 스택 명시

- style.css에 있던 초기화 CSS를 template.css에 합치고 init.css로 명칭 변경 - init.css를 별도의 link 태그로 가져오도록 수정

- 링크 요소의 href에 확장자 추가 - html 파일의 경로와 명칭 변경 - Netlify의 `Prtty URLs` 설정을 통해 브라우저 상에서의 경로는 `/경로`로 보임

- 웹 접근성을 고려하여 이미지 alt값 변경 - 섹션을 추가하고, 섹션 및 하위 div에 적절한 클래스 적용 - 변경된 섹션 & 클래스에 맞추어 CSS 선택자 수정

- 스프린트 미션 1의 요구사항과 약간 다르다고 판단되어 추가적인 설명을 주석으로 남김

hoody-jellybean · 2024-08-12T16:16:49Z

README.md

README.md로 문서 정리하시면서 진행하시는 것 너무 좋네요! 👍

hoody-jellybean · 2024-08-12T16:17:54Z

faq.html

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


문서 언어 한국어로 지정하신 것 좋습니다. 👍

hoody-jellybean · 2024-08-12T16:20:35Z

index.html

+      <a href="/"><img src="/images/logo_sm.png" alt="판다마켓 바로가기" /></a>
+      <a class="head-login" href="/login.html">로그인</a>


특정 경로로 이동하는 경우에 <a/> 태그 사용하시고, 이미지 요소에 유의미한 대체 텍스트 잘 넣으셨네요. 👍

hoody-jellybean · 2024-08-12T16:23:11Z

index.html

+          <img src="/images/explain_1.png" alt="" />
+          <div class="card-content">
+            <span class="keyword">Hot Item</span>
+            <span class="title">인기 상품을<br />확인해 보세요</span>


지금은 html 문서를 직접 작성하셔서 줄바꿈 문자를 삽입하기 어려우시겠지만,
나중에 React 등 UI 라이브러리나 프레임워크 사용하실 때에는, 줄바꿈 문자 사용 시 문단을 바꾸어주는 white-space: pre-line 같은 속성을 사용하셔도 됩니다!

참고차 알아두시면 될 것 같습니다~!!

토스 랜딩 페이지 보시면 실제로 어떻게 쓰고 있는지 보실 수 있어요~

hoody-jellybean · 2024-08-12T16:24:37Z

index.html

+    <main>
+      <section class="banner">
+        <div class="banner-content">
+          <span>일상의 모든 물건을<br />거래해 보세요</span>
+          <a href="/items.html">구경하러 가기</a>
+        </div>
+        <img src="/images/panda_1.png" alt="" />
+      </section>


<main/>, <section/> 시멘틱 태그 사용하신 것 좋습니다!
각 섹션에서 제목 요소는 Heading Element 사용하셔서 작성하셔도 좋을 것 같아요.

hoody-jellybean · 2024-08-12T16:33:03Z

index.html

+        <a href="http://www.facebook.com" target="_blank">
+          <img src="/images/facebook.png" alt="페이스북 바로가기" />
+        </a>
+        <a href="http://twitter.com" target="_blank">
+          <img src="/images/twitter.png" alt="트위터 바로가기" />
+        </a>
+        <a href="http://www.youtube.com" target="_blank">
+          <img src="/images/youtube.png" alt="유튜브 바로가기" />
+        </a>
+        <a href="http://www.instagram.com" target="_blank">
+          <img src="/images/instagram.png" alt="인스타그램 바로가기" />
+        </a>


아이콘 요소는 픽셀 이미지 대신 벡터 이미지 사용 가능하시면, SVG 이미지로 사용하는걸 추천드립니다!
(브라우저에서 렌더링될 때 선명하게 보이고, 크기 조절이 용이합니다.)

hoody-jellybean · 2024-08-12T16:34:27Z

init.css

위클리 과제에서 제공하는 디자인 시스템의 파운데이션을 변수로 가져와 사용하시는 것 너무 좋네요! 👍

hoody-jellybean · 2024-08-12T16:37:34Z

images/explain_1.png

피그마 이미지 Export 하실 때 참고하시면 좋을 것 같아 공유드립니다!

디자인 시안에서 보여지는 이미지 크기보다 크게 나타날 수 있는 경우(ex. 시안은 뷰포트가 1280px 너비로 작업 되어 있으나, 더 넓은 화면에서 이미지가 커질 수 있는 경우) 2~3배 정도로 export하여 사용하시는 걸 추천드립니다.

hoody-jellybean · 2024-08-12T16:40:07Z

init.css

+:is(a, button):hover {
+  cursor: pointer;
+}


오 is 선택자는 처음 보네요. 이렇게 적극적으로 다양한 선택자 사용해보시는 것 너무 좋습니다. 👍

hoody-jellybean · 2024-08-12T16:43:21Z

style.css

+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* 요구사항은 1920px 기준 좌우 여백 200px 유지지만,
+  퍼센트 활용값이 더 자연스럽다고 판단하여 max로 결정케 함 */
+  padding: 5px max(calc((100% - 1100px) / 2), 200px);
+}


랜딩 페이지에서만 해당 CSS 파일을 임포트하여 사용하시면, 태그 단위로 스타일을 적용하여도 크게 문제는 안되는데요.
다만 추후에 SPA(Single Page Application) 등을 사용하여 개발 하시게 되면, 이전 페이지의 스타일 시트가 페이지 전환 이후에도 남아있어 문제가 될 수도 있습니다. 어떤 경우에 문제가 되는지만 아시면 괜찮을 것 같습니다. :)

주석으로 설명이 필요한 부분 작성해주신 것 너무 좋네요. 👍

Flex layout 수평/수직 정렬 적절하게 사용하신 것도 잘하셨습니다!

hoody-jellybean · 2024-08-12T16:46:29Z

style.css

+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  align-items: center;


오 벌써 grid layout도 사용하셨군요! 잘 하셨습니다. 👍

hoody-jellybean · 2024-08-12T16:50:11Z

style.css

+.foot-link {
+  justify-content: center;
+  gap: 30px;
+}
+
+.foot-link a {
+  color: var(--gray-200);
+}
+
+.foot-sns {
+  justify-content: right;
+  gap: 12px;
+}


Flex layout에서 gap 속성으로 요소 간 간격을 설정하셨는데요.
지금은 위클리 과제 중이어서 문제는 없지만, 현업에서 사용할 때에는 지원해야하는 브라우저 버전에서 사용 가능한지 확인하실 필요가 있습니다!

아래 링크를 참고하시면, 해당 속성은 MacOS, iOS Safari의 14 버전 초/중반대부터 지원하는 걸 확인하실 수 있는데요.
서비스 특정에 따라 구형 사파리까지 지원하는 경우에는 문제가 될 수 있습니다. :)
내용만 알아두시면 될 것 같아요~!!

https://caniuse.com/?search=flex%27%20gap

hoody-jellybean · 2024-08-12T17:37:36Z

(1)

요구사항[기본] - 4번째 요구사항의 경우, 단순히 1920px로 기준을 잡기보다 퍼센트를 활용하여 유연하게 변하다 200px을 유지하는게 더 나은 것 같다고 판단되어 이에 맞춰 개발했습니다. (관련 CSS 코드에도 이와 같이 주석을 남겼습니다!)

판단 하에 디자인 개선 후 기록 남기신 것 좋습니다! 👍

(2)

구조적 시맨틱 태그에 대해선 어느 정도 적용했지만, 문자적 시맨틱 태그는 기본 CSS를 지워야 해서 대부분 span에 담았습니다. (a만 꼭 필요해서 의사 클래스를 지우고 사용했습니다.)
reset CSS를 적용하면 맘 편히 문자적 시맨틱 태그들을 사용할 거 같은데 멘토님께서는 어떻게 생각하시나요?

다음 멘토링 시간에 ResetCSS, NormalizeCSS 관련 내용 공유해드릴려고 했는데 먼저 이렇게 질문 주시다니.. 열심히 하시는 모습 너무 보기 좋습니다. 👍

우선 크로스 브라우징 + 요소 스타일링을 용이하게 하기 위해 요소 스타일 초기화 CSS 파일을 적용하시는 건 사실상 필수입니다. :)
초기화할 때 NormalizeCSS를 사용할지 ResetCSS를 사용할지가 중요한데요.

우선 NormalizeCSS는 각 브라우저 별 요소의 기본 스타일을 어느정도 유지한 상태로 초기화합니다. 개인적으로 이러한 방식은 개발 초기라고 해서 큰 이점이 있지도 않고, 고도화가 된 이후에는 레거시 요소들이 각 브라우저의 고유 스타일에 영향을 받기 때문에 유지 보수에 별로였습니다. :/

가능하면 하드리셋을 하는 ResetCSS를 사용하는 걸 추천드립니다.

(3)

CSS 선택자는 오른쪽->왼쪽으로 계산되므로 오른쪽 선택자의 범위가 좁은게 성능상 좋다는 글을 보았습니다. 그런데 의사 클래스는 일반적으로 오른쪽에 쓰이던데, .card:nth-child(n) 보다 :nth-child(n).card이 성능상 좋은 걸까요?

이건 저도 자세히 찾아보고 말씀드려야 될 것 같네요. 다만 대부분의 경우에는 CSS 선택자로 발생하는 성능 차이는 애플리케이션에 영향을 줄 정도는 아닙니다.

여유 있으시면, 크롬 개발자 도구에서 성능 탭을 사용해서 직접 비교해보셔도 좋을 것 같네요. :)

https://developer.chrome.com/docs/devtools/performance/selector-stats?hl=ko

(4)

"다른 페이지로 넘어가는 버튼"은 의 의미와 의 형태를 가지는데, 어떤 태그를 활용하는 것이 좋을까요? (저는 의미에 초점을 맞춰 a를 활용했습니다.)

다른 페이지로 이동하는 상호작용 가능한 링크 요소는 <a> 태그를 사용해주시면 될 것 같습니다. <button/>은 클릭 이벤트 핸들러로 처리해야 하는 경우 사용해주시면 됩니다.

hoody-jellybean · 2024-08-12T17:38:32Z

첫 위클리 과제인데 너무 잘 해주셨습니다. 앞으로도 화이팅입니다!! 👍

jsh1147 added 16 commits August 6, 2024 19:44

feat: 초기 환경 구성

0d5e097

- 기초 HTML / CSS 파일과 README.md 파일 생성 - CSS 변수를 별도의 template.css 파일로 분리

feat: 구조 & 내용 작성

384c4b8

- 페이지의 기본적인 구조와 내용을 작성

refactor: 시맨틱 태그 적용

86db279

- div 태그로 나눠진 구조에 시맨틱 태그를 적용

feat: 이미지 요소 적용

a8d1c44

- 페이지 구성에 필요한 이미지 저장 - img 요소에 이미지 연결

feat: header, footer CSS 작성

055fc21

- body의 여백을 없애고 Pretendard 글꼴을 적용 - 클릭 가능한 요소에 커서를 두면 커서가 바뀌도록 CSS 작성 - header와 footer 요소에 클래스를 부여한 뒤, 주어진 디자인대로 CSS 작성

feat: 하이퍼링크 요소 적용

d6ff386

- 링크 요소의 경로 연결 - 링크 관련 가상 클래스 초기화 및 CSS 재적용

feat: 상하단 배너 CSS 작성

15d5283

- 상하단 배너의 구조 통일 - 배너 요소에 클래스를 부여한 뒤, 주어진 디자인대로 CSS 작성 - 4xl CSS 변수 추가 및 rem값을 변수로 통일

feat: 설명 카드 CSS 작성

cab372d

- 내용 <br>로 2줄 구분 - 섹션 및 카드 요소에 클래스를 부여한 뒤, 주어진 디자인대로 CSS 작성 - CSS 변수 오타 수정

feat: 링크 페이지 작성

0f914c7

- a 태그를 통해 이동하는 페이지 틀 작성

feat: 아이콘 적용 및 이미지 경로 수정

0375786

- 각 페이지마다 로고 아이콘을 적용 - 이미지 경로를 상대 경로에서 절대 경로로 수정

feat: header, footer 여백 변경

5fe8c64

- 좌우 패딩이 최소 200px가 유지되도록 변경

docs: README.md 내용 추가 작성

6cdb891

- 배포 URL과 기술 스택 명시

refactor: 초기 CSS 파일 분리

53fc3c6

- style.css에 있던 초기화 CSS를 template.css에 합치고 init.css로 명칭 변경 - init.css를 별도의 link 태그로 가져오도록 수정

refactor 페이지 경로 수정

b695034

- 링크 요소의 href에 확장자 추가 - html 파일의 경로와 명칭 변경 - Netlify의 `Prtty URLs` 설정을 통해 브라우저 상에서의 경로는 `/경로`로 보임

feat: 이미지 alt 변경 및 시맨틱 태그 & 클래스 변경

d3014cb

- 웹 접근성을 고려하여 이미지 alt값 변경 - 섹션을 추가하고, 섹션 및 하위 div에 적절한 클래스 적용 - 변경된 섹션 & 클래스에 맞추어 CSS 선택자 수정

docs: 스프린트 미션 1 관련 주석 작성

0a6f601

- 스프린트 미션 1의 요구사항과 약간 다르다고 판단되어 추가적인 설명을 주석으로 남김

jsh1147 requested a review from hoody-jellybean August 10, 2024 13:48

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

hoody-jellybean reviewed Aug 12, 2024

View reviewed changes

hoody-jellybean merged commit b72f6fc into codeit-bootcamp-frontend:Basic-정성현 Aug 12, 2024

jsh1147 self-assigned this Dec 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[정성현] sprint1 #14

[정성현] sprint1 #14

jsh1147 commented Aug 10, 2024 •

edited

Loading

hoody-jellybean Aug 12, 2024

hoody-jellybean Aug 12, 2024

hoody-jellybean Aug 12, 2024

hoody-jellybean Aug 12, 2024 •

edited

Loading

hoody-jellybean Aug 12, 2024 •

edited

Loading

hoody-jellybean Aug 12, 2024 •

edited

Loading

hoody-jellybean Aug 12, 2024

hoody-jellybean Aug 12, 2024

hoody-jellybean Aug 12, 2024

hoody-jellybean Aug 12, 2024 •

edited

Loading

hoody-jellybean Aug 12, 2024

hoody-jellybean Aug 12, 2024

hoody-jellybean Aug 12, 2024 •

edited

Loading

hoody-jellybean commented Aug 12, 2024 •

edited

Loading

hoody-jellybean commented Aug 12, 2024

		<a href="/"><img src="/images/logo_sm.png" alt="판다마켓 바로가기" /></a>
		<a class="head-login" href="/login.html">로그인</a>

[정성현] sprint1 #14

[정성현] sprint1 #14

Conversation

jsh1147 commented Aug 10, 2024 • edited Loading

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hoody-jellybean Aug 12, 2024 • edited Loading

Choose a reason for hiding this comment

hoody-jellybean Aug 12, 2024 • edited Loading

Choose a reason for hiding this comment

hoody-jellybean Aug 12, 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

hoody-jellybean Aug 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hoody-jellybean Aug 12, 2024 • edited Loading

Choose a reason for hiding this comment

hoody-jellybean commented Aug 12, 2024 • edited Loading

(1)

(2)

(3)

(4)

hoody-jellybean commented Aug 12, 2024

jsh1147 commented Aug 10, 2024 •

edited

Loading

hoody-jellybean Aug 12, 2024 •

edited

Loading

hoody-jellybean Aug 12, 2024 •

edited

Loading

hoody-jellybean Aug 12, 2024 •

edited

Loading

hoody-jellybean Aug 12, 2024 •

edited

Loading

hoody-jellybean Aug 12, 2024 •

edited

Loading

hoody-jellybean commented Aug 12, 2024 •

edited

Loading