21년 7월 한달 동안 Static Webpage 클론코딩을 진행하며 주의할 점, 중요하게 생각하는 점 몇 가지를 생각해보았습니다. 그 중 HTML 에 관련된 것은 이 페이지에 적고 CSS에 관련한 것은 다른 문서에 적고 참조해두겠습니다.
관련문서 : [ [html 이론] html 작성 규칙 :: Unchaptered의 초보코딩 (tistory.com) ]
관련문서 : [ [CSS 이론 ] CSS 작성규칙 :: Unchaptered의 초보코딩 (tistory.com) ]
이 문서에서는 다음의 내용을 다루고 있습니다.
- 내가 자주 쓴 HTML Tags 에 무엇들이 있는지
- HTML 구조 시 불필요하게 낭비되는 공간들이 어째서 발생하는지
내가 자주 쓴 HTML Tags 에 무엇들이 있는지
모든 기록이 언젠가 잊어버렸을 때 내게 살이되고 피가 될 것이라고 생각하며 기록을 진행한다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>Documents</title>
<link rel="SHORTCUT ICON" src="img/logo/sample.ico" type="image/x-icon">
<link rel="stylesheet" link="styles.css">
</head>
<body>
<nav></nav>
<main></main>
<header></header>
<button></button>
<img>
<svg>
<script src="index.js"></script>
</body>
</html>메뉴바는 전부 #nav_top / #nav_right / #nav_bottom / #nav_left 의 이름으로 만든다.
버튼은 되도록 <button></button> 을 통해서 만들어서 글자가 스크랩되는 현상을 막도록 한다.
<img>, <svg> 를 버튼으로 만들 때 js 를 이용하자, 절대로 button 으로 감싸지 말자. (나중에 골치아파짐)
컨텐츠는 전부 main 안에 넣도록한다.
이 규칙을 지켜야 하는 가장 큰 이유는, 다음에 작성할 [CSS 이론] CSS 작성규칙에서 알테지만... 간단하게 말하자면 Responsible Web 을 만들때 작업량이 현저히 늘어나는 현상을 막기 위함이다.