css로 영문 UpperCase하는 것과 직접 대문자로 입력하는 것의 차이

 

대문자를 쓸 때 그냥 대문자로 쓰면 되지 왜 css로 uppercase하는거야?

 

대문자를 CSS로 변환하는 것에는 몇 가지 이유가 있습니다:

 

 

• 유연성: 디자인 변경 시 CSS만 수정하면 됩니다.

 

 

• 접근성: 스크린 리더가 텍스트를 올바르게 읽을 수 있습니다.

 

 

3. 국제화: 다국어 지원 시 유용합니다.

 

 

• 일관성: 스타일 변경이 쉽습니다.

 

 

하지만 단순히 대문자를 사용하고 싶다면, HTML에서 직접 대문자로 작성해도 됩니다:

 

 

SideBar.tsx

Ask

Copy

Apply

 

 

<h2 className="text-2xl mb-8">YOUR PROJECTS</h2>

 

 

 

 

 

 

이렇게 하면 코드가 더 직관적이고 간단해집니다. CSS로 대문자 변환이 꼭 필요한 경우가 아니라면, 직접 대문자로 작성하는 것이 좋습니다.

 

 

 

접근성 관점에서 다시 자세히 설명해줘

 

접근성 관점에서 CSS로 대문자 변환을 하는 것과 직접 대문자를 사용하는 것의 차이를 자세히 설명해드리겠습니다:

 

 

• 스크린 리더 동작:

 

 

• CSS 대문자 변환: 스크린 리더는 원본 텍스트를 읽습니다. 즉, "Your projects"로 읽습니다.

 

 

• 직접 대문자 사용: "YOUR PROJECTS"로 읽을 수 있으며, 각 글자를 개별적으로 읽을 수도 있습니다.

 

 

• 의미 전달:

 

 

• CSS 변환: 시각적으로만 대문자로 보이지만, 의미적으로는 일반 문장으로 해석됩니다.

 

 

• 직접 대문자: 강조나 중요성을 나타내는 것으로 해석될 수 있습니다.

 

 

3. 음성 톤:

 

 

• CSS 변환: 일반적인 톤으로 읽힙니다.

 

 

• 직접 대문자: 스크린 리더가 더 강조된 톤으로 읽을 수 있습니다.

 

 

4. 국제화 및 번역:

 

 

• CSS 변환: 다른 언어로 번역 시 원문 그대로 유지되어 각 언어의 대소문자 규칙을 따를 수 있습니다.

 

 

• 직접 대문자: 번역 시 모든 언어에서 대문자로 유지될 수 있어 부자연스러울 수 있습니다.

 

 

결론적으로, 접근성 측면에서는 CSS로 대문자 변환을 하는 것이 더 유연하고 다양한 상황에 적응할 수 있습니다. 하지만 "YOUR PROJECTS"가 제목이나 중요한 레이블로 사용되는 경우, 직접 대문자로 쓰는 것도 적절할 수 있습니다. 상황에 따라 적절한 방법을 선택하는 것이 중요합니다.