HTML와 CSS의 속성 중 사이트를 조금 더 매력적으로 만들어 주는 심화된 기능에 대해서 정리해 본다.

---

HTML

1. Semantic Tags

시맨틱이란 '의미가 통하는'이라는 뜻이며 시맨틱 태그는 웹 페이지의 구조를 태그만 보고도 쉽게 이해할 수 있도록 만들어진 것이다. 웹 페이지를 만들 때 시맨틱 태그를 사용하지 않아도 되지만, '편리성'과 '웹 접근성'의 측면에서 시맨틱 태그를 활용한 레이아웃은 유용하다.

• <header> : 특정 영역의 머리말
• <nav> : 동일한 사이트 안의 문서나 외부 사이트로 문서를 연결하는 링크 모음
• <section> : 본문 컨텐츠를 문맥상의 주제별로 묶음
• <article> : 독립적인 웹 컨텐츠 항목
• <aside> : 선택 요소로 본문 내용 외에 주변에 표시되는 기타내용
• <footer> : 제작 정보와 저작권 정보 표시
• <iframe> : 웹 문서 안에 다른 웹 문서를 가져와 표시
• <address> : 주로 <footer>안에 사용되는 사이트 제작자 정보, 연락처 정보

2. Multi Media

오디오나 비디오 등 멀티미디어를 플러그인 프로그램이나 플래시 프로그램 없이 브라우저에서 재생할 수 있도록 HTML태그로 직접 멀티미디어를 웹 문서 안에 포함 시켜 직접 재생할 수 있다. 다만 웹에서 지원되는 비디오/오디오 파일은 .mp4, .webm, .ogv, .mp3, .ogg 파일이 있다

object

웹 브라우저에서 직접 재생할 수 없는 자바 애플릿이나 PDF 파일, 플래시 무비 같은 외부 컨텐츠를 웹 문서 안에 포함시킬 때 사용한다.

<object data="경로" tpye="유형" name="이름" width="가로" height="세로"></object>

embed

웹 브라우저에서 직접 재생할 수 없는 외부 파일을 웹 문서 안에 포함시킬 때 사용하며 <object> 태그와 달리 닫는 태그가 없으며 <object> 태그를 지원하지 않는 이전 브라우저에서 사용한다.

<embed src="경로" type="유형 "width="가로" height="세로">

audio

배경음악이나 효과음 등 오디오를 삽입할 때 사용하는 태그로 다양한 속성들을 활용하여 플레이어에 다양한 효과를 줄 수 있다.

<audio src="경로" autoplay controls loop muted preload></audio>

video

비디오를 삽입하기 위한 태그로 <audio>와 같이 다양한 속성들의 활용이가능하다.

<video src="경로" autoplay controls loop muted preload></video>

source

사용자들의 브라우저 환경을 고려하여 동일한 비디오 파일을 여러 확장자 파일로 함께 삽입하기 위하여 사용하는 태그로 <video> 태그와 함께 사용한다.

<video controls autoplay> <!---- 비디오 컨트롤 표시 및 자동재생 ---->
  <source src="mp4파일 경로" type="미디어 유형 codecs='코덱'">
  <source src="webm파일 경로" type="미디어 유형 codecs='코덱'">
  <source src="ogg파일 경로" type="미디어 유형 codecs='코덱'">
</video>

---

CSS

1. Transform

단순히 웹 요소를 삽입하는 것이 아니라 변형 함수를 활용하여 '2차원', '3차원'으로 요소에 변형을 줄 수 있다.

Selector { transform: 변형함수; }

2D transform function

:: translate

• translate(tx, ty) : 지정한 크기만큼 x축, y축으로 이동
• translateX(tx) : 지정한 크기만큼 x축으로 이동
• translateY(ty) : 지정한 크기만큼 y축으로 이동

:: scale

• scale(sx, sy) : 지정한 크기만큼 x축, y축으로 확대/축소
• scaleX(sx) : 지정한 크기만큼 x축으로 확대/축소
• scaleY(sy) : 지정한 크기만큼 y축으로 확대/축소

:: rotate

• rotate(degree) : 지정한 각도만큼 회전

:: skew

• skew(ax, ay) : 지정한 각도만큼 x축, y축으로 왜곡
• skewX(ax) : 지정한 각도만큼 x축으로 왜곡
• skewY(ay) : 지정한 각도만큼 y축으로 왜곡

3D transform function

:: translate

• translate3d(tx, ty, tz) : 지정한 크기만큼 x축, y축, z축으로 이동
• translateZ(tz) : 지정한 크기만큼 z축으로 이동

:: scale

• scale3d(sx, sy, sz) : 지정한 크기만큼 x축, y축, z축으로 확대/축소
• scaleZ(sz) : 지정한 크기만큼 z축으로 확대/축소

:: rotate

