HTML5 태그 CSS 선택자

태그이름	설명
header	문서의 헤더 부분의 구조를 나타내는 태그
nav	문서의 네비게이션 구조를 나타내는 태그
figure	문서의 멀티미디어 요소를 나타내는 태그
section	특정 콘텐츠들을 그룹화시켜주는 태그
article	작은 의미 단위의 콘텐츠를 나타내는 태그
footer	문서의 푸터 부분의 구조를 나타내는 태그
aside	문서의 사이트 콘텐츠 즉 본문과의 다른 콘텐츠를 나타내는 태그

---

<video> 태그

<video autoplay controls>

<source src="동영상 파일 경로" type="동영상 파일 타입" />

</video>

▶ 현재 모든 브라우저 에서 지원되는 동영상 파일은 mp4

    mp4 파일 형식중 인코딩은 H.264 + ACC 형식이어야 한다.

    type = "video/mp4"

    다른 타입 : mp4, webm, ogg

---

nth-child()

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

태그명:nth-child(순서값) { css }  

ul li { font-size:20px; font-weight:bold; }

ul li:nth-child(1) {color:red;}

ul li:nth-child(2) {coloe:yellow;}

.

---

text-shadow, box-shadow

글자와 박스에 그림자 생성하기

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

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

---

border-radius

사각형의 모서리를 둥글게하기

border-radius:왼쪽위 오른쪽위 오른쪽아래 왼쪽아래

div {width:300px; height:300px; border-radius:150px;}

위와같이 하면 정사각형모양에서 정원으로 표시할 수 있음

---

gradient

배경에 그라디언트 색상과 모양 지정하기

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

그라디언트 색상의 개수는 원하는 만큼 추가 가능

그리디언트 모양은 선형과 원형이 있음

div {width:200px; height:200px; margin:50px; float:left;}

div:nth-child(1) {background:linear-gradient(to right, blue, red);}

div:nth-child(2) {background:linear-gradient(to bottom, blue, red);}

div:nth-child(3) {background:linear-gradient(45deg, blue, red);}

div:nth-child(1) {background:radial-gradient(blue, red);}