KDT5_KimDaSeul #35

7581058 · 2023-04-05T06:01:37Z

사이트 레이아웃 클론 과제 제출합니다.

제출 일자 : 23년 4월 5일
작성자 : FE 부트캠프 5기 김다슬

필수 요구사항

과제에 대한 설명을 포함한 README.md 파일을 제공하세요!

-과제에 대한 자세한 설명은 README.md 파일에 작성했습니다.

과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!

-원본 사이트 : 어프어프
-과제 제출은 4월 5일에 했는데 4월 7일 이후 원본 사이트가 전체 개편 되었습니다. 제출한 과제와 전혀 다른 사이트가 되어 비교할 수 없게 되었습니다. 참고 부탁드립니다.

과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!

실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
- 클론 사이트 : 클론

선택 요구사항

<header>, <section> 등 시멘틱 태그를 최대한 활용해보세요.

-원본 사이트에서 div로 구현된 상단 메뉴 부분과 메인 컨텐츠 부분을 <header> 태그와 <section> 태그로 구현했습니다.
-(추가사항) 4월 9일 4조 피어리뷰 이후 리뷰 의견을 반영해 <aside> 태그와 <main>태그를 추가해 HTML구조를 조금 변경 해 보았습니다.

실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.

-flex와 grid에 능숙하지 않아 아직 활용하지 않고 원본 사이트에 적용된 스타일과 동일하게 구현했습니다.

부분적으로 BEM 방법론을 도입해보세요.

-scss를 처음 사용해 보았기 때문에 BEM 방법론은 도입하지 못했습니다.

JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)

JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)

(1)클릭이 필요한 버튼들의 이벤트는 JS 로 구현했습니다.
- 퀵메뉴의 전체 메뉴 열기, 검색창 열기
- 우측 고정 버튼의 화면 상단으로 이동하기
(2)메인 컨텐츠의 슬라이드를 구현하기 위해 swiper.js 를 사용했습니다.

SCSS 등의 CSS 전처리도구를 도입해보세요.

-처음이고, 잘 모르지만 해 보고 싶어서 일단 SCSS를 도입해 보았습니다.

SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.

-본 과제에는 Parcel 번들러를 활용해 보았습니다.

원본 사이트

어프어프

클론 사이트

클론

구현한 부분

상단 메뉴
좌측 퀵 메뉴
배너 슬라이드
우측 고정 메뉴
제품 목록
footer

(그 외 자세한 나머지 내용은 README.md 에 작성했습니다.)

피어리뷰 이후 수정 사항

4월 9일 4조에서 진행한 피어리뷰 후
1.<aside> 태그도 활용하면 좋을것 같다는 의견과 전체적으로 묶으면 좋을 것 같다는 의견을 반영하여
<aside> 태그와 <main>태그를 추가해 HTML 구조를 수정 했습니다.
2.원활한 리뷰를 위해 주석을 상세히 작성하자는 의견을 반영하여 주석을 좀더 구체적으로 작성 했습니다.

index.html 파일을 기존의 구조에서

<body>
  <header>...</header> <!--전체메뉴 -->

  <ul>...</ul> <!--고정된 좌측  버튼 : 전체메뉴, 검색, 페이스북, 인스타그램 -->

  <div>...</div> <!--고정된 좌측 메뉴 버튼누르면 나타나는 전체 메뉴 -->

  <div>...</div> <!--고정된 우측 버튼 : 스크롤 상단 이동 버튼 -->

  <div>...</div> <!--고정된 우측 버튼 : 카카오톡 채널 상담 연결 버튼 -->

  <section>...</section> <!--메인 컨텐츠 : 슬라이드 & 상품목록 -->

  <footer>...</footer> <!--푸터 -->
</body>

아래 구조로 변경 했습니다.

