기본 콘텐츠로 건너뛰기

웹페이지 만들 때 html파일 셋팅, 첫화면 - html

이미지
작성자:

html 기본 구조 세팅

html 기본 구조

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

  <!-- 최상위 경로에 robots.txt 등록(예: https://domain.com/robots.txt). meta tag에도 추가해도 됨 -->
  <meta content="index,follow" name="robots"/>
  <meta content="index,follow" name="Yeti"/>
  <meta content="index,follow" name="Googlebot"/>
  <meta content="index,follow" name="googlebot-image"/>
  <meta content="index,follow" name="Daumoa"/>

  <meta property="og:title" content="sns, 메신저 등으로 보낼 때 보여지는 타이틀">
  <meta property="og:description" content="sns, 메신저 등으로 보낼 때 보여지는 내용">
  <meta property="og:image" content="sns, 메신저 등으로 보낼 때 보여지는 이미지경로">
  <meta property="og:image:width" content="sns, 메신저 등으로 보낼 때 보여지는 이미지 크기(가로)">
  <meta property="og:image:height" content="sns, 메신저 등으로 보낼 때 보여지는 이미지 크기(세로)">
  <meta property="og:url" content="sns, 메신저 등으로 보낼 때 보여지는 경로">

  <meta name="Subject" content="제목">
  <meta name="author" content="소유주">
  <meta name="publisher" content="저자">
  <meta name="description" content="사이트 설명글">
  <meta name="keywords" content="검색 키워드">

  <meta name="msvalidate.01" content="인증키"/><!-- 빙 웹마스터도구 등록 -->
  <meta name="naver-site-verification" content="인증키"><!-- 네이버 서치어드바이저 등록 -->
  <meta name="google-site-verification" content="인증키"><!-- 구글 서치콘솔 등록 -->

  <title>페이지 제목</title>
  <link rel="icon" href="image/favicon.ico">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="웹폰트경로"><!-- 예 : https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Roboto+Serif:wght@200;300;500&family=Roboto:wght@300;400;500;700&display=swap -->
</head>

<body>
  <h1>페이지 제목</h1>

  <header>
    ...header 내용
    <nav>
      <h2>navigation</h2>
    </nav>
  </header>

  <main>
    <section>
      <h2>content 1</h2>
    </section>

    <section>
      <h2>content 2</h2>

      <article>
        <h3>content 3</h3>

        <section>
          <h4>content 4</h4>
        </section>
      </article>
    </section>
    ......
    ...
  </main>

  <footer>
    ...footer 내용
  </footer>

</body>
</html>

meta 태그는 필요에 따라 추가하거나 삭제해서 사용


위와 같은 구조가 가장 기본적인 html의 구조이다.
사람마다 작성하는 방식이 약간씩 다를 수 있겠지만, 큰 틀에서는 비슷한 양식으로 작성될거라 생각된다.


끝.



분류 :