2.5~2.11강
2. LEARNING HTML
2.5 More Tags and Head
html기본구조 & 태그
<!DOCTYPE html>: 브라우저에게 이파일이 HTML이라는것을 알려줌<html></html>: 이 태그들 사이에 있는 코드들이 html 코드이다.<head></head>: 페이지의 환경설정 ; 외부적으로 보이지 않음.<body></body>: 브라우저에 표시되는 콘텐츠들
▶️ HTML 코드를 잘못치더라도 웹사이트에는 문제가 없지만 CSS / JS 사용시 에러남.
2.6 Its All About the Head
head안의 태그들
link : 외부파일 연결
속성:
rel(relationship)
-rel="shortcut icon"파비콘 추가
-rel="stylesheet"CSS파일 연결
sizes: 크기 설정
href: 브라우저가 참조할 특정 경로 지정
meta : 부가적 정보를 제공 / self-closing tag
속성:
content: 검색시 사이트를 설명하는 description에 보여지는 내용
name: 메타 데이터의 이름
charset: utf-8을 사용하여 브라우저에서 언어가 깨지는 것을 방지.
og: 사이트의 링크를 공유할 때 나타나는 정보 설정
og 예시)
2.7 More Tags
HTML태그는 필요할때 구글링!
- 태그는 외울 필요 없이 필요할 때 구글검색
- 검색할때 'mdn' 붙이는걸 추천
mdn: 파이어폭스 브라우저 회사가 제공하는 web에 관한 정보들을 정리한 문서
▶️tip
cmd+d같은 텍스트들을 한번에 수정가능
2.8 Form Tags
form 태그
<form></form>태그를 만들어주고 form의 양식 태그 들을 넣어준다.- 가장중요한 태그는
input(self-closing)- type에따라 달라짐.
- 역시나 외울 필요없이 필요할때 MDN 참고.
2.9 More Tags and IDs
form의 태그_ label
- 요소의 라벨을 정의할 때 사용
for속성을 사용하여 다른요소과 결합한다.- 결합가능태그 : input / button / textarea / select / meter / output / progress 등등
- 결합하고자 하는 요소의 id값을 label의 for 속성과 똑같이 설정해야한다.
IDs
id란
- 고유식별자(unique identifier)
- body안에 어떤태그에든 넣을 수 있는 속성
- 태그당 하나의 id만 가질 수 있다.
- CSS에서 효과를 줄때, 특정 태그를 식별하기 위한 목적
2.10 Semantic HTML
코드를 보고 그 의미를 짐작할 수 있는 태그
1. header
- body의 영역에 사용하는 태그로, head와는 다른개념
- div와 같은 기능을 하지만 읽었을때 의미를 짐작 할 수 있으니 웹사이트 윗부분 코딩할때 div대신 사용하면 좋다.
2. main / footer
- body의 영역에 사용하는 태그
- div와 같은 기능을 하지만 읽었을때 의미를 짐작 할 수 있으니 본문 이나 꼬릿말부분을 코딩 할 때 적절히 사용.
non-semantic 태그들 (의미가 없는 태그)
div (division)
- 전반적으로 html문서에서 제일 많이 등장
- 태그들을 담아서 한번에 움직이는 박스의 개념
- block element 로 양옆에 위치할 수 없다.
span- 짧은 텍스트를 위한 태그
▶️코드는 다른사람들이 이해하기 쉽도록 Semantic tag를 이용하는것이 좋다
2.11 Recap
복습!
html /css /js의 기능을 이해하기
태그를 외우지 말고 매커니즘을 이해하기
중요한 태그 몇개는 기억하면 좋다.
코드는 모든사람들이 한눈에 이해할 수 있도록 Semantic tag를 사용
(Quiz) 🥳
매일 매일 기록하기