[HTML] HTML의 기본

10182 단어 htmlhtml

0. HTML(Hypertext Markup Language)이란?

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기능/동작 (JavaScript)을 설명하는데 사용됩니다.
HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용합니다.
HTML 요소는 "태그"를 사용해서 문서의 다른 텍스트와 구분합니다. 태그는 "<", 태그 이름, ">"로 이루어집니다.
-출처: MDN_HTML: Hypertext Markup Language


1. HTML의 기본 구조

<!-- html태그로 시작해서 태그로 끝난다. -->
<!DOCTYPE html>
<!-- 브라우저에게 이 문서는 HTML5버전으로 작성된 것이라고 선언하는 부분 -->
<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">
    <title>Doctype & Document Structure</title> <!-- 문서의 대제목 -->
	
  	<link rel="stylesheet" href="" />
  	<!-- link태그: CSS스타일시트를 첨부하는 태그 -->
  	<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
  	<!-- font를 사용할때도 link태그를 사용 -->
  
	<style> /* HTML문서내에서 CSS코드를 작성할 때 사용 */
  		/* CSS코드 */
      		* { font-family: 'Spoqa Han Sans Neo', 'sans-serif'; }
  	</style>
</head>
<body>
    <!-- 웹 문서에 들어갈 내용 -->
  
  <script src="js경로">
    //JavaScript코드
  	//html문서 내에 JavaScript파일을 첨부할 때 사용
    //script의 위치는 body안의 맨 마지막부분에 넣는다.
  </script>
</body>
</html>

2. Sectioning Elements 사용 방법

① section

② article

③ nav

④ aside

👩‍💻 참고) Sectioning Elements 내에는 반드시 heading태그를 작성해야 한다.

<section>
  <h1>section의 제목</h1>
  <p>...</p>
  ...
</section>
<nav>
  <h1>nav의 제목</h1>
  <ul>
    <li>
      <a href="#">링크</a>
    </li>
  </ul>
</nav>

좋은 웹페이지 즐겨찾기