[HTML] [1] html 파일의 골격

2021. 3. 3. 11:34·Language/HTML
반응형

HTML이란 "Hyper Text Markup Language"의 약자로, 웹 페이지를 만들 때 사용하는 언어이다.

웹 페이지의 내용을 짜는 가장 기본적인 언어라고 할 수 있다. 웹 페이지에 출력할 문장 등을 "<"와 ">"로 감싼 "태그"라고 부르는 특수한 문자열로 감싸서 만든다.

이 HTML로 이루어진 파일을 CSS를 이용해 옷을 입히고, javascript를 이용해 동작을 구현하면서 웹 페이지가 생성되는 거이다.

모든 태그는 <태그종류>~</태그종류>로 이루어진다.

 

웹 페이지의 가장 기본적인 골격(구성요소)는 다음과 같다.

기본적인 html과 그 표현 예제

1. <!doctype html>

<!doctype html>은 독 타입(Doctype) 선언이라고 부르며, 해당 페이지가 어떤 버전의 HTML에 맞게 작성되었는지 나타낸다. 현재 가장 최신 버전은 "HTML5" 이며, 웹 브라우저는 특정 버전이 지정되어있지 않으면 HTML5 문서로 인식한다.

 

2.<html>~</html>

독 타입 바로 뒤에 선언되며, 이는 해당 문서가 HTML 문서라는 것을 나타내는 태그이다.

"lang"은 웹 페이지의 언어를 설정할 수 있는 부분으로, "ko"의 경우 한국어를, "en"의 경우 영어를 나타낸다.

 

3.<head>~</head>

해당 페이지의 제목과 설명, 사용할 외부 파일 링크 등과 같은 페이지의 정보를 작성하는 부분이다. 웹 브라우저에는 다로 출력되지 않는다.

 

4.<meta charset = "UTF-8">

문서에 사용되는 문자코드를 "UTF-8"로 하겠다는 지정이다. 이 부분을 설정하고 안하고에 따라 문자가 제대로 출력되지 않는 경우도 있다. "meta"는 "메타 요소"로 부른다.

 

5.<title>~</title>

페이지의 제목을 작성한다. 여기에 작성한 이름이 브라우저 탭에 출력된다. 혹 사용자가 웹 사이틀르 북마크 할 경우, 또는 검색할 경우의 페이지 제목으로도 출력된다.

 

6.<meat name="description" content="~">

페이지의 설명을 입력한다. 검색 엔진으로 페이지를 검색했을 때, 페이지 제목과 함께 출력되는 부분이다. 사용자가 검색햇을 때 어떤 사이트인지 빠르게 알려줄 수 있게 필요한 키워드를 섞어 설명을 작성하면 좋습니다.

 

7.<body>~</body>

HTML 문서의 본체 부분이다. 여기에 입력한 콘텐츠가 실제로 브라우저에 출력된다.

 

 

 

 

반응형
저작자표시 (새창열림)

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

[HTML] [6] 태그(5) - <br>, <blockquote>, <audio>, <video>, <span>  (0) 2021.03.03
[HTML] [5] 태그(4) - <header>, <article>, <section>, <div>, <navigation>  (1) 2021.03.03
[HTML] [4] 태그(3) - 입력 양식 만들기  (0) 2021.03.03
[HTML] [3] 태그(2) - <ul>, <ol>, <li>, 주석  (0) 2021.03.03
[HTML] [2] 태그(1) - <h1>, <a>, <img>, <p>  (0) 2021.03.03
'Language/HTML' 카테고리의 다른 글
  • [HTML] [5] 태그(4) - <header>, <article>, <section>, <div>, <navigation>
  • [HTML] [4] 태그(3) - 입력 양식 만들기
  • [HTML] [3] 태그(2) - <ul>, <ol>, <li>, 주석
  • [HTML] [2] 태그(1) - <h1>, <a>, <img>, <p>
개발하는 사막여우
개발하는 사막여우
개발개발 주저리주저리
    반응형
  • 개발하는 사막여우
    개발하는 사막여우
    개발하는 사막여우
  • 전체
    오늘
    어제
    • All (311)
      • Books (13)
        • 읽기 좋은 코드가 좋은 코드다 (13)
      • Study (6)
        • Blockchain (3)
        • Algorithm (3)
      • Baekjoon (36)
      • Programmers (166)
      • LeetCode (15)
      • Open Source (1)
        • Youtube Popout Player (1)
      • Language (32)
        • Python (9)
        • JS (8)
        • Java (5)
        • HTML (6)
        • CSS (4)
      • Library & Framework (15)
        • React.js (15)
      • IDE (2)
        • IntelliJ (2)
      • Airdrop (9)
      • Tistory (2)
      • etc.. (7)
        • Cozubi (6)
        • lol-chess (0)
  • 블로그 메뉴

    • Github
  • 링크

    • Github
  • 공지사항

  • 인기 글

  • 태그

    Java
    코딩테스트연습
    programmers
    Cozubi
    카카오 알고리즘 문제
    클린 코드 작성법
    프로그래머스 위클리 챌린지
    알고리즘문제풀이
    파이썬
    카카오 공채
    신규 코인 에어드랍
    클린 코드
    2018 KAKAO BLIND RECRUITMENT
    프로그래머스
    카카오 코딩테스트
    코인줍줍
    Python
    코주비
    백준
    읽기 좋은 코드가 좋은 코드다
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.6
개발하는 사막여우
[HTML] [1] html 파일의 골격
상단으로

티스토리툴바