출처 :
FE 엔지니어는 꽤 많은 사람이 HTML을 일부만 이해하고 있다. 잘 보이고 동작하면 만족해한다.
당신이 웹사이트를 만든다면 HTML을 만드는 것이므로 HTML은 웹이다.
UI와 UX는 소비자가 소비하는 한 덩어리인데 중요도를 따져보면 HTML, CSS 그리고 동작(js,,,)이다.
나의 관심사는 기술 피라미드 바닥에 있다. 웹의 기저에 공통 분모, 토대, 기반이 HTML이다. 하지만 이를 모르는 FE 엔지니어가 많아지고 있다.
웹 페이지는 문서이며 문서의 구조를 가진다. 의미론적으로 정확한 요소를 선택하여 구조를 갖춘다.
제목의 스타일이 어떻든 그것은 제목이어야 하므로 <div>로 만들지마라.
HTML은 대략 116개 요소인데 대부분은 필요하지 않으므로 배우기 어렵지 않다.
내 전문성은 HTML과 CSS에 있다. 브라우저에서 무언가 렌더링하는 것이 당신의 업무다.
사용성과 접근성에 대해 당신이 웹 시멘틱 구조가 중요하지 않다고 생각할 수도 있다.
검색 엔진이나 스크린 리더, 키보드 사용자는 당신의 컨텐츠를 읽을 필요가 있고 애니메이션이나 그라데이션을 즐길 필요는 없지만 js 뿐만 아니라 CSS를 중요하게 생각할 것이다.
다음에 나오는 기술들이 당신의 앱을 어떻게 사용할지 모르지만 HTML은 당신의 콘텐츠를 쉽게 해석하고 이동할 수 있을 것이다.
모든 것이 <div>면 그게 무엇인지 어떻게 표현할지 구별하기 힘들다.
JSX를 사용해도, WAI-Aria 속성을 모든 것에 추가하므로 접근 가능할 것이라고 한다. 하지만 적절한 HTML으로 대체 가능하다. onClick을 가진 <div>보단 <button>으로 접근성, 퍼포먼스, UX를 얻는다.
하지 않으면 최소한 당신의 사용자들에게 사용을 어렵게 하는 것이다. 웹에 접근할 수 있는 모든 브라우저, 플랫폼, 기기, 가전 제품의 공통적인 것을 학습하는 것이 FE 엔지니어의 책임이다.
•
HTML 마크업을 배우고 페이지나 이미지 등을 구조화해본 다음 시간 있을 때 만들어봐라.
•
•
Read blog posts (like Andy Bell’s recent post about using semantic HTML, Keep it simple) and watch videos.
•
•
팀 내 HTML 전문가의 코드 리뷰
퍼블리셔라도 js를 알고 FE 엔지니어라도 웹 표준, 시멘틱 마크업, 웹 접근성, SEO에 신경 써야 한다.
<span>에 <div>를 넣는다거나 키보드 운용이 안되게 만드는 일이 많다.
