< meta charset="utf-8">이 중요한 이유는 무엇입니까?

저는 현재 #100DaysOfCode challenge에 참여하고 있으며 에 제 여정을 기록하고 있습니다. 지금까지 저는 웹 개발의 3대 요소인 HTML, CSS, JavaScript에 대해 살펴보았습니다. 4일차에 제가 검토한 것 중 하나가 HTML 파일에 <meta charset="utf-8">를 포함하는 것의 중요성이라고 말했습니다.






매기 👩🏽‍💻💫










4️⃣: 구직에 대해 이야기하고(개발/기술 지원 역할을 찾고 있는 사람!) 몇 가지를 검토했습니다. <헤더>* 기본 HTML 페이지 구조


04:42 AM - 2020년 10월 15일









이유를 묻는 답변을 받았습니다. 답변을 입력하면서 트윗 하나에 할 말이 많다는 것을 알았고 블로그 게시물을 작성하는 것이 더 쉬울 것입니다.

<meta charset="utf-8"> 란 무엇입니까?



<meta charset="utf-8">을 분해하여 그 의미를 도출해 보겠습니다.
  • <meta>는 웹 페이지에 대한 메타데이터, 특히 웹 페이지에 포함된 콘텐츠 유형 중 표시되지 않는 숨겨진 내용을 검색 엔진에 알려주는 설명자를 포함하는 HTML 태그입니다.
  • charset는 웹 사이트 콘텐츠를 표시할 때 사용할 브라우저의 문자 인코딩을 정의하는 HTML 속성입니다.
  • utf-8는 특정 문자 인코딩입니다.

  • 즉, <meta charset="utf-8">는 기계 코드를 사람이 읽을 수 있는 텍스트로 변환할 때 utf-8 문자 인코딩을 사용하도록 브라우저에 지시하고 그 반대도 마찬가지입니다.

    왜 'utf-8'인가?



    오늘날 모든 웹사이트more than 90%는 UTF-8을 사용합니다. TF-8이 표준이 되기 전에는 ASCII가 사용되었습니다. 아쉽게도 ASCII는 영어 문자만 인코딩하므로 알파벳이 영어 문자로 구성되지 않은 다른 언어를 사용하면 텍스트가 화면에 제대로 표시되지 않습니다.

    예를 들어 "Hello World!"라는 아랍어 텍스트를 표시하고 싶다고 가정해 보겠습니다. charsetascii로 설정된 다음 코드 스니펫을 사용하는 화면에서

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="ascii"> <!-- char encoding is set equal to ASCII -->
    </head>
    <body>
      <h1>!مرحبا بالعالم</h1>
    </body>
    </html>
    


    이제 브라우저로 이동하면 텍스트가 횡설수설 🥴으로 표시되는 것을 볼 수 있습니다.


    그러나 charsetutf-8로 변경하면 코드는 다음과 같습니다.

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8"> <!-- char encoding is set equal to UTF-8 -->
    </head>
    <body>
      <h1>!مرحبا بالعالم</h1>
    </body>
    </html>
    


    이제 텍스트가 제대로 표시됩니다 🥳:



    따라서 UTF-8은 ASCII의 단점을 해결하기 위해 만들어졌으며 전 세계 거의 모든 언어를 번역할 수 있습니다. 이것과 ASCII와의 하위 호환성 때문에 거의 모든 브라우저가 UTF-8을 지원합니다.

    HTML 파일에 <meta charset="utf-8">을 포함하는 것을 잊은 경우 어떻게 합니까?



    걱정하지 마세요. HTML5가 지원합니다! 🦸

    HTML5에서 사용되는 기본 문자 인코딩은 UTF-8입니다. 즉, HTML 파일의 맨 위에 <!DOCTYPE html>를 포함하면(HTML5 파일임을 선언함) 달리 지정하지 않는 한 자동으로 UTF-8을 사용합니다.

    또한 대부분의 브라우저는 문자 인코딩이 지정되지 않은 경우 기본적으로 UTF-8을 사용합니다. 그러나 이것이 보장되지 않기 때문에 HTML 파일에 <meta> 태그를 사용하여 문자 인코딩 사양을 포함하는 것이 좋습니다.

    당신은 그것을 가지고 있습니다. 🎉 아래에 의견이나 생각을 자유롭게 남겨주세요. 제 #100DaysOfCode 여정을 팔로우하고 싶다면 Twitter@maggiecodes_에서 저를 팔로우하세요. 즐거운 코딩하세요!

    좋은 웹페이지 즐겨찾기