DAY 84. CSS - 색상, 배경, 애니메이션 스타일

 

04. 색상/배경 스타일

색상 스타일

 

배경 스타일

background-clip

배경 크기 조절

 

background-position

배경 이미지 위치를 조정하는 속성이다.

• 수평 위치
• 수직 위치

 

background-attachment

• scroll : default, 배경 이미지가 움직이게 설정한다.
• fixed : 화면이 스크롤 되더라도 배경 이미지는 움직이지 않게 설정한다.

 

background

배경 이미지 한 번에 설정하는 속성

선택자{background: image값 repeat값 attachment값 position값 clip값 origin값 size값;}

 

 

---

 

애니메이션

✔️ 변형

단순히 요소가 페이지에 출력만 되는 것이 아니라 사용자의 동작에 따라 크기가 바뀌고 요소가 이동, 회전하는 것

✔️ 애니메이션

변형을 부드럽게 연결하는 것

 

 

- 2차원 변형(왼쪽)

요소가 변형할 때 수직, 수평으로 이동하는 것으로 X축과 Y축으로 나누어 페이지 내에서 이동하는 것이다.

- 3차원 변형(오른쪽)

요소가 변형할 때 수직, 수평으로 이동하는 것 뿐 아니라 X축과 Y축 + Z축이 추가되어 화면 상에서 앞, 뒤로 이동하는 것이 추가되었다.

 

 

transform 속성

페이지에서 요소들을 변형 시키려면 tranform 속성과 변형 함수를 이용한다.

변형 함수는 2차원 함수와 2차원 함수를 구분한다.

** 이전 브라우저 호환을 위해 접두사를 이용한 함수를 호출한다.

선택자{-접두사-transform: 변형함수; transform: 변형함수;}

 

2차원 변형 함수

 

 

3차원 변형 함수

 

 

 

translate

요소를 페이지의 일정 좌표로 이동하는 함수

 

scale

요소를 일정 페이지만큼 확대/축소 시키는 함수(1보다 작으면 축소, 크면 확대 | 음수는 상하 뒤집어지며 확대)

 

rotate

지정 각도만큼 요소를 시계 방향이나(양수) 혹은 반대 방향(음수)으로 회전하는 함수

skew

지정한 각도만큼 요소를 비틀어 변형하는 함수이다.

2차원 변형만 가능한 함수이다.

 

 

---

 

기타 변형 속성

transform-origin

기존 변형 기준 x,y,z 축이 아닌 특정 지점을 기준으로 변형할 수 있게 하는 속성 ( 좌표 값 혹은 좌우상하중앙)

 

perspective

화면에서 원근감을 갖게 하는 속성

다른 변형과 적용하려면 먼저 적용되어야 한다.

 

transform-style

여러 가지 변형을 동시에 하는 경우, 부모 요소에서 적용한 3D 변형을 하위 요소에 적용하는 속성이다.

 

backface-visibility

회전하여 뒷면이 보일 경우, 뒷면을 보이게 할 지 안 보이게 할 것인지 설정하는 속성

• hidden : 뒷면이 보이지 않게 설정
• visible : 뒷면이 보이게 설정

 

---

 

시맨틱 태그

페이지 구조를 특정 기능에 맞는 태그를 사용하여 구분한다.

페이지 구조를 쉽게 파악할 수 있고 정확한 정보를 검색할 수 있다.

검색 엔진에서 쉽게 문서 내용 검색이 가능하다.

어느 장치에서도 똑같이 문서를 해석할 수 있다.

사용하는데 유연하게 사용할 수 있다. 꼭 고정 위치가 아니라 문서 구조에 따라 각 위치에서 필요하면 각 태그를 사용할 수 있다.

 

 

<header></header>

특정 부분의 머리말로 주로 검색어(form), 메뉴(nav)를 넣음

필요에 따라서는 컨텐츠, footer 부분에서도 사용할 수 있다.

 

<nav></nav>

다른 사이트나 페이지로 이동하는 태그를 모아 놓은 태그(네비게이션)

특정 태그에 종속되지 않고 어느 곳에서나 사용이 가능하다.

주로 메뉴, footer 사이트 링크 모음에 자주 쓰인다.

 

<section></section>

웹 문서에서 컨텐츠가 들어가는 영역이다.

컨텐츠를 주제 별로 묶을 때 사용하고, <section> 태그 안에 <section> 태그를 넣을 수 있다.

<article> 안에 사용될 수도 있다.

블록 요소이다.

주제 별로 <article>을 묶어주는 요소이다.

 

<article></article>

웹 페이지 내용이 들어가는 영역이다.

실제 웹 상에 배포 되어 보여지는 내용이다.

이 태그 영역은 다른 곳으로 배포하거나 재사용이 가능하다.

 

<aside></aside>

사이드 바라고 불리며 본문 외의 기타 내용을 담고 있는 영역이다.

광고나 링크 모음, 보충 설명 등에 사용된다.

 

<footer></footer>

웹 페이지의 맨 아래쪽 위치하며 회사 소개, 저작권, 연락처(<address>태그) 의 등의 정보를 표시한다.

<header>, <section>, <article> 등 다른 레이아웃 사용이 가능하다.