TIL #1 - HTML 구조

rosarang·2020년 12월 9일
0

HTML

목록 보기
1/6
post-thumbnail

기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1. <!DOCTYPE>

<!DOCTYPE html>
  • 해당 문서가 html5로 쓰였다는 것을 알린다.

2. <html>

<html lang="ko"></html>
  • 문서에서 사용할 언어를 지정할 수 있다.
  • 언어 표기는 두 자리 혹은 네 자리를 사용할 수 있다. (두 자리 언어별 코드 -> ISO 639-1 표준안)

3. <head>

<head></head> 브라우저에게 문서의 정보를 주는 태그

<title> 태그

  • <title></title> 탭 제목이자 즐겨찾기 디폴트 제목으로 추가된다.

  • 웹 접근성을 위해서 제목은 항상 있는 것이 권장되며 너무 길거나 특수문자가 있는 것은 좋지 않다. 핵심 문구만 넣을 것.

<meta> 태그

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • <meta>태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할지 지정하는 것이다. 영어를 제외한 다른 문자를 화면에 표시하기 위해 약속된 문자 세트 'utf-8'을 사용한다고 브라우저에게 알려준다.

  • 모바일 기기에서도 문서 제대로 보여주기 위해 viewport 설정 (?)

  • 인터넷 익스플로러 사용자도 고려해야하는 경우 최신 표준 모드로 해석하라고 알려줄 수 있다.
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

  • 검색 엔진에서 사이트를 검색할 때 참조할 정보를 입력할 수 있다. 검색 엔진에 따라 참고하는 정보는 달라질 수 있다.
    <meta name="keywords" content="html5, 웹표준"> - 해당 문서의 키워드
    <meta name="description" content="html5를 통해 웹 표준 공부하기"> - 해당 문서의 설명
    <meta name="author" content="Kyunghee Ko"> - 해당 문서의 소유자 혹은 제작자


4. <body>

<body></body> 브라우저에 보여지는 부분
  • 특수 기호를 사용하려면 미리 약속된 '엔티티 이름' 혹은 '엔티티 기호' 표기법을 사용해야한다.

  • 엔티티 코드 표 확인 http://dev.w3.org/html5/html-author/charref

  • %의 엔티티 이름 한개와 엔티티 코드 두개이다. 아무거나 사용해도 되며 뒤에 오는 세미콜론은 필수로 붙여야한다.
    '&percnt;', '&#x00025;', '&#37;'



출처 : Do it! HTML5+CSS3 웹 표준의 정석

profile
UX에 관심 많은 개발 초보 Front-end Developer

0개의 댓글