HTML이란?
-모든 웹 페이지의 뼈대
-웹 페이지를 만들기 위한 언어(markup언어)로 작성된 문서
- ❓Markup Language:일반적 텍스트와 구분하기 위해 <>(tag)로 둘러싸인 언어
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hyeyoon</title>
</head>
<body>
<div>
<h1>Animals</h1>
<h2>Bear</h2>
<h3>Species</h3>
</div>
</body>
</html>
🔨 !DOCTYPE html
<!DOCTYPE html>
-html태그는 아니다.
-항상 맨 윗줄에 선언 해야한다!
-HTML5 버전을 사용한다는 의미
🔨 HTML
<!DOCTYPE>만으로는 구조와 내용을 추가할 수 없어
<html></html>을 선언해야한다.
🔨 head
-html태그 다음으로 <head></head>
-metadata로 웹에 보여지지 않는 페이지 정보
-css파일을 연결
<head>
<meta charset="utf-8"> //컴퓨터가 다국어로 읽을 수 있도록 인코딩 ,
한글이 깨지지 않고 잘 보이게 함.
<meta name="viewport" content="width=device-width"> //디바이스의 가로크기가 곧 웹 페이지의 가로와 같다는 의미 , 이 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타남.
<title>hyeyoon</title> //브라우저 탭에 보이는 페이지 이름
</head>🔨 Body
-head태그 다음 위치
-사용자에게 보여지는 부분
<body>
<div> // 문단 나누기, 들여쓰기 필수
<h1>Animals</h1>
<h2>Bear</h2>
<h3>Species</h3>
</div>
</body>🔨 span
-주로 텍스트를 넣는다
-한 줄에 이어서 나온다 = inline-element
🔨 p
<p>tag파헤치기!</p>
<p>야호..</p> -텍스트를 주로 넣어준다. 문단을 통으로 넣을 때가 많음.
-span 태그와 달리 줄바꿈이 일어난다.
🔨 a
<a href = "http://www.~~~~~~">
-a태그는 클릭하면 화면이 이동한다.
-href속성에는 이동할 주소를 쓴다.
🔨 div
-웹사이트에서 섹션을 나눌 때 사용한다.
-비슷한 부분끼리 그룹짓기
-디자인에 맞게 레이아웃 분리하기
-각 div에 class나 id라는 attribute를 부여하여 css스타일을 입혀줄 수 있다.
🔨 id
<div id = "hyeyoon">
-각 태그에 이름을 주는 속성이다.
-주민번호와 같이 고유한 값이어야한다.고로 웹펭지에 해당 id이름은 하나
-해당 요소에만 넣고 싶은 디자인을 적용할 때 사용한다.
🔨 class
<div class = "content-wrap"></div>
-클래스도 이름을 주는 속성이다
-id와 역할이 비슷하지만, class에는 여러 태그에 중복된 이름을 부여할 수 있다.
