HTML 기본 용어와 구조 알아보기
기본 용어
요소(element)
페이지를 구성하는 부품
태그(tag)
요소를 만들 때 사용하는 기호, <> 안에 들어간다.
<title>contents</title>여기서 이 전체가 하나의 요소, 빨간 부분이 태그이다.
속성(attribute)
태그에 대한 추가적인 정보 제공
이름 = "값" 형태로 기술
<a href="http://www.w.com">hi</a>여기서 갈색 부분 href가 속성이다.
주석(comment)
<!-- -->코드 설명을 위한 목적으로 사용
기본구조
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>| <html> | 문서의 최상위 요소로, root요소라고도 한다. |
| <head> | 메타 데이터를 포함한다. |
| <body> | 문서의 내용을 나타낸다. |
<head> 메타 데이터
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css.css"> //css 파일 연결
<script src="java.js"></script> //javascript 파일 연결
</head>| <meta> | 다른 메타관련 요소로 나타낼 수 없는 메타 데이터를 나타낸다. |
| <title> | 페이지 탭에 표시되는 문서의 제목을 정의한다. |
| <link> | 현재 문서와 외부 리소스 간의 관계를 지정한다. 사이트 아이콘을 설정하는 데에도 사용된다. |
| <style> | 문서 또는 문서의 일부에 대한 스타일 정보를 포함한다. |
css와 javascript를 연결하는 많은 방법이 있는 것 같은데, 이건 나중에 따로 공부해서 정리해야겠다.
vscode를 설치한 후
'!'만 작성해도 바로 기본구조가 자동으로 써진다! 엄청 간편하다.
'WEB > html' 카테고리의 다른 글
| [html/공부] 요소 (0) | 2024.12.16 |
|---|---|
| [html/공부] 폼과 <input> types (0) | 2024.12.14 |