예습
1.Html에 대해
2.Header와 Body의 차이
3.태그란 무엇일까?
4.Meta 태그란?
5.Semantic과 non-semantic의 차이점
6.ID와 Class의 쓰임
--------------------------------------------------------------------------------------------
1.
HTML은 왜 항상 만들 때 index.html으로 만들까 이유는 웹 서버들이 index 파일을 제일 먼저 찾도록 설계되어 있기 때문이다(디폴트 값으로)
<!DOCTYPE html>
이건 태그는 왜 안닫을까?
이유는 이 태그는 self-contained 태그이기 때문이다.
혼자 스스로 열고 닫는 태그이기 때문에 그 자체로 정보를 제공하기 때문이다.
문서는 head와 body로 크게 나뉜다 태그 닫는 것을 항상 주의하자
2.
<head>는 유저에게 보이지 않고 head는 오직 브라우저에게 웹사이트에 대해 정보를 제공할 뿐 body 태그가 유저에게 보이는 부분이다.
3.
Meta란 엑스트라 추가 정보라는 것이다.
<meta charset="UTF-8">
이 코드는 브라우저에게 우리가 작성하는 문서가 어떤 언어로 작성되어 있는지를 알려준다.
<meta name=" description" content="width=device-width, initial-scale=1.0">
Meta name
Meat의 이름은 =”00” 이다..
Meta 는 만약에 구글에 orange라고 입력했을 때 밑에 간략하게 나오는 설명글이 meta의 내용이다.
Meta 태그는 정말 많은 종류가 있어서 특정 플랫폼을 위해 존재하는 것도 있다.
이 정보는 브라우저를 위한 정보이기 때문에 해당 정보를 head파트에 저장한다.
즉 information = head , content = body
4.
(1)semantic 태그 와 (2) non-semantic 태그
Semantic 은 의미가 있다는 태그가 non은 반대다.
<h1> this is my big titl </h1>
<div>What is this</div>
h1은 semantic div은 non semantic
<span>도 non이다.
<section>This is an important section</section>
Section header 은 semantic
우리는 주로 header같은 태그를 사용한다
박스 같은 것이 필요할 때 div같은 태그를 사용한다. 이유는 div는 컨테이너,박스 같이 그 안에 내용물을 넣는 태그다.
Span은 텍스트를 위한 컨테이너이다. 텍스트를 위해서는 제목 title , 문단 p 와 같은 태그가 있는데 이와 같은 경우는 아니고 텍스트를 위한 컨테이너가 필요할 때 쓰면 된다.
Div가 많으면 혼란스럽기 때문에 각 div가 무엇을 뜻하는지 알려줘야 한다.
Ex)섹션 그리고 헤더를 만들어 보자
<section>
<header>
<h1>Title of a section</h1>
</header>
<section>
<div>
<header>Title of the unknown container</header>
</div>
</section>
이 두개의 헤더는 모두 같은 header 명칭을 가지고 있는데 어떻게 해야 이름을 지어 줄 수 있을까?이 과정은 매우 중요하다 왜냐면 css를 할 때 각 헤더의 역할에 맞게 명령을 내려야 하기 때문이다.
5.Id 와 class
2가지 방법이 존재한다. Id 와 class
<header id ="headerNumberOne">
<h1>Title of a section</h1>
</header>
Id는 이렇게 생겼다.
<header id ="headerNumberOne" class = "defaultHeader">
<h1>Title of a section</h1>
</header>
Class는 이렇게 생김
각 element마다 id는 한 개만 가질 수 있다. 왜냐면 ID가 고유하기 때문이다 like identity
Class는 이름처럼 반복 가능하다.
따라서
<section>
<header id ="headerNumberOne" class = "defaultHeader">
<h1>Title of a section</h1>
</header>
<section>
<div>
<header id ="differentHeader" class = "defaultHeader">
Title of the unknown container</header>
</div>
</section>
이런식으로 id는 다르고 동일한 속성의 class를 가질 수 있다.
Ex) 두개는 모두 배경이 파란색이지만 사이즈가 다를 수 있다.
Class는 반복해서 여러 번 사용가능 동일한 속성이 있을때마다 계속!
웹 상에는 고유한 element는 많이 없어서 주로 class를 많이 쓴다.
Ex)채팅 메시지들은 class임
즉 고유한 element를 사용할 때 id를 적용 하고 여러 번 쓰이는거에 class를 적용한다.
복습
1.Header는 보이지 않는 부분이다 , Body는 보이는 부분이다.
2.태그의 예시 à <강아지 성별 = “암컷”>강아지</강아지>
3.Meta 태그 = 브라우저에 전달하는 추가정보이다. 이 부분은 header에 속한다 왜냐면 브라우저를 위한 정보이기 때문이다.
4.Semantic과 non-semantic의 차이점은 Div와 article 태그의 차이로 볼 수 있다. div는 의미가 없다. Article인 경우 이게 article인 줄 알려준다.
5.우리의 북극성이 되줄 semantic 태그이다.
6.ID와 Class = 각 element에게 명칭을 내리는 작업
7.ID = 고유 1개에서만 쓰임 Class = 고유x 여러곳에서 쓰임