• rotate3d(rx, ry, rz degree) : 지정한 각도만큼 회전
• rotateX(degree) : 지정한 각도만큼 x축으로 회전
• rotateY(degree) : 지정한 각도만큼 y축으로 회전
• rotateZ(degree) : 지정한 각도만큼 z축으로 회전

:: matrix

• matrix3d(n[,n]) : 4x4 행렬을 이용해 이동과 확대/축소, 회전 등을 지정

:: perspective

• perspective(length) : 입체적으로 보일 수 있는 깊이 값 지정

2. Transform Attributes

transform-origin

2차원, 3차원 변형의 기준이 되는 변경 기준점을 지정한다.

transform-origin: (x축) (y축) (z축) / initial / inherit;

(x축): 원점 기준으로 길이값, 백분율, left, right, center를 좌푯값으로 사용
(y축): 원점 기준으로 길이값, 백분율 top, bottom, center를 좌푯값으로 사용
(z축): 원점 기준으로 좌푯값으로 길이값만 사용 

perspective-origin

3차원 변형의 perspective 속성을 사용하여 요소에 원근감을 줄 때 사용하여 요소의 아랫부분 위치를 지정하여 원근을 높은 곳에서 조절하는 것을 표현 할 수 있다.

perspective-origin: (x축 값) / (y축 값)

(x축 값): 웹 요소가 x축 어디에 있는지 지정. 길이, 백분율, left, right, center 값을 사용
(y축 값): 웹 요소가 y축 어디에 있는지 지정. 길이, 백분율, top, bottom. center 값을 사용 

transform-style

여러 가지 변형을 동시에 적용할 때 사용하여 부모 요소에 적용한 3D 변형을 하위 요소에 적용할 수 있다.

transform-style: flat / preserve-3d

3. Transition

웹 요소의 스타일 속성이 바뀌는 것으로 변형 대상, 진행 시간, 속도 곡선, 지연 시간의 속성을 설정하여 변화를 줄 수 있다.

transition-property

트랜지션을 적용할 속성을 지정한다

transition-property: all / none / (속성이름1, 속성이름2, 속성이름3)

transition-duration

트랜지션 진행 시간을 초 또는 밀리초로 지정한다.

transition-duration: (시간1, 시간2, 시간3)

transition-timing-function

트랜지션에서 시작과 중간, 끝지점의 진행 속도를 지정한다.

transition-timing-function: linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier(n,n,n,n)

transition-delay

트랜지션을 시작하기 전 대기하는 시간을 초와 밀리초로 지정한다.

transition-delay: (시간)

*transition 속성 효율적으로 표기하기(순서 중요!)

transition: (property) (duration) (timing-function) (delay)

4. Animation

자바 스크립트나 플래시 사용 없이, 트랜지션보다 쉽게 웹 요소에 변화를 줄 수 있다. 트랜지션과 비교하여 시작 스타일과 끝 스타일을 지정하면 CSS에서 중간 스타일을 자동으로 추가해 자연스러운 효과를 만들어 내는 것이 비슷하지만, 애니메이션은 시작해 끝내는 동안 원하는 곳 어디서든 스타일을 바꿀 수 있다는 점에서 트랜지션과 다르다.

@keyframes

애니메이션의 시작과 끝, 중간 지점에 상태가 바뀌는 지점을 설정한다. 시작은 form(0%), 끝은 to(100%)로 설정하고 중간 지점은 백분율로 지정하여 키프레임을 추가하여 사용한다.

@keyframes (animation-name) {
 form {(style)}
 지점(%) {(style)}
 to {(style)}
 }

animation-name

키프레임 속성을 이용해 여러 개의 애니메이션을 정의할 수 있는데 이 때, animation-name으로 구분한다.

animation-name: (키프레임 이름) / none

animation-duration

애니메이션 진행 시간을 초 또는 밀리초로 지정한다. 기본값이 0이므로 반드시 지정해야 한다.

transition-duration: (시간)

animation-direction

애니메이션이 한 번 실행되고 난 후에 원래 위치고 돌아갈지, 실행해왔던 방향으로 되돌아가며 애니메이션을 실행할지 지정한다.

animation-direction: normal / alternate

animation-iteration-count

기본적으로 애니메이션은 한 번 실행이지만 반복적으로 실행할지 여부를 지정한다.

animation-iteration-count: (숫자) / infinite

animation-timing-function

애니메이션에서 시작과 중간, 끝지점의 진행 속도를 지정한다.

transition-timing-function: linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier(n,n,n,n)

*transition 속성 효율적으로 표기하기:
순서가 중요하지 않지만 시간 값이 2개라면 첫 번째는 duration, 두 번째는 delay 속성으로 인식한다.

animation: (name) (duration) (timing-function) (delay) (iteration-count) (direction)