[HTML] 필수 HTML 코드 정리

코딩을 하는데 있어 가장 중요한 것은 자신만의 코딩 작성 능력을 가지는 것이라고 생각한다.

솔직히 그 많은 코딩 문법 쓰지도 않고, 자주 쓰는 애들만 쓰게 된다.

그런 김에 HTML도 자주 사용하는 것 위주로 정리해 보려고 한다.

<!DOCTYPE html> : html 문서의 시작. 어떤 html버전인지 웹 브라우저에게 알려주는 역할을 한다. html5에서는 안 써도 된다고 하는데, 우선은 쓰도록 하자.
<html lang="ko"> ~ </html> : html태그. 이 안에다 html문을 쓴다. 한국어로 된 홈페이지 만들 때, 이 곳에 lang=”ko”를 써서 한국어 사용을 알린다. 우리나라에서는 거의 필수적.
<head>~</head> & <body>~</body> : 사실 이 두가지가 좀 헷갈렸다. 그냥 head는 홈페이지 메인 화면 외적인 부분에 쓴다고 알면 된다. 홈페이지명, 문자 style, jsp나 css파일 읽어오는 문법 등… 사용자 눈에는 보여지지 않지만 필요한 자질구레한 기능들을 이 곳에 쓴다고 보면 된다. body에는 본격적으로 우리가 만들고 싶은 홈페이지에 관한 html문을 작성한다.
<meta charset="UTF-8" /> : 메타데이터를 나타낼 때 사용하는 meta 태그 안에 UTF-8로 인코딩 해주라고 꼭 명시를 해줘어야 한다. 메타데이터가 뭐고, 인코딩은 뭔 소리야… 하실텐데. 그냥 저거를 안 하면 아래 사진처럼 깨진글자들이 보이게 된다. 그냥 꼭 해주면 된다. 그리고 meta태그 붙은 애들은 꼭 head 태그 안에다 써야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> : 모바일웹이나 반응형웹에서 각각의 기기장치를 인식해서 화면 크기 설정할 때 사용. 일명 viewport라고 한다. 이것도 고대로 따라 쓰면 되는데, 뜻은 viewport사용. 장치 넓이로 콘텐츠 넓이 설정. 페이지 로드시 초기화면 크기는 1로. 라는 뜻이다.
<title>~</title> : 말 그대로 타이틀 쓰는 거… (아래 사진 빨간 부분)

<link rel="icon" href="./favicon.png" /> : 파비콘 코드

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" /> : 스타일 초기화 코드. 나도 이 코드의 필요성은 이해가 가지 않는다. 여기저기 적힌 설명에 따르면 각 브라우저마다 CSS 스타일이 조금씩 다르기 때문에 이 코드를 이용해서 CSS스타일을 초기화하고 작업하면, 어떤 브라우저를 쓰던지 내가 원하는 결과를 얻을 수 있다고 한다.
<link rel="stylesheet" href="./css/main.css" /> : HTML파일에서 CSS파일 연결할 때 쓰는 코드. href 뒤에 쓰여진 경로는 작업 환경에 따라 다르지만, 나의 경우는 항상 css파일 아래에 있을거라 이대로 써도 무방하다.
<script defer src="./js/main.js"></script> : HTML파일에서 Java Script파일 연결할 때 쓰는 코드. 이것도 마찬가지로 경로 신경써주자.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title> ~ </title>

  <!--Open Graph-->
  <!--http://ogp.me/-->
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="~" />
  <meta property="og:title" content="~" />
  <meta property="og:description" content="~" />
  <meta property="og:image" content=" ~이미지 경로~ " />
  <meta property="og:url" content=" ~url 경로~ " />

  <!--Twitter Card-->
  <!--https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started-->
  <meta property="twitter:card" content="summary" />
  <meta property="twitter:site" content="~" />
  <meta property="twitter:title" content="~" />
  <meta property="twitter:description" content="~" />
  <meta property="twitter:image" content=" ~이미지 경로~ " />
  <meta property="twitter:url" content=" ~url 경로~ " />

  <!--파비콘-->
  <link rel="icon" href="./favicon.png" />
  <!--브라우저 스타일 초기화-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
  <link rel="stylesheet" href="./css/main.css" />
  <script defer src="./js/main.js"></script>
</head>
<body>

	~~

</body>
</html>

=≫ 이 코드를 복붙하고 시작하면 작업하기 훨씬 편할 것 같다.

저작자표시 비영리 변경금지

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

[HTML] 구글 머터리얼 아이콘(Google Material Icons) (0)	2023.10.11
[HTML] 구글 폰트 (0)	2023.10.11
[HTML] 오픈 그래프 (0)	2023.10.11
[HTML] 링크 걸기 및 링크 라인 없애기 (0)	2023.09.17
[HTML] 파비콘 설정하기 (0)	2023.09.17