9일차 요약
- 애니메이션 패키지 활용(아래 웹사이트 참조)
- animate.css
- codepen.io
- 추가학습으로 html/css/javascript의 개념
살펴보기 (생활코딩)
학습 내용
실습 내용 / 결과물 출력 첨부
애니메이션 패키지의 활용
- 이미 만들어진 애니메이션 패키지를 활용
- CSS animation library / libary of CSS animation으로 검색
animate.css(웹사이트) 활용
- 라이브러리 설치
:직접 설치하거나 CDN을 활용할 수 있다. 실습에서는 CDN을 활요함.
- CDN?
CDN(Content Delivery Networkd)
: 콘텐츠 배달 네트워크(CDN)는 사용자에게 웹 콘텐츠를 효율적으로 제공할 수 있는 서버의 분산 네트워크입니다. CDN은 최종 사용자와 가까운 POP(point-of-presence) 위치의 에지 서버에 캐시된 콘텐츠를 저장하여 대기 시간을 최소화합니다.
- html문서에 CDN 링크
<head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>
- 공식 예제 카피 해보기
위를 카피해 사용해봄.
딜레이, 속도 조절 등 앞서 배운 내용들 뿐 아니라 추가적인 기능들도 간단히 카피해서 사용 가능했음.
- 적용원리
:이미 작성되어있는 CSS문서를 링크하여 클래스를 카피해 사용하는 것. 지금까지의 실습에서 클래스를 부여하고 선택자를 통해 CSS를 적용하던 것과 역순.아래 주소를 확인해보면 기 작성된 CSS문서의 내용을 확인할 수 있다.
https://cdnj.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css
codepen.io에서 카피
- 이미 만들어진 html과 css 문서를 카피해서 사용하거나 커스텀 할 수 있다.
아래는 codepen에서 animation키워드로 검색한 결과 중 하나
추가 학습
html
html은 지금까지 배워온 것처럼 웹페이지를 만들기 위한 언어이다. 여러 특징들 중에서도 가장 중요한 점은
public domain
이라는 점이 아닐까. 오늘 실습한 애니메이션 라이브러리의 사용이나 codepen에서의 카피도 이 점을 기반으로 가능한 것... 물론 오픈소스는 전반적 추세이지만... 실습 때는 귀찮게 느껴지던 웹 표준이나 웹 접근성이 public domain이라는 점에 더해져서 단순하지만 강한 범용성을 만들어내는 것 같다.
CSS
CSS는 html에 디자인을 적용하기 위해 만들어진 코드이다. 실습을 통해 체험해왔지만, CSS라는 개별 코드를 사용함으로써 html코드의 명징성을 지킬 수 있고, 디자인 적용에 대한 효율성을 극대화 할 수 있다.
html문서 내에서 style 태그를 통해 css를 사용하는 경우 컴퓨터는 <style=""></style>이라는 태그를 통해 따옴표 안에 들어갈 요소가 CSS문법이라는 것을 인지한다.
javascript
과정에서 아직 배우지 않은 자바스크립트는 html이 사용자와 상호작용하는 것을 가능하게 하기 위한 언어라고한다.
물론 html의 input이나 button태그나 css에서 배운 여러 기능들이 사용자와 상호작용하는 것은 맞지만 이것이 한 번 작성된 html의 구조에 관여하는 것은 아닌데, 자바스크립트가 이를 가능하게 하는듯 하다.
html이나 css가 코드와 기능이 1:1로 대응하는 것에 비해 논리적인 구조를 갖추고 있는 언어.
미해결 - 솔루션
x
질문거리
x
학습 소감
빨리 자바스크립트를 배우고싶다.
