브라우저
- 렌더링을 수행하는 지에 대해 아는 것이 굉장히 중요
- 코드는 브라우저라는 소프트웨어 프로그램 상에서 수행되기 때문
웹(Web)
- 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공
- HTML 언어를 사용하여 작성된 문서 형태로 제공이 되며, 이러한 문서들을 웹 페이지(Web Page)
- 웹 페이지 중 서로 관련된 내용으로 작성된 웹 페이지들의 집합을 웹 사이트(Web Site)
웹 브라우저(Web Browser) 종류
- 모자익(Mosaic), 넷스케이프(Netscape), 크롬(Chrome) 브라우저
브라우저의 특징과 웹의 동작 원리
- 브라우저는 현존하는 브라우저끼리 조금씩 그 특징이 다르지만 공통점이 하나 있습니다. 그것은 바로 동작 방식
- 먼저, 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력
- DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색
- 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달
- 웹 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메세지를 생성해 TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 컴퓨터로 전송
- 요청 메세지는 다시 HTTP 프로토콜을 통해 웹 페이지 URL 정보로 변환
- 웹 서버는 이 변환이 된 정보에 해당하는 데이터를 검색하여 찾아낸 뒤 HTTP 프로토콜을 통해 HTTP 응답 메세지를 생성
- 메세지는 다시 TCP 프로토콜을 이용해 인터넷을 거쳐 사용자의 컴퓨터로 전송
- 사용자의 컴퓨터에 도착한 HTTP 응답 메세지는 HTTP 프로토콜을 사용해 웹 페이지 데이터로 변환
- 변환된 데이터는 웹 브라우저 상에 출력되어 사용자가 볼 수 있게 됩니다.
브라우저의 구조
사용자 인터페이스(User Interface)
- UI이라고도 부르며, 가장 유저와 밀접하게 맞닿아있는 부분
브라우저 엔진(Browser Engine)
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
- 브라우저 엔진의 주된 역할은 HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현
이름 설명 게코(Gecko) 모질라 재단에서 만든 브라우저 엔진.
파이어폭스가 해당 엔진을 탑재하고 있는 유명한 웹 브라우저입니다.웹킷(Webkit) KHTML에서 파생된 브라우저 엔진.
사파리가 해당 엔진을 탑재하고 있는 가장 유명한 웹 브라우저입니다.블링크(Blink) 웹킷(Webkit)에서 파생된 브라우저 엔진.
크롬, 오페라가 해당 엔진을 탑재하고 있는 유명한 웹 브라우저입니다.트라이던트(Trident) 마이크로소프트의 브라우저 엔진.
인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩 등이 이를 탑재하고 있습니다.엣지HTML(EdgeHTML) 트라이던트(Trident)에서 파생된 브라우저 엔진.
마이크로소프트 엣지 스파르탄 버전(~2019)까지 탑재되었습니다. (현재는 블링크로 교체.)렌더링 엔진(Rendering Engine)
- 요청한 콘텐츠를 화면에 출력하는 역할
- HTML, CSS 등을 파싱해 최종적으로 화면에 그려주며, 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있습니다. (물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있습니다.)
통신(Networking)
- HTTP 요청과 같은 네트워크 호출에
자바스크립트 해석기(JavaScript Interpreter)
- 현대의 웹 페이지는 이제 JavaScript와 떼려고 해도 뗄 수 없게 되었습니다. 그 이유는 대부분의 웹 인터랙션(Interaction)에 JavaScript가 사용 되기 때문
이름 설명 Rhino 모질라 재단이 운영하는 오픈소스 엔진으로, 자바(Java)로 개발되었다는 특징이 있습니다. SpiderMonkey 최초의 Javascript 엔진으로 넷스케이프 내비게이터를 지원하였으며, 현재는 파이어폭스를 지원하고 있습니다. V8 구글이 개발한 오픈 소스 엔진으로 구글 크롬의 Javascript 엔진입니다. JavascriptCore 애플에서 개발하였으며 처음에 WebKit 프레임워크를 위해 개발되었지만 현재는 사파리와 React Native App를 지원하고 있습니다. Chakra 마이크로소프트가 개발한 엔진이며, Edge 브라우저를 지원하고 있습니다. 힙 메모리(Heap Memory)
- 힙(heap)은 동적 메모리 할당에 사용되는 자료구조
- 가비지 컬렉션 또한 발생하는 곳
콜 스택(Call Stack)
- 콜 스택은 프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조
- 만약 함수를 실행한다면, 해당 함수는 콜 스택의 가장 상단에 위치합니다. 이는 스택이 후입선출(LIFO)이라는 구조를 가지고 있기 때문에 일어나는 일
스택 오버플로(Stack Overflow)
- 콜 스택 내부의 동일한 스택 프레임이 예상치 못한 수로 쌓일 때 일어납니다.
스택 추적(Stack trace)
- 해당 에러 로그를 자세히 살펴본다면 어디서 에러가 발생하고 있고, 에러의 결과가 무엇인지 아는 데에 매우 도움
UI 백엔드
- 명령어 라인 인터페이스(Command Line Interface, CLI)이며 또 하나는 일괄 처리 인터페이스(Batch Interface)
- 대규모의 시스템에서 대량의 데이터를 처리하는 데에 자주 사용되는 인터페이스
- 그래픽 사용자 인터페이스 (Graphic User Interface, GUI)
자료 저장소
- 영구적인 저장소인 로컬스토리지(localStorage)와 임시적인 저장소인 세션스토리지(sesseionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능
웹 스토리지(Web Storage) 특징
- 웹 스토리지는 웹 브라우저가 직접 데이터를 저장
- 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있게 해준다.
- 모든 정보는 절대 서버로 전송되지 않으므로 저장된 데이터가 클라이언트에만 존재하기 때문에 네트워크 트래픽 비용 또한 줄여준다는 특징
- 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재
- 오리진(origin)은 도메인(domain)과 프로토콜(protocol) 한 쌍으로 이루어진 식별자로, 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터를 저장하기 때문에 같은 데이터에 접근할 수 있게 됩니다.웹 스토리지 종류
로컬스토리지(localStorage)
- 로컬스토리지 객체는 보관 기한이 없는 데이터를 저장
- 브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 이 저장소에 저장된 데이터는 사라지지 않습니다.
- Windows 전역 객체의 localStorage라는 컬렉션을 통해 저장과 조회가 가능
- 도메인 마다 별도의 localStorage가 생성
- 도메인만 같으면 전역으로 데이터의 공유가 가능
세션스토리지(sessionStorage)
- 세션스토리지 객체는 하나의 세션만을 위한 데이터를 저장
- 데이터를 지속적으로 보관하지 않고 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지되기 때문에, 사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장된 데이터는 사라집니다.
- 브라우징이란 브라우저 프로그램을 실행해서 인터넷에 들어가 필요한 정보를 찾는 행위를 말하며, 브라우저 컨텍스트란 브라우저가 문서를 표시하는 환경
- 각 브라우징 컨텍스트는 특정 출처 및 활성화되고 있는 문서의 출처, 표시했던 모든 문서의 방문기록을 가지고 있습니다.
- 브라우저 컨텍스트가 다르면 서로 다른 영역이 된다는 특징
- 즉, 브라우저 두 개를 실행해 같은 페이지를 열었을 때, 브라우저의 컨텍스트가 서로 다르므로 이 두 페이지의 sessionStorage는 각 별개의 영역으로 인지되어 서로 데이터의 공유가 불가능웹 스토리지를 활용한 대표적인 기능
- 블로그 글을 작성하다가 사용자가 창을 벗어난 경우 관련 작성 내용을 복구하거나 백업해주는 기능
- 사용자가 입력 form을 통해 정보를 입력하다 페이지에서 벗어난 경우 복구 및 백업해주는 기능
- 현재 읽은 글의 히스토리 저장(카운팅, 혹은 읽은 글 표시 등으로 활용)
브라우저 렌더링
- HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미
브라우저 렌더링 과정
1. 사용자가 브라우저를 통해 웹 사이트에 접속합니다.
2. 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운 받습니다.
3. 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리를 만듭니다.
4. 이어서 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM(CSS Object Model, CSS 객체 모델) 트리를 만듭니다.
5. 만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축합니다.
6. 레이아웃 과정을 통해 각 요소를 어디에 배치할 지 결정합니다.
7. 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작합니다. 이 과정을 paint라고 합니다.
8. 이제부터 렌더링 과정에 쓰이는 개념들을 알아보도록 하겠습니다.파싱(Parsing)
- 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계
- 파싱을 파서(parser)가 진행하며, 일종의 인터프리터나 컴파일러 구성 요소 가운데 하나이다.
- 파서는 HTML 파일의 코드를 문법적 의미를 갖는 최소 단위인 토큰(token)으로 한 번 분해하고, 이 토큰들을 문법적 의미와 구조에 따라 노드(node)라는 요소로 바꿉니다.- 문서 파싱(document parsing)은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미
- 브라우저는 HTML 문서를 받아들자마자 DOM 트리로 파싱
- HTML 토큰이 만들어지는데, 이 토큰에는 시작 태그와 마침 태그가 포함되고, 속성 이름과 값도 포함
- 토큰으로 변한 입력 값은 파서에 의해 노드가 되고, 최종적으로 트리 구조의 DOM으로 구성
- 브라우저는 HTML 문서를 파싱하면서 CSS스타일을 만날 경우 텍스트를 CSS 스타일링 레이아웃과 페인팅에 사용하는 데이터 구조인 CSSOM 트리로 파싱하고, 태그를 만날 경우 렌더링을 차단하면서 HTML 파싱 또한 중단
- script 파일을 다운 받아 파싱하고 실행시킨 뒤 다시 HTML 파일을 파싱하기 시작
예시
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="code.css"> <title>코드스테이츠</title> </head> <body> <h1>Section4</h1> <p>Unit1은 <span>HTML</span>과 <span>CSS</span> 심화다.</p> <section>어렵지 않아요!</section> </body> </html>DOM Tree
- JavaScript 언어만 알아듣기 때문에 HTML의 태그나 속성들을 이해하지 못합니다. 또한 응답으로 받아온 HTML 문서는 텍스트로만 이뤄져 있습니다. 그래서 이해할 수 있는 형태인 객체로 바꿔준 것이 바로 DOM 트리
CSSOM Tree
- CSS는 부모의 속성을 자식이 상속 받는다는 점
렌더 트리(Render Tree)
- DOM 트리와 CSSOM 트리는 브라우저 위에 웹사이트를 표시하기 위해서는 이 둘을 합치는 작업이 반드시 필요
- 렌더링은 사용자에게 브라우저가 보여주고자 하는 화면을 그리는 과정이므로, 보이지 않을 요소들은 이 트리에 포함시키지 않습니다.
레이아웃
- 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기 등)을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정
- 각 요소들이 전체 화면에서 어디에, 어떤 크기로, 어떻게 배치가 되어야 하는지 파악하기 위해 렌더트리를 위에서 아래로 읽어 내려갑니다.
- 모든 값은 절대적인 단위인 px 값으로 변환
페인팅
- 픽셀에 대한 정보들을 바탕으로 픽셀을 채워나가는 과정
- 이 과정까지 해내야 텍스트에 불과했던 HTML 파일의 내용들이 이미지화된 모습으로 브라우저 화면에 띄워지는 것
리플로우(Reflow)와 리페인트(Repaint)
- 화면에 나타나는 모습을 바꾸기 위해서는 모든 요소의 위치와 크기를 다시 계산하고, 다시 그려 보여주어야 합니다.
이런 식으로 어떤 웹 인터랙션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우
페인트 과정을 반복해 수행하는 것을 리페인트리플로우와 리페인트의 최적화
- 사용자의 눈에 일련의 과정이 부드럽게 처리 되려면 초당 60 프레임은 반드시 유지시켜야 합니다.
- 리플로우 하는 과정은 렌더링을 다시 하는 것이기 때문에 배치를 위한 연산을 해야 해 실제로 CPU를 많이 차지하고
리페인트는 페인트를 다시 하는 것이라 픽셀을 다시 화면에 찍어 그려야 하기 때문에 GPU를 많이 차지1. 불필요한 레이아웃을 줄입니다.
- 레이아웃 과정에서 불필요하게 계산해야 할 것이 많아지면 엔진도 결국 컴퓨팅 파워에 기대기 때문에 과부하가 불가피하게 생기게 됩니다.
- 불필요한 레이아웃 하나만 줄여도 렌더링 퍼포먼스를 최적화할 수 있습니다.
2. CSS에서 레이아웃, 페인트를 발생시키는 속성들
- 리플로우가 일어나는 대표적인 속성
position width height reft top right bottom margin padding border border-width clear display float font-family font-size font-weight line-height min-height overflow text-align vertical-align ... - 리페인트가 일어나는 대표적인 속성
background background-image background-position background-repeat background-size border-radius border-style box-shadow color line-style outline clear display float font-family font-size font-weight outline-color visibility ... 3. 영향을 주는 노드를 줄입니다.
반응형 웹
반응형 웹의 탄생 배경
- 과거의 웹사이트들은 데스크탑 컴퓨터를 통해서 이용하는 경우가 대부분이다.
- 현재는 전자기기들의 화면의 크기가 다양한 탓에 여러가지 버전의 웹페이지를 만들어야 하는 경우가 발생 / 불편함을 해결하기 위해 반응형 웹페이지가 탄생
반응형 웹이란
- 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미
- 나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론, 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정
- 반응형 웹에서 빼놓을 수 없는 개념은 모바일 퍼스트라는 개념
- 모바일 퍼스트(mobile first)란 (Luke Wroblewski)가 최초로 주장한 철학이자 전략이며, 사용자 경험(UX)을 디자인할 때 모바일일 경우에 최우선으로 초점을 맞춰 디자인하는 것- 현재 보다 효율적으로 PC부터 아이패드, 태블릿PC, 스마트폰까지 총망라하는 반응형웹을 구조하는 기술력이 주목
반응형 웹의 특징
- 반응형 웹은 위의 예시처럼 하나의 URL을 기반으로 화면이 바뀝니다.
- 반응형 웹 디자인은 유연한 레이아웃에 대응하여 항상 최적의 화면을 제공함으로써 다양한 스크린 사이즈를 지닌 디바이스에 적응할 수 있습니다.
- 도메인 앞에 모바일을 의미하는 “m”을 붙임으로써 구분
- 특정 장치에 연결이 되는 별도의 URL과 화면이 구비된 웹 사이트의 경우, 데스크탑 버전의 웹 사이트를 띄운 브라우저를 줄였을 때 반응하지 않는다는 특징
장점, 효율적인 유지보수
- 하나의 콘텐츠에 오직 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 모든 스크린 사이즈에 맞춰 컨텐츠가 최적화되기 때문에 유지보수가 효율적
- 하나의 소스 코드로 관리가 가능하기 때문에 초기 개발 비용 및 유지 관리 비용의 절감 효과
- 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험
장점, 검색엔진(SEO) 최적화 유리
- 반응형 웹은 하나의 URL을 기반으로 화면이 바뀌므로 PC용 URL과 모바일용 URL이 동일합니다.
따라서 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리단점, 사이트의 속도 저하
- 모바일 환경에서도 적응하게끔 만들어진 반응형 웹은 모바일을 전용으로 하는 사이트에 비해 무겁다
- 반응형 웹 디자인은 읽어들여야 할 소스가 많아 불필요하게 많은 데이터를 소비하기 때문에 이는 사이트 속도와 직결
- 로딩의 속도나 이미지 리사이징의 문제로 성능이 떨어질 수 있으며, 실제로 사용하지 않은 자원을 전송 받거나 실제 사용되는 이미지보다 더 큰 이미지를 사용
단점, 웹브라우저 호환성 문제
- 현재 존재하는 웹 브라우저는 스펙 및 사양이 제각기 다르기 때문에 하나의 웹 브라우저에서는 잘 반응하던 HTML 소스가 다른 웹 브라우저에서는 디자인이 깨지는 경우가 발생할 수 있다.
미디어쿼리
미디어 쿼리 적용법
<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">
- 다른 css 파일을 적용할 때와 다른 점은 미디어 속성을 사용하여 조건을 지정한다는 점
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)"> /* 여기 css를 작성합니다. */ </style>
- 미디어 속성 내 해당 조건을 만족할 때에만 해당 스타일을 적용
CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성
미디어 쿼리 구문
@media 미디어 타입 (조건(너비 및 높이)) { (CSS 입력하는 부분) } --예제 @media screen (max-width: 400px) { body { color: red; } }
- 미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려줍니다.
- 조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일이 적용되고, 만족되지 않으면 적용되지 않습니다.
- CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용 됩니다.
미디어 타입(Media Type)
- all : 모든 미디어 타입
- print : 프린터
- screen : 컴퓨터 화면
- speech : 스크린 리더
조건(너비 및 높이)
@media screen and (width: 600px) { body { color : red; } }
- 반응형 디자인을 만들기 위해 가장 많이 사용하는 기능은 뷰포트 너비
min-width와 max-width, width 등의 미디어 기능을 활용해 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용방향성
@media (orientation: landscape) { body { color: rebeccapurple; } }
- 세로 모드인지 가로 모드인지 검사하여 CSS 스타일을 주고 싶은 경우, orientation으로 검사
논리곱(and) 미디어 쿼리
@media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; } }
- 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다. 두 조건을 모두 만족해야지 쿼리 안의 CSS 스타일이 적용
논리합(or) 미디어 쿼리
@media screen and (min-width: 600px), screen and (orientation: landscape) { body { color: blue; } }
- 콤마로 분리를 한다면 미디어 쿼리의 해당 조건 중 어느 하나를 만족시킬 때 CSS 스타일을 적용
- 뷰포트의 넓이가 600px 이상이거나, 장치가 가로 방향인 경우 텍스트는 파란색이 됩니다. 이 중 하나라도 조건을 만족한다면 쿼리 안의 CSS 스타일이 적용
부정(not) 미디어 쿼리
@media not all and (orientation: landscape) { body { color: blue; } }
- not 연산자를 사용하게 되면 미디어 쿼리의 의미를 반대로 적용
- 방향이 세로인 경우에만 텍스트가 파란색으로 적용
CSS 애니메이션
- CSS 스타일을 부드럽게 전환
@keyframes
/* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% { /* to 라고 작성해도 됩니다.*/ CSS속성 : 속성값; } }예시
@keyframes lotate { 0% { transform : rotate(0deg) } 50% { transform : rotate(180deg) } 100% { transform : rotate(360deg) } } /* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션입니다. */animation 속성
animation-name
#logo { animation : lotate; } #logo { animation-name : lotate; }
- 애니메이션을 적용하고 싶은 요소에 animation 속성의 첫번째 값
- animation-name 이라는 속성으로 @keyframes 키워드를 사용해서 만든 애니메이션 이름을 작성
- 성들 중 최소한 animation-name 과 animation-duration 은 지정해줘야 애니메이션이 실행이 된다.
animation-duration
#logo { animation : lotate 3s ; } #logo { animation-name : lotate; animation-duration : 3s; }
- 애니메이션이 재생될 시간을 animation 속성의 두번째 값
- animation-duration 이라는 속성으로 시간 단위로 작성
animation-delay
#logo { animation : lotate 3s 3s ; } #logo { animation-name : lotate; animation-duration : 3s; animation-delay : 3s; }
- 애니메이션 재생을 미룰 시간을 지정
- animation 속성에 띄어쓰기로 구분해준 다음, 혹은 animation-duration 이라는 속성으로 시간 단위로 작성
animation-direction
#logo { animation : lotate 3s reverse ; } #logo { animation-name : lotate; animation-duration : 3s; animation-direction : alternate; }
- 애니메이션 재생 방향을 지정
- animation 속성에 띄어쓰기로 구분해준 다음, 혹은 animation-direction 이라는 속성으로 작성
- normal : 기본 값. 재생이 끝나면 처음부터 다시 재생합니다.
- reverse : 역방향으로 재생합니다.
- alternate : 순방향부터 역방향을 번갈아가며 재생합니다.
- alternate-reverse : 역방향부터 순방향을 번갈아가며 재생합니다.
animation-iteration-count
#logo { animation : lotate 3s infinite ; /* 애니메이션이 무한 반복 됩니다. */ } #logo { animation-name : lotate; animation-duration : 3s; animation-iteration-count : 3 ; /* 애니메이션이 3번 반복 됩니다. */ }
- 애니메이션이 몇 번 재생될지 지정
- 기본 값은 1이며, 설정한 횟수만큼 애니메이션이 반복 재생
- nfinite 로 설정할 경우 무한 반복 되며, 소수점을 작성할 경우 재생 도중 처음 상태로 돌아갑니다.
예를 들어, 재생 시간이 3초일 때, 0.6을 전달할 경우 3 * 0.6을 한 1.8초만큼만 재생되고 처음 상태로 돌아가게 됩니다.animation-play-state
#logo { animation : lotate 3s pause ; } #logo { animation-name : lotate; animation-duration : 3s; animation-play-state : pause ; }
- 애니메이션이 재생 상태를 설정
- 기본 값인running, 애니메이션을 정지시키는 pause 를 값으로 지정할 수 있다.
- 보통 이벤트로 애니메이션을 재생 상태를 변경할 때 사용
animation-timing-function
animation-fill-mode
- 애니메이션 재생 전 후의 상태를 지정
- none : 기본 값. 재생중이 아닌 경우 요소의 스타일을 유지합니다.
- forwards : 재생중이 아닌 경우 마지막 키프레임 스타일을 유지합니다.
- backwards : 재생중이 아닌 경우 첫 번째 키프레임 스타일을 유지합니다.
- both : 재생 전에는 첫 번째 키프레임 스타일을, 재생 후에는 마지막 키프레임 스타일을 유지합니다.
@keyframes 중간값
#logo { **animation-name : lotate;** /* lotate 라는 이름의 키프레임 애니메이션을 */ animation-duration : 3s; /* 3초 동안 재생하며, */ animation-iteration-count : infinite; /* 애니메이션을 무한 반복하고, */ animation-timing-function : linear; /* 선형으로 재생합니다. */ } /* 아래와 같이 일괄 작성해도 동일하게 적용됩니다. */ #logo { animation : **lotate** 3s infinite linear; }
Canvas(캔버스)
- 캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성
선한 영향력을 주는 사람