다음주 부터 진행할 노마드 코더 챌린지를 위해서 미리 강의를 예습해 보고 있다.
하지만 돌아서면 잊어버리기 때문에 이렇게 블로그에 Today I learn 이력을 남겨놓는 것은 공부하는 입장에서 좋은 습관인 것 같다. 다만 아직 Velog 사용법이 익숙하지 않은데 뭐든 다 해보면서 적응해 가는 과정이라 생각하면 마음이 편하다.
( 경주마 처럼 앞서나갈 다른 사람들을 생각하면 편하지는 않겠지만..?!? )🤗
2-1. Introduction
2-2. What is HTML?
- Hypertext MarkUP Language (엄청나게 많은 태그로 이루어진 텍스트문서)
: 웹사이트에서 각 요소가 무엇을 뜻하는지 알려주는 언어이고 웹사이트의 요소들을 하이라이트하고 밑줄 그어 설명해주는 언어! ( 내용은 뭐고, 요소는 무엇인지 구별하게 해주는 거지~ )
2-3. Anatomy of a HTML tag
-
index.html 파일을 먼저 만들자
웹 서버들이 index.html 파일을 젤 먼저 찾도록 default 값으로 설계되어 있다.
태그는 어찌 생겨먹었나? < name attribute = " vaule " > Content < / name > 이래 생겼지!태그를 열고 닫기 때문에 태그 사이에 위치한 Content가 바로 태그가 명칭하는 것임을 알 수 있다.
-
예) anchor 태그 < a > 의 사용.
<a href="https://google.com">Go to google page</a> 링크를 누르면 같은 창에서 웹사이트가 이동된다.
다른 창에, 즉 새로운 창에서 이동을 하고 싶다면? <a href="https://google.com" target="_blank">Go to google page</a> 즉 "속성" 을 이용하여 html 코드를 작성하는 것임을 알려주고 싶은 것 같다.
2-4. Our first HTML document (처음은아니지롱 🥰😜)
<!DOCTYPE html>
이것은 구글크롬으로 하여금 이 문서가 html 문서임을 알려준다.
Self-contained tag 이다. 닫는태그가 없음. 혼자 스스로 열고 닫는 태그. 그 자체로 정보를 제공하기 때문에
<html lang="en">
<head> head 태그 내의 정보는 사용자에게 보이지 않음, 브라우저에게 내 웹사이트에 관한 필요한 정보를 제공한다.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body> 사용자들이 읽는 컨텐츠
<h1>아 배고프다.</h1>
</body>
</html>2-5. Adding meta information to our document
-
메타 태그가 대체 뭐시여? 일단 meta charset 부터 알아보자!
: html head tag 내 적용하는 엑스트라 정보이다.< meta charset = "UTF-8" > ..UTF_8 방식의 encoding 으로 해당문서를 작성할 것이라는 뜻.
만약 내가 arabic 또는 russian 사용하려 한다면 encoding 은 다른 방식으로 셋팅되어야 한다.즉, 이 코드는 브라우저에게 내가 작성하는 문서가 어떤 언어 (Character) 로 작성되었는지 알려준다.
-
meta name 설정하기
< meta name = "description" content = " welcome to my blog " >
< meta name = "author" content = " teddyJung " >이러한 메타 내용들은 웹페이지에서 보이지 않는다.
: 예시) 구글에 "orange" 라 검색하면 사이트들이 막 나오는데, 밑에 간략하게 나오는 설명글이 바로 meta 내용이다! 여러 메타 태그들이 있다. 어떤 태그는 트위터, 아이폰, 네이버, 페이스북 등 특정 플랫폼만을 위해서 존재한다.
-
head part, body part
: meta information 은 브라우저를 위한 정보이고, 유저를 위한 정보가 아니다. 그렇기 때문에 해당 내용을 head 파트에 작성한다.Information ----- head part
Contents ----- body part
2-6. Semantic VS Non-Semantic Tags
- Semantic : 시맨틱. 뜻, 의미가 있는 태그. ( h1, paragraph, textarea )
: < section > , < article > , < header > 와 같은 태그. - Non-Semantic : 뜻, 의미가 없는 아무 지칭하는 바가 없는 태그. ( div, span )
: div - 컨테이너, 박스와 같은 태그. div 안에 내용물을 넣는 것이다.
: span - 텍스트를 위한 컨테이너
2-7. Giving our tags a name (ID's and classes)
- div 디브가 엄청 많다. 이러면 각각의 div 가 뭘 뜻하는지 알려줄 필요가 있다. 왜? 아래를 보자.
<section>
<header>
<h1>Title of a section</h1>
</header>
</section>
**헤더가 두개 인데 구분할 방법이 없네?? 어떻게 할까?**
<div>
<header>Title of the unknown container</header>
</div>-
CSS 를 할 때, 이 헤더는 빨간색이고 아래 헤더는 파란색이라 명령을 내려야 할 수 있으므로 이름을 짓는것은 꽤나 중요하다.
그럼 이름을 짓는 두 가지 방법이란 뭘까?1) ID : 각 element 마다 ID는 한 개만 가질 수 있다. ID는 고유함. 여권번호처럼.
< header id = "headerNumberOne" class = " defaultHeader" >
2) Class : Class 는 반복될 수 있다. 여러 개 존재할 수 있다. 고유하지 않다. 동일한 속성이 있을 때마다 계속 쓸 수 있다.
< header id = "differentHeader" class = " defaultHeader" >
: 예를 들어, header 의 background-color: blue; 라 했을 때 1)과 2)의 헤더 모두 파란색일 것이다. 그 뜻은 2개 모두 같은 속성을 가지고 있다는 뜻이다.
하지만, 모두 같은 배경색을 가지고 있다 하더라도 하나는 사이즈가 크고 다른 나머지 하나는 사이즈가 작다고 할 수도 있다.
즉, 2개의 헤더 모두 같은 (동일한 속성을 공유하는) class를 갖고 있지만, 각기 다른 ID 를 갖고 있다.
html, css 에서는 주로 class 를 많이 사용한다. 왜냐하면 웹사이트 상에서 아예 고유한 element 는 많이 없다. 일례로 채팅창은 계속 반복된다. 채팅 메시지들도 계속 반복되니까 class 를 사용할 것이다. 그러나 헤더에 고정되어 있는 요소 (아이콘 등) 는 ID 선택자를 사용할 것이다.
그리고 ID는 자바스크립트 적용할 때 사용할 줄로 알고 있다.
