# 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에 할당된 값은 하나 이상의 공백으로 구분된 클래스 이름을 포함하는 문자열이다.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jin-11.gitbook.io/jin-devnote/week8/style-basics.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.