복잡한뇌구조마냥

[HTML] 번역 방지 설정 – 크롬 자동 번역 막기 본문

FE/HTML

[HTML] 번역 방지 설정 – 크롬 자동 번역 막기

지금해냥 2023. 11. 14. 11:25

다국어 적용 이전에 영어로만 페이지가 구성이 되어 있었는데,

크롬작업시에 자꾸 번역이 되어서 원하는 내용이 아닌게 자꾸 나와 거슬렸던 경험이 있다.

 

웹페이지에서 크롬 브라우저의 자동 번역 기능이 동작하지 않게 막고 싶을 때, 아래와 같은 방법을 사용할 수 있습니다.

✅ 방법1

<body class="notranslate" translate="no">

🔍 설명

  • class="notranslate"
    → 구글 크롬 번역기의 번역 대상에서 제외됩니다.
  • translate="no"
    → HTML5 표준 속성으로, 브라우저가 해당 요소를 번역하지 않도록 명시합니다.

📝 적용 팁

  • 전체 페이지에 적용하려면 <body> 태그에 붙이세요.
  • 특정 영역에만 적용하고 싶다면 <div class="notranslate">처럼 사용해도 됩니다.

✅ 방법2

<meta name="google" content="notranslate">
 

🔍 설명

  • name="google"
    → 구글 관련 메타 정보임을 지정합니다.
  • content="notranslate"
    → 페이지 전체를 번역하지 않도록 요청합니다.

📝 적용 위치

해당 태그는 <head> 태그 안에 위치시켜야 합니다.

<head>
  <meta charset="UTF-8">
  <meta name="google" content="notranslate">
  <title>My Page</title>
</head>

✅ 주의사항

  • 이 메타 태그는 크롬 기반의 구글 번역기에 한해 적용됩니다.
  • 브라우저나 번역 확장 도구에 따라 무시될 수도 있습니다.
  • 추가로 <body class="notranslate" translate="no">와 함께 사용하면 더 확실하게 적용됩니다.

이렇게 간단하게 막을 수 있으니 내용이 자꾸 번역되어서 불편한 경험이 있다면 한번 적용해봤으면 한다.

LIST

'FE > HTML' 카테고리의 다른 글

[HTML] HTML 메타 태그(meta tag) 종류 및 사용법 정리  (0) 2024.11.07
[HTML] HTML 공부 ( sub, sup 태그 )  (0) 2023.07.10
[HTML] HTML 공부 (HTML 템플릿 자동완성 기능 - Emmet)  (0) 2023.06.02
HTML 공부 (HTML Character Entity)  (0) 2023.04.07
'FE/HTML' Related Articles more