[코딩 공부_48] library 사용해보기(페이지 만들기-index편)

오늘은 animation.css 라이브러리를 사용하는 법에 대해 

animation.css 라이브러리 사용해보기 전 꼭 파악해야하는 부분이 있다

 

첫번째, Framework vs Library vs plug in의 차이에 대해 알아야한다 

- Framework > Libary > plug in 순으로 크다 

 

① Framework : 전체적인 틀을 잡아주는 도구이다 

   ex) node, react, bootstrap ...등

 

② library : 부분적으로 필요한 유용한 도구들의 모음이다 

 - 과한 사용은 서비스를 느리고 무겁게 만든다 

 - 많이 알고 잘 적기에 사용하는 것은 또한 능력이다 

 - 라이브러리에 너무 익숙해지면 바보가 된다

   ex) jQuery, annimated.css, fullpage ...등

 

③ plug-in : 작은 단위를 생성하는데 필요한 도구들의 모음이다 

  ex) fontawesome, xeicon, slick.js ...등

 

** 경계가 다소 애매해서 정확하게 jQurey는 라이브러리다!라고 이야기할 순 없다 하지만 jQurey가 뭐에요??라고 묻는다면 90프로가 라이브러리입니다!라고 이야기한다는 것이다 코딩이라는 게 정답이 있는 분야가 아니기 때문이라고 생각한다

 

 

본격적으로 library를 사용해보도록 하자! 

첫번째, cdnjs에서 animate.css를 검색해서 링크를 복사한다

cddnjs는 효과를 주기위한 링크를 한곳에 모아둔 곳이다 따로 설치없이 사용이 가능하는 장점이 있다 

 

cdnjs - The #1 free and open source CDN built to make life easier for developers

 

두번째, animate.css 사이트에서 원하는 animate를 복사해서 코드에 붙여넣기하면 된다

- html 문서에선 class="복사한 코드"이며,

css 문서에선 복사한 코드가 animate__bounce 인 경우, "animate: bounce 2s"로 입력하면 적용이 된다

Animate.css | A cross-browser library of CSS animations.

** 원하는 코드를 복사 붙여넣기만 하면 되기에 편리하고 쉽다! 그래도 계속 사용하다보면 까먹게 되고 나중에 이거 어떻게 하더라?할 수 있기 떄문에 너무 믿고 사용하면 안된다! 

 

 

 

 

 

<실습> animate를 활용한 페이지 만들기_index

<결과화면>

 

<reset.css>

<style>
@charset "utf-8";
:root {
    --primary-bg: #815854;
    --primary-color: #F9E8DE;
    --translate-y: -5.2rem
}
/* simple reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: var(--primary-bg);
    color: var(--primary-color);
}
*:after, *:before {
    display: inline-block;
}
img {
    width: 100%;
    max-width: 100%;
}
a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}
li {
    list-style: none;
}
h1, h2, h3 {
    font-weight: normal;
}
/* layout */
.inner {
    width: 900px;
    margin: 0 auto;
}
</style>

reset.css 맨 윗줄을 보면 :root라는 개체가 보인다!

root란 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담는다! 우리가 많은 코드를 작성하다보면 반복적으로 줘야하는 속성들이 기억 안날 때가 있고 수백 곳의 서로 다른 위치에서 같은 색상을 사용했고 수정해야하는 일이 생긴다면? 그 수많은 코드를 일일이 고쳐야하는 불상사가 생길 수 있다 그럴때 이 root를 사용해서 설정해준다면 쉽게 색상을 수정할 수 있다 !! 

tmi이지만 root에 작성된 색상을 기준으로 css 코드를 적어야하는데 속성의 이름을 기준으로 코드를 써버려서 색상이 반대로 되있어서 뭐지뭐지 하다가 발견했다 ㅎㅎ.. 발견한 순간 허무하고 바보 멍청이가 된 기분이었다 

root는 전용 표기법이 있기 때문에 꼭 지켜서 사용해야한다 !

 

<index.css>

<style>
@charset "utf-8";
@import url(./reset.css);
@import url(./main.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css);

.skew-box .container, .unskew-box .container {
    padding: 0 5rem;
}
.skew-box {
    /* border: 1px solid blue; */
    padding: 10rem 0;
    color: var(--primary-bg);
    background: var(--primary-color);
    transform: skewY(-10deg) translateY(-5.2rem);
    text-transform: uppercase;
    /* line=height는 상속된다 */
    line-height: 1.5;
}
.skew-box .container {
    transform: skewY(10deg);
}
.skew-box .container .firstitle h1 {
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
}
.skew-box .container h1:nth-of-type(1) {
    animation: fadeInUp 1s 1s;
}
.skew-box .container h1:nth-of-type(2) {
    animation: fadeInRight 1s 1s;
}
.skew-box .first-title h1 {
        display: inline-block;
        animation: fadeInLeft 2s;
        margin-right: 1rem;
}
.skew-box span {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-right: 8px;
    line-height: 50px;
    font-size: 1.7rem;
    text-align: center;
    border: 1px solid #000;
    color: var(--primary-color);
    background: var(--primary-bg);
    animation: flipInY 3.5s infinite;
    animation-duration: 6s;
}
.skew-box span:nth-child(1) {
    animation-delay: .2s;
}
.skew-box span:nth-child(2) {
    animation-delay: .4s;
}
.skew-box span:nth-child(3) {
    animation-delay: .8s;
}
.skew-box span:nth-child(4) {
    animation-delay: 1.2s;
}
.skew-box span:nth-child(5) {
    animation-delay: 1.6s;
}
.skew-box span:nth-child(6) {
    animation-delay: 2.0s;
}
.skew-box .goHome {
    border: 1px solid var(--primary-bg);
    border-radius: 20px;
    padding: 0.5em 1em;
    margin-top: 1rem;
}
.skew-box .goHome:hover {
    color: var(--primary-color);
    background: var(--primary-background);
}
.unskew-box {
    /* border: 1px solid red; */
    text-align: right;
    padding: 5rem 0;
}
</style>

 

<index.html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css">
<title>index page</title>
</head>
<body>
    <div class="wrap">
        <div class="inner">
            <div class="skew-box">
                <div class="container">
                    <div class="first-title">
                        <h1>spring is</h1>
                        <span>c</span>
                        <span>o</span>
                        <span>m</span>
                        <span>i</span>
                        <span>n</span>
                        <span>g</span>
                    </div>
                    <h1>life is going up</h1>
                    <h1>it's my timing</h1>
                    <a href="main.html" class="goHome">go home</a>
                </div>
            </div>
            <div class="unskew-box">
                <div class="container">
                    <h1>inside</h1>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis sed expedita ipsam exercitationem consectetur mollitia. Odit, aspernatur quo? Tenetur architecto consequuntur reprehenderit deserunt velit animi porro consequatur fuga amet odio.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

---

느낀 점 : 난이도는 괜찮았지만 속도가 너무너무 빨라서 보고 따라하기 힘들었다 정신바짝차리고 안따라가면 놓쳐버린다 ㅎ -ㅎ,,  라이브러리가 있으니까 으잉 이렇게 해도 되는 걸까 싶을 정도로 편해졌다 ! 편해지고 내가 직접 코드친 것보다 훨씬 화려한 느낌?ㅎㅎ.. 회사가면 이렇게 작업할까 ?? 궁금하다 !!!