부트캠프 Part1 과제 회고 - HTML/CSS

내가 수강중인 부트캠프의 첫번째 과제의 결과가 모두 PASS로 나왔다! 강사님께서 자세한 피드백을 해주셔서 정리해보려고 한다. 학원 규칙 상 과제 보안 관련한 문제가 있어 자세한 언급은 피하였다.

 

Part1의 HTML/CSS 과제는 미션 페이지를 Figma 파일로 받으면 해당 페이지를 HTML과 CSS만을 이용하여 클론 코딩 하는 것이다. 페이지 이미지는 일부만 이용하였다. 코드 블럭의 코드는 대부분 내가 작성한 코드이다.

 

과제 1 - 쿠팡 오늘의 발견

쿠팡 오늘의 발견

피드백

      <h1>
        <a href="https://www.coupang.com/">
          <img src="assets/logo/logo.png" alt="쿠팡 로고" />
        </a>
      </h1>

• h1 태그의 경우 이미지를 설명하는 alt 역할 보단 h1 자체의 역할이 더 강조되어야 하기 때문에 '쿠팡' 또는 'Coupang'이 들어가는 것이 적절하다. 텍스트가 필요없는 경우에는 viewhidden 등을 적용해주어야한다.

 

<a href="/">
  <div class="item big">
    <img src="assets/discovery/honeytea.jpg" alt="오뚜기 꿀생강차" />
    <div class="button">
      <img src="assets/icon/angle-right-square.svg" alt="구매하기" />
    </div>
  </div>
</a>

/* CSS */
section .item {
  float: left;
  position: relative;
  ...
}

section .item:hover .button {
  left: 89px;
  background-color: var(--color-blue-600);
  ...
}

• 아이템 블럭 자체가 링크의 역할을 해야하기 때문에 a 태그를 최상위 태그로 사용하였지만 정작 float 속성은 div 태그에 부여하였다. 최상위인 a 태그에 float와 display: block을 부여해야한다.
• 키보드 조작으로도 포커스 이펙트가 동작해야하는데 hover에만 이펙트를 부여하였다.
• '구매하기' 버튼 태그는 전체 아이템 박스와 링크 역할이 같기 때문에 tabIndex를 활용하거나, span 등 focusing이 안 되는 요소로 작성하는것이 좋다!

 

과제2 - 쿠팡 오늘의 쇼핑 제안

쿠팡 오늘의 쇼핑 제안

피드백

<div class="item">
  <a href="/">
    <span class="discount" aria-label="할인율">25%</span>
    <img
      src="assets/offer/deskset.jpg"
      alt="베스트리빙 베이직 멀티"
      class="item_thumb"
    />
    <p class="item_title">베스트리빙 베이직 멀티 H...</p>

• 말 줄임표 처리는 css의 text-overflow: ellipsis를 사용해보자

 

과제3 - 카테고리별 추천 광고상품

• 섹셔닝 콘텐츠와 섹셔닝 루트
• https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#sectioning-content
• https://www.w3.org/TR/2011/WD-html5-20110525/sections.html#sectioning-root

 

과제4 - 쿠팡 헤더

 

쿠팡 헤더

• Grid CSS에서 order 속성을 이용해 구현해보기
• submit 버튼 이외에는 모두 type="button" 속성 적용해주기

 

과제5 - 쿠팡 카테고리 메뉴

쿠팡 카테고리 메뉴

• iconfont는 CSS에 따로 정의해보기

 

 

 

 

역시 HTML은 사람이 할게 못된다...

점점 괜찮은 코드로 잘 마쳤다고 칭찬받았다😃