[HTML] HTML 작성 가이드라인 & 팁

기본적인 틀
BEM
1. head
2. body

기본적인 틀

<!DOCTYPE html>
<html lang="ko">
    <head>
    	<title></title>
    	<meta />   		*n
       	<link />   		*n
     	<script></script> 	*n
    </head>
    <body>
    	<header></header>
        <section></section> *n
        <footer></footer>
    </body>
</html>

BEM

(Block Element Modifier); HTML클래스 속성의 작명법

1. 요소__일부분 ; Underscore기호로 요소의 일부분을 표시

2. 요소--상태 ; Hyphen기호로 요소의 상태를 표시

1. head

<meta />

  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Starbucks" />
  <meta property="og:title" content="Starbucks Coffee Korea" />
  <meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
  <meta property="og:image" content="./images/starbucks_seo.jpg" />
  <meta property="og:url" content="https://starbucks.co.kr" />

  <meta property="twitter:card" content="summary" />
  <meta property="twitter:site" content="Starbucks" />
  <meta property="twitter:title" content="Starbucks Coffee Korea" />
  <meta property="twitter:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
  <meta property="twitter:image" content="./images/starbucks_seo.jpg" />
  <meta property="twitter:url" content="https://starbucks.co.kr" />

<link />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="icon" href="./favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<script></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
    integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- GSAP & ScrollToPlugin -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"
    integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollToPlugin.min.js"
    integrity="sha512-lZACdYsy0W98dOcn+QRNHDxFuhm62lfs8qK5+wPp7X358CN3f+ml49HpnwzTiXFzETs4++fADePDI+L2zwlm7Q=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- SWIPER -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.css" />
  <script src="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.js"></script>
  <!-- ScrillMagic -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"
    integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script defer src="./js/youtube.js"></script>
  <script defer src="./js/main.js"></script>

2. body

<header></header>

.inner > a.logo > img

> .sub-menu > ul.menu > (li > a) *n

> .search > input.text, .material-icons

> main-menu> .item > .item__name

> .item__contents > .contents__menu > ul.inner > (li > h4 , (ul > li) * n) *n

<section.xxx></section.xxx> * n

.bg-left (inner 바깥에 배경연장할 것이 있다면)

.bg-right

.inner > inner 내용 작성

<footer></footer>

.inner > menu > (li > a) *n

> btn-group > a * n

> .info > span * n

> p.copyright > span

> img.logo

저작자표시 (새창열림)

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

[HTML] 전역 속성 (0)	2022.05.24
HTML 문서에서 입력(form,input) (0)	2022.05.05
HTML 글자/단락 태그 + CSS (0)	2022.05.05
HTML 기본 문법 정리 (0)	2022.04.25

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[HTML] HTML 작성 가이드라인 & 팁

기본적인 틀

BEM

1. head

<meta />

<link />

<script></script>

2. body

<header></header>

<section.xxx></section.xxx> * n

<footer></footer>

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

기본적인 틀

BEM

1. head

<meta />

<link />

<script></script>

2. body

<header></header>

<section.xxx></section.xxx> * n

<footer></footer>

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

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역