Untitled_Blue

[HTML] HTML 기초 본문

Web/HTML

[HTML] HTML 기초

Untitled_Blue 2023. 6. 11. 19:53
반응형

안녕하세요. 이번 글은 HTML 기초에 대한 설명입니다.

 

- HTML이란?

  • HyperText Markup Language의 약자이며 웹 문서를 만드는 기초적인 언어
  • 현재까지는 HTML5을 HTML의 표준 규약으로 지정
  • 정적인 특성을 가지며 모든 웹 페이지를 만드는 데 제일 기초적이면서 필수 언어

- HTML 문서의 구조

<!DOCTYPE html>
<html lang="en"> <!-- 웹 문서의 시작 -->

<head> <!-- 웹 문서의 정보 -->
    <title>Document</title> <!-- 웹 페이지의 제목 -->
</head>

<body> <!-- 웹 문서의 내용 -->
    내용을 입력하는 곳입니다.
</body>
</html>

HTML은 마크업 언어인 만큼 <> </> 태그 형식을 기반으로 작동한다. 그러므로 태그의 시작과 끝이 항상 존재해야 한다.

상단의 코드를 실행하면 이렇게 HTML 웹페이지가 실행된다. <title> 부분에 Document라고 적은 곳은 웹 브라우저에서 제목으로 정상적으로 나오는 점 또한 확인 가능하다.

VS Code 기준으로 html 문서 내에 ! 를 입력하고 하단의 부분을 선택해 Enter를 누르면 HTML의 기본적인 구조가 자동으로 입력된다. (거의 모든 IDE 기준 자동완성 단축키는 윈도우 기준으로 Ctrl + Spacebar이다.)

- lang 속성

상단에 html 뒤에 lang="ko"라고 적힌 부분을 확인할 수 있는데 이는 국가별 웹 접근성을 설정하기 위함이다. 접근성이라고 하는 부분에는 검색 엔진뿐만 아니라 크롬같은 웹 브라우저 내 번역 기능을 원활하게 사용하는 것과 자동으로 음성 변환해주는 프로그램을 사용하는 등등.. 다양한 부분에서 적용된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
    이렇게 할 수 있다.
    DND means "Do not Disturb" !
</body>
</html>

다음은 lang 부분을 한국어로 설정한 코드이다.

해당 코드를 실행하면 크롬 내 번역기가 감지된 언어라고만 하고 전체적으로 번역을 해주지 않는 점을 확인할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
    이렇게 할 수 있다.
    DND means "Do not Disturb" !
</body>
</html>

다음은 ko 대신에 en (english)로 설정한 코드이다.

해당 코드를 실행하면 실행하자마자 자동 번역 프로그램이 언어를 자동으로 인식하는 점을 볼 수 있다.

그리고 한국어로 번역하기를 선택하면 상단 이미지처럼 영어로 된 문장을 자동으로 번역해주는 점을 확인할 수 있다.

이외에도 lang 속성은 일본어, 중국어, 태국어 등 다양한 언어를 지원하고 있다. 또한 이 부분은 국가별 언어 코드인 ISO 639-1를 기반으로 웹 접근성을 설정하는 것을 지원하고 있다. 보다 더 다양한 국가의 언어 코드를 보길 원한다면 하단의 상트를 방문하는 것을 추천한다.

https://www.w3schools.com/tags/ref_language_codes.asp

 

HTML ISO Language Code Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

다음은 HTML 에서 지원하는 다양한 태그에 대한 설명입니다. 감사합니다.

반응형

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

[HTML] 양식을 만들다. 폼 (Form) 태그  (0) 2023.06.14
[HTML] 하이퍼링크, iframe, Bookmark  (0) 2023.06.13
[HTML] 이미지, 오디오 등 컨텐츠 추가 태그  (0) 2023.06.13
[HTML] 목록과 표 만들기 - <table>, <li>, <ul>, <ol>  (0) 2023.06.12
[HTML] 텍스트 관련 태그 정리  (0) 2023.06.12
'Web/HTML' Related Articles more