<body>
  <header>...</header> <!--전체메뉴 -->

  <main> 
    <section>...</section> <!--메인 컨텐츠 : 슬라이드 & 상품목록 -->
    <aside>...</aside> <!--고정된 좌측  버튼 : 전체메뉴, 검색, 페이스북, 인스타그램 -->
    <div>...</div> <!--고정된 좌측 메뉴 버튼누르면 나타나는 전체 메뉴 -->
    <aside>...</aside> <!-- 고정된 우측 버튼 : 스크롤 상단 이동 버튼 & 카카오톡 채널 상담 버튼-->
  </main>

  <footer>...</footer> <!--푸터 -->
</body>

7581058 · 2023-04-05T06:07:22Z

index.html

+            <!-- <input type="image" src="/img/btn_search.png" alt="검색" /> -->
+            <input type="submit" value="" />
+          </fieldset>
+        </form>


<fieldset>는 이번 클론 과제 하면서 처음 접해봤습니다.
보통 form 구조 만들 때 자주 사용되는 태그인가 궁금합니다.

원본 사이트가 로 search 버튼을 구현했길래 똑같이 해봤는데 사진이 나타나지 않아 type=submit으로 대체했습니다. 더 좋은 방법이 있으면 알려주셨으면 좋겠습니다.

좌측 퀵 메뉴에서 검색 메뉴 버튼 클릭 시 <input type="submit" value="" /> 부분만 화면에 로딩이 느립니다 . 이유와 해결법을 알고싶습니다.

자주 사용하는 것 같지는 않습니다.
input 태그에 src를 줄 수있는 경우는 어떤 경우인지
http://www.tcpschool.com/html-tags/input 에서 확인해 보시면 좋을 것 같아요.
이미지 로딩 시간 때문에 느려지는 것 말씀하신 것 같아요.

7581058 · 2023-04-05T06:12:05Z

index.html

+      <ul class="total-list">
+        <li>
+          <a href="javascript:void(0)" class="has-depth">
+            BLUE LABEL<i class="ico-arrow"></i>


메뉴 구현 시 개발자도구를 통해 확인하고

BLUE LABEL <i></i>

같이 두 줄로 작성했는데
만들고 확인해보니 원본 사이트와 틀어져 BLUE LABEL<i class="ico-arrow"></i> 같이 한 줄로 붙여 작성하게 되었습니다.
띄어쓰기 때문에 그런지, 왜 개발자 도구와 다른지 궁금합니다.

개발자 도구에 코드를 정리하는 format 설정이 달라서 그렇습니다.
extention에서 Prettier 관련 찾아보시면 좋을 것 같습니다.

7581058 · 2023-04-05T06:18:04Z

index.html

+        <div class="company-info column-top">
+          <div class="company-info-top">
+            <address>
+              <b>COMPANY</b>


원본 사이트에서 <b>와 <strong> 을 섞어 사용 했길래 찾아보니
그중에<b>보단 <strong> 을 권고한다고 대부분 말하던데
혹시 섞어 쓴 건 개인의 취향인지 의도가 있는 건지 궁금합니다.
아니면 보통 더 나은 방법은 어떤 건지 궁금합니다.

섞어 사용하였다면 의미가 다른 경우일 것 같습니다.
b 의미 없음 strong 웹 접근성에 영향을 주는 강조의 의미로
나누어 사용하였을 것 같습니다.

7581058 · 2023-04-05T06:21:00Z

index.html

+      <div class="footer-info layout-table">
+        <div class="logo-area column-middle tc">
+          <img src="/img/footer_logo.png" alt="earpearp" />
+          &nbsp;


과제 하는 내내 원본 사이트와 미묘하게 1px 씩 달라 원인을 찾던 도중  를 발견했습니다.
어떤 이유 때문에 작성되거나 생성 된 건지 궁금합니다.

는 공백을 의미하고 잘 못 작성되었을 가능성이 큽니다.

iamidlek

고생하셨습니다.
잘 구현하신 것 같습니다.
readme 파일도 잘 정리하여 작성해 주셔서 좋은 것 같습니다.

