목차
· 다국어 설정하기
· 다국어 스타일 시트 적용하기
사내에서 콘텐츠 허브 서비스를 맡아, 개발을 진행하고 있어요 아무래도 국내 시장에서는 큰 점유율을 보유하고 있어 글로벌 시장 진출을 활발하고 있는데, 서비스 별로 가장 중요한 기능 중 하나가 바로 다국어 기능이에요. 입사를 하고 거의 3~4개월만의 연구소 공식 블로그 서비스를 런칭해야하기 때문에 새로 배우는 점이 참 많아요. 그 중 하나가 다국어에 따라 CSS를 변경하고 싶을 때예요.
다국어 설정하기
다국어 설정을 위해 주 언어가 일본어라면 아래와 같이 설정을 해줄 수 있어요.
그 외의 언어들은 다음과 같이 설정할 수 있답니다.
<html lang="jp">
/* <html lang="ko"> */
/* <html lang="en"> */위와 같이 HTML lang Attribute를 사용하는 이유는 아래와 같아요.
- 웹 접근성 준수
- 검색엔진 최적화 (SEO)
- CSS 언어 설정
- CSS의 특정 스타일 적용
여기서 가장 중요한 이유는 웹 접근성 준수와 해당 브라우저가 어떤 언어를 사용하는지 알려주기 위함이에요. 검색 엔진이 크롤링할 경우 어떤 언어인지 확실히 파악하기 위해 lang 속성을 필요로 합니다.
다국어 스타일 시트 적용하기
다국어 설정은 끝났으니, 이제 다국어 별로 다른 스타일 시트를 적용할 수 있어요.
다국어 스타일 시트 적용은 생각보다 많이 간단합니다.
// current lang : ko
// 우리가 설정할 HTML 파일입니다.
<div id="announce_container">
...
</div>위의 태그에 한국어 일 경우에만 지정 스타일 시트를 적용하고 싶을 때는 아래와 같이 지정을 할 수 있어요.
저의 경우 글자를 흰색으로, 배경색은 검정색으로 변경을 해볼게요.
// 우리가 설정할 CSS 파일입니다.
.announce_container:lang(ko) {
color: white;
background: black;
}위의 CSS 코드에서 특이한 점을 발견하셨나요? 바로 :lang이라는 키워드를 통해 언어셋에 맞는 CSS를 적용해줄 수 있어요. 이를 응용해서 저는 한국어와 일본어에 다른 텍스트를 제공해주는 예제를 추가로 작성을 해볼게요.
// 우리가 설정할 CSS 파일입니다.
.announce_container:lang(jp):before {
content: "This is JP Content";
}
.announce_container:lang(ko):before {
content: "This is KO Content";
}글로벌 서비스를 할 경우에는 다국어에 대응을 다양하게 진행할 수 있지만, CSS 코드로도 간단하게 지정할 수 있다는 점을 이번 포스팅에서 확인을 할 수 있었어요. 앞으로 글로벌 서비스를 할 기회가 많이 생길테니 다국어에 관련된 부분은 부지런하게 포스팅을 해보아야겠네요 : )
레퍼런스
[CSS] :lang() 다국어 설정 CSS 셀렉터 사용하기
미국 소재의 회사와 프로젝트를 진행하면서 다국어 지원이 필수가 되었습니다. 웹 사이트에 다국어 지원을 위한 방법에는 여러 가지가 있겠지만, 어떤 게 가장 효율적인 방법일지 고민이 되었
chironsoft.tistory.com
'개발적인' 카테고리의 다른 글
| 타입스크립트 딥다이브 (0) | 2024.05.31 |
|---|---|
| Next 13에 Vanila Extract 적용하기 (0) | 2024.05.31 |
| 개발자는 내가 만드는 제품에 대한 애정을 가져야한다 (2) | 2024.05.12 |
| nth-child와 nth-of-type의 차이 (0) | 2024.03.25 |
| Vue 공식 문서 훑어보기 - 템플릿 문법 · 반응형 기초 · 계산되어진 속성 (0) | 2024.03.19 |
댓글