📖HTML의 기본이론
어떠한 공부도 기본이 있어야 다음단계로 진행이 가능하기에
코딩의 바탕이자 뿌리가 되는 HTML에 대해 공부해보도록 합시다.😆
✍ CODE
임의로 HTML예시를 만들어 보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0"/>
<title>Hi HTML</title>
</head>
<body>
<h1>HTML STUDY</h1>
<p>HTML World</p>
</body>
</html>👉 RESULT
예시로 만든 html은 브라우저에서 밑 이미지와 같이 확인이 가능하다.
HTML 문서는 반드시 <!DOCTYPE html> 으로 시작하는 문서 형식으로 지정
- <html> ~ </html> 👉 실질적인 내용을 입력
- <head> ~ </head> 👉 document title, 외부파일 참조, 메타 데이터 참고 등
- <body> ~ </body> 👉 출력 요소를 입력
요소 (Element)
- html 요소는 시작태그<>와 종료태그</>로 이루어져 있다.
- 시작태그와 종료태그 사이에 위치한 content로 구성 된다.
- html는 기본적으로 요소들의 집합으로 이루어져 있다.
ex) <div>content</div>
속성 (Attribute)
- 성질, 특징을 정의하는 요소
- 시작태그에 위치해야 하며 이름과 값으로 이루어진다.
-<img src="html.jpg"/> 👉 <img Attribute명 = "Attribute 값"/>
🧐 HTML Global Attribute
👉 대체적으로 모든 HTML 요소가 공통적으로 사용할 수 있는 속성
| Attribute | Description |
|---|---|
| id | 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다. |
| class | 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다. |
| hidden | css와 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다. |
| lang | 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다. |
| tabindex | 사용자가 키보드로 페이지를 네비게이션 시 이동 순서를 지정한다. |
| title | 요소에 관한 제목을 지정한다. |
🙋♀️ 기본태그 (웹 페이지를 구성하는 태그)
HTML tag
- <html> ~ </html>
- 모든 HTML 요소의 최상위 요소
- 웹 페이지에 단 하나만 존재할 수 있다.
- <!DOCTYPE>를 제외한 모든 요소는 자식이자 내부에 기술해야한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀이 들어갑니다.</title>
</head>
<body>
화면에 표시될 모든 컨텐츠
</body>
</html>HTML attribute
- 주로 lang attribute를 사용
- 영어를 주언어로 사용하는 경우의 예시
<html lang="en">head tag
- 메타데이터(Metadata)를 포함하기 위한 요소(메타데이터 외 요소포함❌)
- 웹 페이지에 단 하나만 존재한다.
- title, style, link, script에 대한 데이터로 화면에 나타나진 않는다.
body tag
- <body> ~ </body>
- HTML 문서의 내용 작성
- 웹 페이지에 단 하나만 존재할 수 있다.
- 메타데이터를 제외한 대부분의 구성 요소가 포함된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀이 들어갑니다.</title>
</head>
<body>
화면에 표시될 모든 컨텐츠
</body>
</html>title, style tag
- <title> ~ </title>
- 문서의 제목, 브라우저 탭에 표시된다.
- <style> ~ </style>
- html 문서를 위한 style 정보를 정의한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀이 들어갑니다.</title>
<style>
body {
color:red;
background-color:blue;
</style>
</head>
<body>
style 태그로 정의된 문서
</body>
</html>link tag
- 외부 리소스와 연계정보를 제공한다.
- 주로 외부 css파일을 연계하는데 사용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀이 들어갑니다.</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
content
</body>
</html>script tag
- 자바 스크립트를 직접적으로 입력하거나 script src를 통해 외부 js 파일을 연결한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀이 들어갑니다.</title>
<!--직접 입력-->
<script>
document.addEventListener('click',function(){
alert('clicked!');});
</script>
<!--외부 파일 로드-->
<script src="main.js"></script>
</head>
<body>
content
</body>
</html>meta tag
- description, keywords, author 등 기타 메타데이터 정의
- 브라우저, 검색엔진 등에 의해 사용된다.
- charset을 이용해 문자셋 정의가 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>안녕하세요</p>
<p>반갑습니다</p>
<p>어서오세요</p>
</body>
</html>- 웹 페이지 설명 정의
<meta name="description" content="Web tutorials on HTML and CSS">- SEO(검색엔진 최적화)를 위한 검색엔진에서 사용할 키워드 정의
<meta name="keyword" content="HTML, CSS, XML,XHTML, JavaScript">- 웹 페이지 제작자 명시
<meta name="author" content="Su Jeong">- 웹 페이지를 30초마다 refresh
<meta http-equiv="refresh" content="30">❗마치며❗
html에 기본적으로 사용되는 엘리먼트에 대해 자세히 알게 되었습니다.😆
처음 공부할 때는는 어떤 이유로 적용을 해야 하는지 지 모르고 그저 꼭 사용해야 한다기에에 줄줄 외우는 식으로 만만 작성했는데 이렇게 html 이론에 대해 정리하면서 공부하니 전반적인 체계에 대해 조금은 이해가 되어 굉장히 만족스럽습니다.❕❕
코린이 성장일기
역시 수정님! 😆