220216 - html

1. Document metadata - head 내부에 들어가는 주요 요소들

### Meta 요소 - 해당 문서 혹은 애플리케이션의 메타데이터를 담는 요소

1. Charset - 문자 인코딩을 어떻게 할 것인지 결정

- Utf-8 : 전세계 언어 대부분을 지원

- euc-kr : 한국어와 영문을 지원

2. Viewport - 모바일 브라우저에서 화면을 어떻게 노출시킬 지

- 뷰포트가 없으면 모바일 브라우저에서 화면 렌더링이 이상하게 동작함

3. Seo 에 도움을 주는 메타데이터

- description : 사이트에 대한 정보 // <meta name=description content=설명설명> description 이 없으면 웹페이지의 body 요소의 첫번째 의미있는 요소를 긁어가진다.

4. 소셜메타데이터

// open graph protocol : 페이스북에서 개발한 것으로 페북에서 콘텐츠를 긁어갈때 노출할 요소를 결정. 
<meta property:og:title content=metadata element> 
<meta property:og:description content=설명설명> 
<meta property:og:url content=[https://naver.com](https://naver.com)\> 
<meta property:og:image content=로고 등 노출할 이미지> 

// twitter card : 트위터 카드, 트위터에서 개발
<meta property:twitter:card content=summary>
<meta property:twitter:site content=@twitter\_username>
<meta property:twitter:title content=metadata element>
<meta property:twitter:description content=설명설명>
<meta property:twitter:image content=로고 등 노출할 이미지> 

### title 요소 - 해당 애플리케이션의 제목, 반드시 작성한다.

### link 요소 - 외부 문서 혹은 외부 콘텐츠와 이 콘텐츠를 연결해주는 요소

- link rel=stylesheet href=./style.css

- link 요소를 사용해서 외부콘텐츠를 불러오는 것은 http request 를 일으킨다. 하나라도 많은 http request 는 성능 저하를 일으킬 여지가 있다.

### style 요소 - 페이지 내에서 사용하는 css 를 정의하는 요소,

- style 요소 내부에 렌더링에 꼭 필요한 스타일만 담아두면 성능 개선에 좋다.

2. Section

### Body 요소 - 콘텐츠를 담는 html 요소

- body 요소 내부가 콘텐츠 대부분을 차지하니 용량이나 시멘틱에 유의한다.

heading 요소 - 제목요소

- h1 ~ h6

- heading 요소를 사용하면 제목을 포함하는 익명 영역(anonymous section) 이 생긴다.

- heading 요소를 잘 활용하면 페이지 전체의 아웃라인을 그리는데 용이하다

### section, article 요소

- 콘텐츠의 독립성에 따라 section, article 을 사용한다.

- section, article 요소 내에서는 heading 사용을 권장한다.

- section : 콘텐츠가 다른 콘텐츠와 연관이 있을 때 사용

- article : 아티클 요소만 떼어다 다른 페이지에 붙여도 어색함이 없는 내용이라면 아티클 태그를 사용한다. 콘텐츠가 독립적일 때 사용

### header, hgroup 요소

- header : 특정 콘텐츠의 시작부분을 나타내는 요소

- hgroup : heading 요소를 그룹화 하여 제목-부제목 관계를 만드는 요소

<hgroup>
    <h1>title</h1>
    <h2>sub title</h2> // 부제목이 된다
</hgroup>

### footer, address 요소

- footer : 콘텐츠의 마무리, 카피라이트, 출처, 작성자 정보, 작성일 등

- address : contact information 으로 작성자와 contact 할 수 있는 정보를 입력

- publication information 은 address 바깥쪽에 작성하여야한다.

### nav 요소 - 페이지 네비게이션 콘텐츠를 담는 요소

### aside 요소 - 핵심 콘텐츠와 관련이 있기는 하나 콘텐츠 전체의 흐름과는 크게 관련 없는 콘텐츠. 콘텐츠 추천이나 광고 영역에 많이 사용됨

3. Grouping - grouping 목적의 요소들

### p 요소 - 문장작성, p 요소 내부에 p 요소를 넣을 수는 없다.

### block quote 요소 - 블록단위 인용문

<blockquote>
    <p>블라블라</p>
    <cite>출처</cite>
</blockquote>

### ol,ul,menu,li

- ol, ul : 순서있는 목록 / 순서없는 목록

- li: list item, ol, li 의 자식요소로는 li 만 사용 가능

- menu : firefox 에서만 지원. 버튼 여러개를 가지고 있는 목록. Navigation 의 menu 와는 다르다. 기능적인 버튼 영역을 그룹짓는 요소.

<menu>
    <li><button>확인
    <li><button>취소
</menu>

### dl, dt, dd 요소

- dl : definition list, dl 요소 내에서 특정 요소들을 그룹해야하는 경우에 한하여 div 요소를 활용할 수 있다.

- dt: 정의 대상

- dd : 정의 설명

- dt 와 dd 는 하나의 세트로 작성

<dl>
    <div> // 그룹을 위해 div 작성이 가능.
        <dt>마늘
        <dd>맵다
        <dd>한국인이 좋아함
    <div>
    <dt>상추
    <dd>고기먹을때

### figure, figcaption

- figure : 콘텐츠의 부연설명을 하는 콘텐츠를 담을 때 사용, 이미지나 비디오, 오디오를 사용할 수 있다.

- figcation : 콘텐츠의 부연설명을 하는 콘텐츠를 작성하는 요소

<p>우주에 관한 내용
<figure>
<audio>
<video>
<img src=a.jpg alt=nasa>
<figcation>nasa 는 우주연구기관

### main 요소 - 해당 애플리케이션이나 페이지에서 가장 중요한 콘텐츠를 담는 컨테이너, 한 페이지 내에서 한번만 사용 가능하다. 단, hidden 속성을 활용하여 main 요소를 감춘 경우에는 여러번 사용 가능하다. 활성화 되어있는 main 은 단 하나만 존재해야한다.

<main> 활성화
<main hidden> 비 활성화
<main hidden> 비 활성화

### div 요소 - 의미없이 css 를 활용할 목적으로 여러 요소를 그루핑할때 사용

 

---

 

초보자를 위한 HTML 강의 정리

 

https://inf.run/drB2

초보자를 위한 HTML 기초 - 인프런 | 강의