HTML5의 시멘틱태그, 그 외 태그들

HTML5란?

HTML5는 HTML의 다음버전으로 HTML4를 업그레이드한 것이다.  
HTML5는 특정 플러그인에 의존하지 않고 콘텐츠를 제공하는 것을 목표로 둔다.         

HTML5에선 개발자가 자주쓰는 표현들을 태그로 만들어주었는데 이 태그들은

HTML의 구조를 보다 논리적으로 만들어준다.

물론 windows7같이 옛날 브라우저에는 작동하지않는다.

이제 전처럼 섹션을 일일히 div태그로 나눠줄 필요가 없어진 것.! 보다 편리해졌다.

---

시맨틱웹태그(semantic)

<header>: 문서의 헤더 부분의 구조를 나타내는 태그

<nav>: 문서의 네비게이션 구조를 나타내는 태그

<figure>: 문서의 멀티미디어 요소를 나타내는 태그

<section>: 특정 컨텐츠를 그룹화 시켜주는 태그 

<aside>:문서의 사이드 컨텐츠, 즉 본문과는 다른 서브 컨텐츠를 나타내는 태그

<footer>: 문서의 푸터 부분의 구조를 나타내는 태그 

보통 이 태그들이 제일 많이 쓰이기 때문에 이정도만 알아둔다.

---

<video>태그

-외부 플러그인 없이 순수 웹 표준 기술만으로 동영상 컨텐츠를 삽입가능하다,

<video>
<source src = "동영상 파일 경로" type="동영상 파일 타입(mp4, wav 등등)"> 
</video>

src 와 type 속성은 명시적으로 필수.

<video>태그 속성

-src : 비디오 파일의 경로지정

-poster: 비디오 준비 중일 때 표시할 이미지의 파일 경로지정(유튜브로 보면 섬네일을 일컫는다)

-preload: 비디오를 재생하기 전에 데이터를 모두 불러올지 여부 지정

-autoplay: 비디오의 자동 재생 여부 지정

-loop: 비디오의 반복 재생 여부 지정

-controls: 비디오 재생 도구의 출력 여부 지정

-width : 비디오의 너비 지정

-height: 비디오의 높이 지정

/audio: 잘 쓰일 일은 없어서 패스/

---

nth-child()

-원하는 순서 값에 해당하는 태그를 선택하는 CSS 선택자

-태그명(요소명): nth-child(순서값) { CSS 속성: 값;}

---

text-shadow, box-shadow

-글자와 박스에 그림자를 생성하는 속성

text-shadow: 가로축거리 세로축거리 퍼짐도 색상;

box-shadow: 가로축거리 세로축거리 퍼짐도 색상;

(가축거리가 양수면 오른쪽 음수면 왼쪽 세로축거리가 양수면 아래쪽 음수면 위쪽/ 웹 기본 셋팅이 빛을 왼쪽에서 비추는 거라고 생각하면됨/색상은 단일색상 또는 그라데이션도 가능하다.)

퍼짐도는 음수값이없다.

 

---

border-radius

-사각형의 모서리를 둥글게 만드는 속성

-border-radiuls: 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래;

시계방향

---

gradient 속성

-배경에 그라디언트 색상과 모양을 지정해주는 속성

-background: 그라디언트 모양(방향, 색상1,,,색상n)

-그라디언트 색상의 개수는 원하는 만큼 추가할 수 있습니다.

-그라디언트의 모양에는 선형 그라디언트와 원형 그라디언트가 있습니다.

---

background-size

-배경이미지의 크기 조절하기

-background-size: 너비값 높이값;

-background-size:cover;

bockground-size:contain; (비율유지)

일반적으로 "풀 스크린" 환경에서의 배경 이미지사이즈는 background-size:cover;를 주로 사용합니다.

---

box-sizing

블록 요소 너비와 높이값 안에 padding과 border 값을 포함시킵니다.

box-sizing: border-box

이개념을 안순간이제 박스모델 계산할 필요가 없다!!!! 모두 박스사이징이 처리해주기 때문 

box-sizing:border-box 속성은 너비값과 높이값이 %단위 일 때, 패딩과 보더값을 고정 px로 설정해야 할 경우 특히 유용하다. 

반응형웹으로써 비율이 일정해야할 때 유용하단쏘리

---