HTML 총정리 (1): <html의 틀> 편

ain·2022년 5월 25일
html
0

HTML

목록 보기
1/2
post-thumbnail

본문은 HTML 태그의 전체적인 틀과 쓰임새를 정리해 본 글입니다.

<html>

html 태그는 html 문서를 만들 때 꼭 필요한 태그이다. 이 태그가 없어도 문서는 작성할 수 있지만 이 문서가 html 문서라는 것을 알려주기 위해서는 꼭 써야 하는 태그이다. 하나의 html 파일 당 단 하나의 <html>태그가 존재한다.

  • lang
    이 태그에 많이 붙는 속성으로는 lang이라는 전역속성이 있는데 이 속성은 문서가 어떤 언어로 작성되고 있는지 정의(define)해주는 속성이다. 기본값은 '알 수 없음'이다.
    • 한글로 작성할 때는 ko나 ko-KR로 작성하는데, ko는 한국어(korean)이고 KR까지 붙이면 한국에서 쓰이는 한국어라는 뜻이다.
    • 영어로 예를 들면, en-US(미국영어)도 있고 en-GB(영국영어)도 있다.

<html> 태그가 있다면 꼭 있어야 하는 태그는 <head>와 <body>태그이다. 이 두 태그는 하나의 <html>당 한개씩 존재 한다.

head 태그는 html의 바로 아래의 첫번째 자식 요소로 들어와야 한다. <head> 태그 자식 요소로는 <meta>, <title>등이 있으며 문서에 직접적으로 보이는 태그가 아니다.

<meta />

<meta /> 태그는 단일태그로, html 문서의 정보를 나타내주는 태그이다.
속성을 입력해서 해당 문서의 메타데이터를 설정해주면 된다. 기본적으로 쓰는 속성으로는 아래 몇가지가 있다.

  • charset
    문서의 인코딩 형식을 맞춰줄 때 쓰는 속성인데 최근에는 UTF-8로 많이 설정해준다. 이 속성을 입력해줘야 한글이나 특수문자가 깨지지 않는다. 우리가 쓰는 문자를 컴퓨터 언어로 변환시켜주기 위해 쓴다고 생각하면 된다.
    <meta charset="UTF-8" />
  • http-equiv="X-UA-Compatible",
    content="IE=edge"
    이 두 속성은 하나의 meta태그에 같이 쓰이며, 호환되는 브라우저를 명시하면 된다. 특히 버전별로 다르게 보이는 IE(Internet Explorer)는 잘못하면 내가 작성한 문서대로 보이지 않기 때문에 이 속성으로 호환성을 최적화 하는 것이다. IE=edge가 최신버전의 IE이고 이 버전에 맞춰 화면에 보여지도록 설정하는 것이다. 만약 IE=10같은 구버전을 입력한다면 구버전에 맞게 호환이 될텐데 그렇게 하면 IE10에서만 내가 의도한 문서를 볼 수 있는 셈이다.
  • name
    name 속성은 viewport, author, description, keywords 등으로 정의 할 수 있다.
    • viewport : 화면의 너비를 설정할 수 있는데 뒤에 content속성과 함께 쓰이며, content속성에는 정확한 너비를 정의한다. 보통은 사용자의 디바이스에 따라 조정되는 width=device-width를 많이 사용한다.
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    • author : 이 문서가 누구에 의해 작성 되었는지 작성해준다.
    • description : 이 문서를 설명하는 문구를 작성해준다.
    • keywords : 문서와 부합하는 keywords를 적어주면 검색엔진에서 해당 키워드를 검색했을 때 해당 문서가 관련된 문서로 뜬다.
      ❗️하지만 구글에서는 해당 정의를 무시한다고 한다. 오래전에는 검색엔진이 문서의 내용과 keywords를 보고 작동하였지만 사용자들이 점점 문서의 내용과 관련없는 keywords를 쓰거나, 남용하고 악용하는 사례가 많아짐에 따라 keywords기능을 안쓰게 됐다고 한다.

<title>

<title> 태그는 브라우저에 보여질 때 탭에 제목이라고 보면 된다.
<title> (작성중)HTML 총정리<title>

탭

<link>는 단일태그이며, 주로 css파일을 html파일과 연결하거나 font-family를 가져와서 쓸 때 쓰이는 태그이다. rel속성으로 무슨 타입의 파일인지 입력해주고, href속성으로 경로를 입력해주면 된다.
<link rel="stylesheet" href="css파일경로"/>


<body>

<head>태그 다음으로 오는 태그는 바로 <body>태그이다. 우리가 사용자에게 보여줄 모든 요소는 이 <body>태그 안에 작성하면 된다. 우리가 컨텐츠를 만들때 쓰는 태그들은 다음편에 정리해놓겠다.

그 전에, 자바스크립트 파일을 연결해줄 태그를 살펴보자.

*<script>

<script>태그는 자바스크립트 파일을 html파일과 연결할 때 쓰이는 태그이다. 속성으로 type과 src가 있는데 파일 경로는 src에 적어주면 된다.

이 태그는 head안에 적어도 되지만 body태그의 맨 아래에 적어주면 좋다.

브라우저에서 소스파일을 요청해서 받아올 때 html부터 읽기 때문에 html의 맨 위 코드 부터 차례대로 쭉 읽는다. 이때 만약 자바스크립트 파일이 head안에 있다면 html 컨텐츠를 읽기도 전에 자바스크립트 파일이 먼저 읽힐 것이며 자바스크립트에 무거운 코드가 있어서 로딩하는데 5초정도 걸린다고 가정하면 그 5초동안 사용자는 html문서가 없는, 즉 빈 화면을 바라보고 있어야 한다.

그렇기 때문에 html 컨텐츠를 다 읽은 다음에 로딩 될 수 있도록 body태그의 맨 밑에 입력해 주면 좋다.


태그 순서:

<html>
  <head>
    <meta/>
    <title></title>
    <link/>
  </head>
  <body>
    .
    .
    .
    <script></script>
  </body>
</html>

참고로 vsc에서는 느낌표를 치고 tab을 누르면 꼭 필요한 기본적인 태그들이 자동으로 생성된다.

참고

profile
ain
프론트엔드 개발 연습장 ✏️ 📗
다음 포스트

WAI-ARIA: role과 aria-label 사용법

0개의 댓글