기본적인 틀
<!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 |
