HTML / CSS 리팩토링 하기

HTML/ CSS 과제 리팩토링

---

총평

https://github.com/KDT1-FE/KDT8-M1/pull/27

• 멘토님: 짧은 시간동안 고생 많으셨습니다!
  BEM을 사용하고, Block 단위를 명확하게 나눠 재사용성을 높이는 방법을 연습해보시고,
  • 멘토님께 질문 드릴때도 Block 단위 를 명확하게 하면, 요소의 구성은 같지만제가 아직 BEM 사용법이 미숙하여 이것저것 섞어 사용했는데,
  • 한가지 클래스 스타일로 통일하여 짓는것이 읽는 사람도 관리하는 사람도 편하다는것을 느꼈습니다.
  • 크기가 다른 것들은 CSS를 다시 작성할 필요없이 클래스 하나로 제어하기 쉽다고 하셨습니다.
• 일관된 스타일로 코드를 작성하시는 걸 습관화하시면 좋을듯 합니다!

---

코드리뷰 내용

• 진짜 엄청 세세하게 알려주셔서 배운내용이 많은데요! 그 중에 제가 제일 공부가 필요하다고 느낀부분 위주로 서술 하겠습니다.

---

sr-only & aria-label

1. 이렇게 아무런 텍스트 없이 아이콘만 있는 클릭 가능하 요소는, 시각 장애인이나 검색엔진 등 화면을 쓸 수 없는 상황에 요소를 파악하기 어렵게 합니다.
   sr-only같은 걸 알아보시거나, aria-label같은 attribute을 알아보셔도 좋을 것 같아요!

   • 시각 장애인들 이나 검색에 보여진다는 거는 생각 해보지 못해서 깜작 놀랐습니다.

   • aria-label: 웹 접근성을 개선하기 위해 사용되는 ARIA (Accessible Rich Internet Applications) 속성 중 하나입니다. 이 속성은 요소의 목적이나 기능을 설명하는 짧은 문자열 라벨을 제공하여, 스크린 리더와 같은 보조 기술을 사용하는 사람들에게 추가적인 정보를 제공합니다.

   • <button aria-label="Close" onclick="myFunction()"> <i class="fas fa-times"></i> </button>

   • sr-only : screen reader only 의 약자로, 사용시 해당 클래스를 사용한 요소는 화면에 나오지 않게됩니다.

     <span class="sr-only">Search</span>

   • sr-only 클래스를 사용하면 해당 요소의 콘텐츠는 시각적으로 화면에 표시되지 않지만, 스크린 리더와 같은 보조 기술을 사용하는 사용자에게는 여전히 접근 가능합니다.

2. <a href="#"> <i class="fas fa-search"></i> </a>

---

BEM

• 제가 이번에 제일 미숙했던 부분이고, 코드 리뷰 대부분이 BEM에 관련된 것들 이었습니다.

BEM 이란 ?

• BEM (Block Element Modifier)은 CSS 클래스명을 구조화하고 명명하는 방법론 중 하나로, 코드의 재사용성을 높이고, 유지보수를 용이하게 하며, 개발자 간의 명확한 이해를 돕기 위해 고안되었습니다. BEM의 기본 구조는 블록__요소--수정자 형식을 따릅니다.

  • 블록(Block): 독립적인 구성요소를 의미하며, 의미적으로 구분되는 페이지의 한 부분입니다. 예를 들어, 헤더, 컨테이너, 메뉴 등이 이에 해당합니다.
  • 요소(Element): 블록 내부의 구성요소를 의미하며, 블록에 의존적인 구성요소입니다. 블록과 요소는 __ (더블 언더스코어)로 연결됩니다. 예를 들어, menu__item은 menu 블록의 아이템 요소를 나타냅니다.
  • 수정자(Modifier): 블록 또는 요소의 스타일을 변경하기 위해 사용됩니다. 수정자는 -- (더블 대시)로 표시되며, 예를 들어 button--large는 큰 크기의 버튼을 의미합니다.

  BEM 방법론을 사용하면 클래스명이 의미를 명확하게 전달하고, 스타일의 중첩과 충돌을 방지하며, CSS와 HTML의 구조를 더 잘 이해할 수 있게 도와줍니다.

  .card { /* 블록 스타일 */ }
  .card__image { /* 요소 스타일 */ }
  .card__description { /* 요소 스타일 */ }
  .card--large { /* 수정자 스타일 */ }

• <div class="card"> 
      <img class="card__image" src="image.jpg" alt="사진"> 
      <div class="card__description"> 카드 설명입니다. 
      </div> 
  </div>

---

과제하면서 느낀점

• 누군가에게 코드리뷰를 받아본적이 한번도없는데, 제가 알지 못한것을 깨닫고 너무나 도움이 많이 되었습니다.
• 클론코딩을 몇번 했었지만, 그냥 눈에 보이는대로 클래스 이름을 짓고, 요소를 관리했었는데 그러면 안되고,
• 하나하나 체계적으로 해야 한다는 것을 깨달았습니다.(너무 막 살았다...)
• 웹 개발자로써, 웹 에 대한 최적화나 사용자의 입장에서 한번 더 생각하는게 좋겠다 라고생각했습니다.