중복되는 부분은 코멘트 하지 않았습니다.

HTML

시멘틱 하게 잘 작성해 주신 것 같습니다.
aside는 보조적인 내용일 경우 사용하는데
작성해주신 좌측 aside 내부가 메뉴 네비게이션 내용인 것 같아서
우측 aside의 내용이 적절한 것 같습니다.

CSS

scss 잘 활용하여 주셨습니다.
파일도 나누어 잘 작성하신 것 같습니다.
다만 모든 값이 px로 고정적이여서 rem, em 등도
고려해 보시면 좋을 것 같습니다.

JS

원하는 요소를 찾고 class를 추가하고 제거하는 구현을
잘 하신 것 같습니다.

iamidlek · 2023-04-09T17:16:14Z

index.html

+  <!-- js -->
+  <script defer src="/js/main.js"></script>
+</head>
+<body class="scroll-hidden">


scroll-hidden 이 필요한 부분인가요?

iamidlek · 2023-04-09T17:20:53Z

index.html

+      <div class="footer-info layout-table">
+        <div class="logo-area column-middle tc">
+          <img src="/img/footer_logo.png" alt="earpearp" />
+          &nbsp;


는 공백을 의미하고 잘 못 작성되었을 가능성이 큽니다.

iamidlek · 2023-04-09T17:23:28Z

index.html

+        <div class="company-info column-top">
+          <div class="company-info-top">
+            <address>
+              <b>COMPANY</b>


섞어 사용하였다면 의미가 다른 경우일 것 같습니다.
b 의미 없음 strong 웹 접근성에 영향을 주는 강조의 의미로
나누어 사용하였을 것 같습니다.

iamidlek · 2023-04-09T17:25:38Z

js/main.js

+
+
+totalMenuButton.addEventListener('click', function () {
+  totalMenu.style.transform = 'translateX(0%)'


값이 동적으로 변하는 경우가 아니면
위의 class를 주고 제거하는 방식 처럼 구현 하는 것이 더 좋을 것 같습니다.

KDT5_KimDaSeul

9527e32

7581058 commented Apr 5, 2023

View reviewed changes

KDT5_KimDaSeul : 피어리뷰 진행 후 index.html, main.js, README.md 수정

80255e2

iamidlek reviewed Apr 9, 2023

View reviewed changes

7581058 self-assigned this Apr 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

KDT5_KimDaSeul #35

KDT5_KimDaSeul #35

7581058 commented Apr 5, 2023 •

edited by kse-seong-eun

Loading

7581058 Apr 5, 2023 •

edited

Loading

iamidlek Apr 11, 2023

7581058 Apr 5, 2023 •

edited

Loading

iamidlek Apr 11, 2023

7581058 Apr 5, 2023 •

edited

Loading

iamidlek Apr 9, 2023

7581058 Apr 5, 2023

iamidlek Apr 9, 2023

iamidlek left a comment

iamidlek Apr 9, 2023

iamidlek Apr 9, 2023

iamidlek Apr 9, 2023

iamidlek Apr 9, 2023



		totalMenuButton.addEventListener('click', function () {
		totalMenu.style.transform = 'translateX(0%)'

KDT5_KimDaSeul #35

Are you sure you want to change the base?

KDT5_KimDaSeul #35

Conversation

7581058 commented Apr 5, 2023 • edited by kse-seong-eun Loading

필수 요구사항

선택 요구사항

원본 사이트

클론 사이트

구현한 부분

피어리뷰 이후 수정 사항

7581058 Apr 5, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

7581058 Apr 5, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

7581058 Apr 5, 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

iamidlek left a comment

Choose a reason for hiding this comment

HTML

CSS

JS

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

7581058 commented Apr 5, 2023 •

edited by kse-seong-eun

Loading

7581058 Apr 5, 2023 •

edited

Loading

7581058 Apr 5, 2023 •

edited

Loading

7581058 Apr 5, 2023 •

edited

Loading