<head>
▶ 보이지않는 태그들로 사이트 설정을 해준다.
▶ 브라우저에게 사이트가 어떻게 보이는지
- Meta 태그
- 부가적인 정보를 뜻하는 태그
- 아주 다양하게 존재한다.
: 브라우저에게 text를 어떻게 그려달라는지 말해줌.
----------------------------------------------------------------------------
- Html의 lang 속성
: 검색엔진들에 도움을 주기위해
우리 사이트에서 사용되는 언어가 무엇인지 알려준다.
- Link 태그
: 탭에 아이콘 이미지를 넣을수 있다.
!!! 구글에 검색할때 "mdn" 이라고 붙이면 모질라 화면으로 제공
→ html 태그는 엄청 많아서 다 외울 필요는 없다
- 모든 태그를 다 외울 필요없다.
- 태그를 작성하는 방법, 속성을 어떻게 찾는지 알고 그 속성을 어떻게 사용하는지 알면 괜찮다,
- Form
- Label : for
- Input : id
▶ 값이 같을 때 for 과 같은 값을 가진 id를 들고있는 input 작동시켜준다
☆ 중요!!
- ID
: 바디안에 어떤 태그에든 넣을수 있는 attribute 이다.
: 고유 식별자이기 때문에 요소당 하나의 아이디만 가질수 있다
: 전체 html 문서에서 id값은 고유해야한다.
: 스크립팅이나 css를 식별할려는 목적을 가짐
- 시멘틱 html (Semantic) : 의미가 있는 태그
: document 와 content 를 명확하게 묘사할수 있도록
- Header, main, footer 등등
- 보는 사람과 웹사이트로 바로 태그의 의미를 파악하기가 더 쉽다
- 사방팔방 div로 하기보단 명확하게 시멘틱 태그를 쓰는것도 좋은 방법이다
- Div는 단순 아무의미도 없는 박스 태그
※ 총정리!!!!
: html은 뼈대 - 브라우저가 이해할수 있는 언어
Css 는 근육
자바스크립트 : 뇌
코드만 보고 어떤 의미인지 파악하기 위해 시멘틱 태그를쓴다.
Attribute 값에는 항상 큰 따옴표를 사용한다
어떤 속성은 모든 태그가 사용 가능하고
일부 속성은 일부 태그에만 사용 가능하다
728x90
반응형
'프로그래밍 공부 > html,css' 카테고리의 다른 글
| [Css] - position (0) | 2021.10.31 |
|---|---|
| [Css] - FlexBox 정리 (0) | 2021.10.31 |
| [html,css] - display 속성, box 의 특징 (0) | 2021.10.29 |
| [Html, Css ] - html , Css는 무엇인가 ? (0) | 2021.10.22 |
| Flexbox와 Grid (0) | 2021.09.24 |
