[프로젝트 A-2] 두번째 리뷰

https://velog.io/@wlgns2223/colspan-validator-에러
colspan, colgroup에 관한 리뷰였는데 과거에 쓴 걸 다시 읽어보는 걸로 한다.

<input type="radio" name='radio_gender'>Man
<input type="radio" name="radio_gender">Woman

라디오 버튼은 1개만 선택되도록 하는 버튼인데, name을 같게 해줌으로써 1개만 선택되도록 버튼들을 하나로 묶어놓을 수 있다.

<ol class="rank">
  <li></li>
  <li></li>
  .
  .
  .
  <li></li>
</ol>

실시간 검색순위에는 순위가 필요한 요소이다. 난 ul을 사용했었는데 요소들 간의 순서가 필요하므로 ol을 사용함으로써 좀 더 시멘틱하게 마크업을 할 수 있다.

<img src="url" width="?" height="?">

이미지의 width, height은 가능한 적어주는것이 좋다.
브라우저가 HTML을 로딩할때 이미지가 차지하는 영역을 알고 있기 때문에 문서의 길이를 모든 이미지를 수용 할 만큼 미리 늘려서 렌더링한다. 이미지 로딩이 느릴경우 페이지가 계속 늘어나는 상황을 예방 할 수 있고 렌더링의 속도 또한 향상 시킬 수 있다.

<ul>
  <li></li>
  .
  .
  .
</ul>
<ul>
  <li></li>
  .
  .
  .
</ul>

'웹툰'이라는 컨텐츠는 두부분으로 표현되어 있더라도 하나의 리스트이기 때문에 두 목록으로 나누는것보다 하나의 목록으로 나누어 표현을 해야한다.

디자인에 맞추어 마크업을 표현하는것이 아니라 문서라고 생각하고 마크업 구조를 완료 후 디자인을 표현해야한다.