Style Basics

학습 키워드

• className

• 의미있는 마크업

\

className

JSX 문법. 자바스크립트에서 사용하는 예약어 중 class가 존재하므로 className으로 대체하여 사용

원래 리액트 환경에서 JSX 문법을 사용하지 않는다면 React.createElement('div', null)과 같은 형태로 컴포넌트를 생성해야 하나 JSX 문법적 설탕으로 마치 html을 작성하듯 편리하게 사용해옴

className은 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수도 있음(프로퍼티 명으로서의 className)

🫥 Semantic 마크업이 중요한 이유

의미있는 마크업을 해야하는 이유가 뭘까?

한 문장으로 표현한다면 검색 엔진 최적화(SEO), 웹 접근성, 가독성의 장점이 있기 때문이다.

\

1. 검색 엔진 최적화(SEO): 검색 엔진은 시맨틱 마크업을 사용하여 페이지의 콘텐츠를 더 잘 이해하고 검색 결과에서 순위를 높인다.

2. 접근성(Accessibility): 스크린 리더와 같은 장애가 있는 사용자가 콘텐츠에 더 쉽게 접근할 수 있도록 도와줍니다. <header>, <nav> 및 <main>과 같은 적절한 시맨틱 태그를 사용하여 스크린 리더는 콘텐츠를 보다 정확하게 해석하고 시각 장애가 있는 사용자에게 의미 있는 방식으로 제시할 수 있다.

3. 가독성(Readability): <section>, <article> 및 <aside>와 같은 설명적이고 의미 있는 태그를 사용하여 개발자는 각 코드 조각의 목적을 보다 쉽게 ​​이해하고 변경 또는 업데이트를 보다 효율적으로 수행할 수 있다.