0905

radio VS checkbox

단일 선택(radio), 다중 선택(checkbox) 특징 말고도 다른 차이점은 뭐가 있을까?
radio 버튼은 키보드 포커싱 때 화살표 방향으로만 이동 가능하다
반면 checkbox는 탭으로 개별적인 접근이 가능하다

이미지 태그에 width, height 속성을 모두 주는게 렌더링 관점에서도 좋은 이유

일단 브라우저 렌더링 과정을 생각해보면
HTML 파일을 읽어서 DOM 트리를 그리고 그 후에 CSS 파일을 읽어서 CSSOM 트리를 생성한다. 그 후 DOM 트리와 CSSOM을 결합해 렌더 트리를 생성한다.
이미지 태그는 html 태그니까 이미지 태그에 widht랑 height를 줘야 DOM 트리 파싱 과정에서 이미 그만큼의 공간을 예약할 수 있으니 layout shift 현상이 방지된다.
layout shift 현상이란? 말 그대로 레이아웃이 밀려나는 현상..
- 왜 발생할까?
  - 이미지, 폰트, 광고 등 크기를 알 수 없는 리소스가 늦게 로드되면 브라우저가 임시 배치했다가 나중에 다시 재배치(reflow)를 하기 때문.
참고
- 인라인 스타일 태그로 widht와 height를 줘도 된다.
- 즉 외부 css 파일이나 tailwind와 같은 스타일 라이브러리를 사용하지 않고 인라인 스타일 태그나 html 태그 자체에 widht, height를 주면 DOM 파싱 시점에 브라우저가 곧바로 읽을 수 있기에 공간 예약이 가능하다는 점에선 공통적이다.
- 근데 그럼 둘은 무슨 차이가 있을까?
- 의미론적 차이
  - html의 img 태그는 애초부터 이미지를 위해서 만들어진 태그인 반면 인라인 스타일로 주는거는 이미지 원본 크기와도 다를 수 있고 이 값이 이미지의 본래 크기를 뜻하는게 아니니까
- 최적화 관점
  - html 속성은 특별 취급을 받아서 aspect-ratio를 계산해 레이아웃에 반영되지만 인라인 스타일은 그냥 css 뿐이니 이미지의 intrinsic size와는 무관하게 처리
근데 width, height 속성을 <img widht="" height="">처럼 html 태그로도 줄 수 있지만, next.js에서 제공하는 Image 컴포넌트 태그에서 widht, height 속성을 주면 어느 시점에 렌더링 되는걸까?
예전 넥스트에선 span 태그에 인라인 스타일로 widht, height를 줬는데 의미론적 관점엑서 html 태그로 바꾼듯

참고 자료