2.Style Basics

className

JavaScript에서의 className

아주 오래전 자바스크립트엔 "class"같은 예약어는 객체의 프로퍼티가 될 수 없다는 제약사항이 있었다. 지금은 이런 제약사항이 사라졌지만, 과거엔 "class" 프로퍼티를 사용할 수 없었기 때문에 elem.class를 사용하는 것 역시 불가능했다.

이런 배경 때문에 클래스를 위한 프로퍼티 "className"가 도입되게 되었다. elem.className는 "class" 속성에 대응한다.

className – 클래스 전체를 문자열 형태로 반환해주는 프로퍼티로 클래스 전체를 관리할 때 유용한다.

JSX에서의 className

웹 개발에서 className은 HTML 및 JSX(JavaScript XML) 구문에서 요소에 하나 이상의 CSS 클래스를 할당하는 데 일반적으로 사용되는 속성이다. 이를 통해 개발자는 요소에 CSS에 정의된 특정 스타일을 적용하여 원하는 모양과 동작을 제공할 수 있다.

다음은 className 속성에 대해 이해해야 할 몇 가지 중요한 사항

목적(Purpose): className 속성의 주요 목적은 CSS 클래스를 HTML 또는 JSX 요소와 연결하는 것이다. CSS 클래스는 요소에 적용해야 하는 스타일, 레이아웃 및 시각적 속성을 정의한다.

구문(Syntax): className 속성은 요소의 시작 태그의 일부로 className="value" 구문을 사용하여 지정된다. className에 할당된 값은 하나 이상의 공백으로 구분된 클래스 이름을 포함하는 문자열이다.

<div className="container main-section">Content goes here</div>

이 예제에서 <div> 요소에는 두 가지 클래스 이름이 할당되어 있다: "container", "main-section"이다.

여러 클래스(Multiple Classes): className 속성은 공백으로 구분하여 요소에 여러 클래스 이름을 할당할 수 있도록 지원한다. 이를 통해 여러 스타일을 적용하고 요소에 서로 다른 CSS 클래스의 효과를 결합할 수 있다.

재사용성 및 모듈성(Reusability and Modularity): CSS 클래스는 스타일을 한 번 정의하여 웹사이트의 여러 요소에 적용할 수 있는 방법을 제공한다. 여러 요소에 동일한 클래스 이름을 지정하면 일관된 스타일과 유지 관리 가능한 코드를 보장할 수 있다.

CSS 클래스 정의(CSS Class Definitions): className 속성과 연결된 CSS 클래스는 별도의 CSS 파일 또는 <style>태그 내에 정의된다. className 속성의 클래스 이름은 CSS 파일 또는 <style> 태그에 정의된 이름과 일치한다. 해당 클래스 이름에 정의된 스타일이 각 요소에 적용된다.

계단식 및 특정성(Cascading and Specificity): className 속성을 통해 여러 CSS 클래스가 요소에 할당된 경우 해당 클래스에 대해 정의된 스타일이 계단식으로 적용되어 서로 상호 작용할 수 있다. 충돌하는 스타일이 정의된 경우 className 속성의 클래스 이름 순서가 요소의 최종 모양에 영향을 줄 수 있다.

전반적으로 className 속성은 웹 개발에서 CSS 클래스와 HTML 또는 JSX 요소의 연결을 용이하게 하는 중요한 요소이다. 이를 통해 개발자는 스타일을 적용하고 웹 애플리케이션에 원하는 시각적 표현과 동작을 구현할 수 있다.

의미있는 마크업

시맨틱 마크업이라고도 하는 의미 있는 마크업은 표시되는 콘텐츠의 구조와 의미를 정확하게 표현하는 방식으로 HTML 요소를 사용하는 것을 강조하는 웹 개발 접근 방식이다. 여기에는 시각적 서식이나 일반 컨테이너에만 의존하지 않고 콘텐츠의 목적과 맥락을 전달하는 데 가장 적합한 HTML 요소를 선택하는 것이 포함된다.

1. HTML 구조(HTML Structure): 의미 있는 마크업은 콘텐츠의 구조와 목적을 가장 잘 설명하는 HTML 요소를 사용하는 데 중점을 둡니다. 예를 들어, 기본 제목에는 <h1>, 단락에는 <p>, 탐색 메뉴에는 <nav>, 콘텐츠의 개별 섹션에는 <section>을 사용하는 것이 좋다. 적절한 요소를 활용하면 콘텐츠의 구조와 계층 구조가 사람과 검색 엔진 모두에게 명확하고 의미 있게 전달된다.

2. 접근성(Accessibility)(SEO - Search Engine Optimization): 접근 가능한 웹사이트를 만들려면 의미 있는 마크업이 필수적이다. 시맨틱 요소를 사용하면 스크린 리더와 보조 기술이 콘텐츠를 더 잘 이해하고 탐색할 수 있다. 이를 통해 시각 장애와 같은 장애가 있는 사람도 효과적으로 정보에 액세스하고 이해할 수 있다.

3. SEO(검색 엔진 최적화): 검색 엔진은 웹 페이지를 정확하게 이해하고 색인을 생성하기 위해 의미 있는 마크업에 의존한다. 시맨틱 HTML 요소를 사용하고 그 안에 의미 있는 콘텐츠를 제공하면 검색 엔진 결과에서 웹사이트의 가시성과 순위를 향상시킬 수 있다. 시맨틱 마크업은 검색 엔진이 콘텐츠를 해석하고 검색 쿼리와의 관련성을 판단하는 데 도움이 된다.

4. 유지 관리 및 적응성(Maintenance and Adaptability): 의미론적 마크업을 사용하면 웹사이트를 더 쉽게 유지 관리하고 업데이트할 수 있다. 마크업이 콘텐츠의 구조를 정확하게 반영하면 변경, 섹션 추가 또는 제거, 사이트 전체에 일관된 스타일 적용이 더 간단해집니다. 또한 의미 있는 마크업은 구조가 잘 정의되어 있고 CSS 미디어 쿼리로 조정할 수 있으므로 웹사이트가 다양한 장치와 화면 크기에 더 쉽게 적응할 수 있다.

5. 관심사 분리(Separation of Concerns): 의미 있는 마크업은 구조(HTML), 프레젠테이션(CSS), 기능(JavaScript)의 분리를 촉진한다. HTML에서 콘텐츠의 의미와 구조에 집중함으로써 일관된 스타일을 적용하고 별도의 CSS 및 JavaScript 파일을 통해 기능을 향상시키는 것이 더 쉬워집니다. 이렇게 분리하면 코드 유지 관리와 가독성이 향상된다.

6. 컨텍스트 및 명확성(Context and Clarity): 의미 있는 마크업은 콘텐츠에 명확성과 맥락을 제공하는 데 도움이 된다. 콘텐츠의 목적을 정확하게 설명하는 요소를 사용하면 개발자, 디자이너, 콘텐츠 제작자가 코드베이스를 더 쉽게 이해하고 작업할 수 있다. 또한 의미 있는 마크업은 콘텐츠가 잘 구조화되고 쉽게 이해할 수 있도록 함으로써 전반적인 사용자 경험을 개선한다.