프론트엔드(Web)/CSS

CSS 배경 및 애니메이션 속성

만능 엔터테이너 2024. 7. 11. 15:56
728x90
반응형
SMALL

배경 속성으로 요소의 배경 설정하기

background-color 속성

요소의 배경에 색상을 넣을 수 있습니다. 속성값으로는 색상값을 사용합니다.

background-color:<색상값>;
div{
      width:100px;
      height:100px;
      background-color:red;
    }

 

background-image 속성

이미지를 넣을 수 있고, 속성값은 삽입할 이미지의 경로를 url() 함수로 지정하면 됩니다.

background-image:url('이미지 경로');
background-image 속성을 사용할 때 주의사항

첫째, 요소의 배경 크기가 반드시 있어야 합니다. background-image 속성은 요소의 배경에 이미지를 삽입하는 원리이기에 요소 배경의 너비와 높이를 지정하지 않으면 이미지가 보이지 않습니다. background-color 속성도 해당합니다.

둘째, 이미지의크기가 요소의 배경 크기와 맞지 않으면 틈이 생겨 어색하게 보입니다. 그래서 코드를 작성할 때 항상 이미지의 너비와 크기가 동일하게 작성합니다.

1) 요소의 배경이 이미지보다 작은 경우
원본 이미지의 일부가 잘려서 출력됩니다.

2) 요소의 배경이 이미지보다 큰 경우
원본 이미지와 배경 사이에 틈이 생깁니다. 부자연스러워 보입니다.

 

background-repeat 속성

요소의 배경 크기가 삽입하려는 이미지보다 크면 자동적으로 이미지를 반복해서 채웁니다. 이때, 이미지 반복 설정을 바꾸려면 background-repeat 속성을 사용합니다.

background-repeat:<속성값>;
속성값 설명
no-repeat 이미지를 반복하지 않습니다.
repeat-x 이미지를 가로 방향으로 반복합니다.
repeat-y 이미지를 세로 방향으로 반복합니다.
repeat 이미지를 가로와 세로 방향으로 반복합니다.
round 이미지를 반복하되 이미지가 요소에 딱 맞도록 크기를 자동 조절합니다.
space 이미지가 잘리지 않도록 반복합니다.
div{
      width:320px; /* 원본 이미지보다 2배 크게 설정 */
      height:120px;
      background-image:url('images/coffee.jpg');
      background-repeat:no-repeat;
      border:1px solid black; /* 요소의 넓이가 잘 보이게 테두리 설정 */
    }

 

background-size 속성

요소의 배경 크기가 이미지보다 크면 background-repeat 속성으로 해결할 수 있지만, 요소의 배경 크기가 이미지보다 작을 때 이미지가 잘려 보이는 문제는 해결할 수 없습니다. 대신 background-size 속성으로 이미지 크기를 지정해서 처리할 수 있습니다.

background-size:auto|cover|contain|<너비 높이>;
속성값 설명
auto 이미지 크기를 유지합니다.
cover 이미지의 가로 세로 비율을 유지하면서 크기를 확대하거나 축소해 요소의 배경에 가득 채웁니다.
contain 이미지의 가로 세로 비율을 유지하면서 이미지가 배경 요소 안에 들어가도록 크기를 확대하거나 축소합니다.
<너비 높이> 이미지 크기를 직접 지정합니다.

 

cover를 적용할 경우 이미지의 일부가 잘리지만 contain일 때는 배경의 가로 및 세로 중 한 부분이 가득차게 되면

그 상태에서 멈추게 됩니다.

혹은 아래와 같이 너비와 높이를 직접 지정해서 이미지가 잘려 보이지 않고 배경에 딱 맞게 표시되도록 설정합니다.

 div{
      width:80px; /* 원본 이미지보다 1/2 작게 설정 */
      height:60px; /* 원본 이미지보다 1/2 작게 설정 */
      background-image:url('images/coffee.jpg');
      background-size:80px 60px; /* 너비와 높이를 80px, 60px로 지정 */
    }

 

background-position 속성

삽입하려는 이미지의 위치를 결정합니다.

background-position:<x 위치> <y 위치>;
위치 속성값 설명
x left,center,right x축(가로) 방향의 위치를 지정합니다.
y top,center,bottom y축(세로) 방향의 위치를 지정합니다.
공통 px, rem, em, % 위치를 직접 지정합니다.

 

background-position 속성값은 1개만 사용해도 되고 2개를 사용해도 됩니다. 값을 1개만 사용하면 지정한 값은 x축 값이 되고, y축 값은 기본으로 center가 됩니다. 2개를 사용하면 각각 x축과 y축 값으로 지정됩니다.

div{
      width:320px; /* 원본 이미지보다 2배 크게 설정 */
      height:240px;/* 원본 이미지보다 2배 크게 설정 */
      border:1px solid black; /* 요소의 넓이가 잘 보이게 테두리 설정 */
      background-image:url('images/coffee.jpg');
      background-repeat:no-repeat;      
      background-position:100%;
    }

100%는 비율에서 가장 큰 값이기에 x축에 사용하면 가장 오른쪽, y축에 사용하면 가장 아래쪽을 의미합니다.

※ background-position 속성은 background-size 속성값을 cover로 지정해서 같이 사용하면 효과가 좋습니다.

마치 이미지가 정중앙에 보여지기 때문입니다.

div {
        width: 320px; /* 원본 이미지보다 2배 크게 설정 */
        height: 240px; /* 원본 이미지보다 2배 크게 설정 */
        border: 1px solid black; /* 요소의 넓이가 잘 보이게 테두리 설정 */
        background-image: url("images/coffee.jpg");
        background-repeat: no-repeat;
        background-position: 100%;
        background-size: cover;
      }

 

 

background-attachment 속성

요소에 삽입된 이미지를 스크롤할 때, 이미지의 작동 방식을 결정합니다.

backgruond-attachment:<속성값>;
속성값 설명
local 삽입된 이미지가 요소와 웹 브라우저에 모두 스크롤됩니다.
scroll 삽입된 이미지가 요소에서는 고정되지만, 웹 브라우저에서는 스크롤 됩니다.
fixed 삽입된 이미지가 요소와 웹 브라우저에서 모두 고정됩니다.

 

background 속성으로 한 번에 지정하기

속성값을 나열하는 순서는 정해져 있지 않지만, background-size 속성만은 항상 background-position 속성값을 먼저 작성하고 나서 슬래시(/)로 구분한 후 사용해야 합니다.

background:<color 속성값> <image 속성값> <repeat 속성값> <position 속성값/size 속성값> <attachment 속성값>;
div{
      width:160px;
      height:120px;
     
      background-color:red;
      background-image:url('images/coffe.jpg');
      background-repeat:no-repeat;
      background-position:center;
      background-size:100% 100%;
      background-attachment:fixed;
     
      background:red url('images/coffee.jpg') no-repeat center/100% 100% fixed;
    }

 

※ background 속성은 속성값의 의미를 한 눈에 알아 보기 힘드므로 속성마다 각각 따로 작성하야 적는 것을 권장합니다.

위치 속성으로 HTML 요소 배치하기 - 위치 속성(요소의 위치에 관여)

CSS 속성 중에는 HTML 요소를 기본 흐름에서 벗어나서 원하는 곳에 배치할 수 있는 속성이 있습니다.

기본 흐름이란? HTML 태그의 박스 모델 성격에 따라 블록 성격이면 줄 바꿈, 인라인 성격이면 수평으로 요소가 배치됨

 

position 속성

HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용합니다.

position:<속성값>;
속성값 설명
static 요소를 기본 흐름에 따라 배치합니다.
relative 요소를 기본 흐름에 따라 배치하지만, 좌표 속성을 사용할 수 있습니다.
absolute 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치합니다.
fixed 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치합니다. 단, 스크롤해도 해당 위치에 고정되어 있습니다.
sticky 요소를 static 값처럼 기본 흐름에 따라 배치하지만, 지정한 좌표의 임계점에 이르면 fixed 값처럼 화면에 고정됩니다.

 

static

아무런 변화가 없습니다. 좌표 속성을 사용할 수 없고 위치 속성을 사용하지 않을 때와 동일합니다. 

기본값? static은 기본값으로 위치 속성을 사용하지 않을 때와 같습니다. 이를 기본 스타일 시트라고 합니다. 

 

relative

좌표 속성에 따라 배치할 수 있습니다.

속성명 설명
top 위쪽을 기준으로 좌푯값을 지정합니다.
right 오른쪽을 기준으로 좌푯값을 지정합니다.
bottom 아래쪽을 기준으로 좌푯값을 지정합니다.
left 왼쪽을 기준으로 좌푯값을 지정합니다.
<style>
    .box{
      width:100px;
      height:100px;
    }
    .red-box{
      background-color:red;
    }
    .green-box{
      background-color:green;
      position:relative;
      left:100px;
      /* top 속성 추가 */
      /* top:100px; */
    }
    .blue-box{
      background-color:blue;
    }
  </style>
</head>
<body>
  <div class="box red-box"></div>
  <div class="box green-box"></div>
  <div class="box blue-box"></div>

 

green-box인 요소의 position 속성값을 relative로 하고, 좌표 속성 중 left를 사용해 왼쪽을 기준으로 좌푯값을 지정합니다.

+ 앞의 코드에 top:100px; 속성을 추가합니다.

 

absolute

기본 흐름에서 벗어나 좌표 속성에 따라 배치됩니다. 단, 기준점이 다른데 relative는 기준점이 요소의 왼쪽 위 모서리지만,  absolute일 때는 웹 브라우저의 왼쪽 위 모서리입니다.

※ absolute 값일 때 top, bottom 속성을 사용하지 않으면 요소는 원래 있던 위치에서 가로로만 움직입니다.

 body{
      margin:0;
    }
    .box{
      width:100px;
      height:100px;
    }
    .red-box{
      background-color:red;
    }
    .green-box{
      background-color:green;
      position:absolute;
      left:100px;
      /* top 속성 추가 */
      /* top:100px; */
    }
    .blue-box{
      background-color:blue;
    }

fixed

해당 요소는 지정된 위치에 고정됩니다. 실행하게 되면 absolute와 동일하게 작동하는 것처럼 보이지만, scroll 하면 차이가 발생합니다. 웹 브라우저에서 스크롤 하게 되면 항상 같은 위치에 존재함을 알 수 있습니다.

body{
      margin:0;
      height:4000px;
    }
    .box{
      width:100px;
      height:100px;
    }
    .red-box{
      background-color:red;
    }
    .green-box{
      background-color:green;
      position:fixed;
      left:100px;
      top:100px;
    }
    .blue-box{
      background-color:blue;
    }

sticky

스크롤하는 중에 일정 지점(임계점)이 되면 요소가 fixed 값처럼 작동합니다. 

   body{
      margin:0;
      height:4000px;
    }
    .box{
      width:100px;
      height:100px;
    }
    .red-box{
      background-color:red;
    }
    .green-box{
      background-color:green;
      position:sticky;
      top:0;
    }
    .blue-box{
      background-color:blue;
    }

z-index 속성

position 속성으로 배치한 요소의 z축 위치를 결정할 수 있습니다. 속성값으로는 하나의 정수값이 옵니다.

z-index:<정숫값>;

 

요소와 요소가 겹쳤을 때, 다음 속성을 사용합니다. 이때, 요소들의 앞뒤 배치를 바꾸고 싶다면 z축 값을 지정하는 z-index 속성을 사용합니다. 속성값의 숫자가 클수록 요소가 더 앞쪽에 배치됩니다. 모든 요소는 기본으로 z-index 속성값이 0이므로 0보다 크게 설정하면 됩니다.

요소를 원하는 위치에 배치하는 position 속성은 효과적입니다. 하지만, 모든 속성을 position 속성으로 배치하는 경우는 잘못된 코딩 습관입니다. 모든 요소는 최대한 기본 흐름을 유지하면서 정말 필요한 대상에만 position 속성을 사용해야 합니다.

 

float 속성

요소를 화면에 배치하는 또 다른 방법입니다.

float:<속성값>;
속성값 설명
none float 속성을 적용하지 않습니다.
left 대상 요소를 공중에 띄워 왼쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치합니다.
right 대상 요소를 공중에 띄워 오른쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치합니다.

 

{float 속성이 사용되는 상황}

- 이미지 요소와 텍스트 요소 배치하기

<style>
    img{
      float:left;
      margin-right:1rem;
    }
  </style>
</head>
<body>
  <img src="images/coffee.jpg" alt="커피">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti ut dolor ratione blanditiis iste, harum fugit, soluta eum obcaecati, expedita perspiciatis quam culpa? Doloribus repellendus labore sed inventore iusto eveniet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores at natus aliquid numquam vitae nisi, voluptates laudantium saepe error sapiente nobis adipisci et accusamus molestiae commodi consequuntur earum, ut dicta? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id molestiae perspiciatis non temporibus voluptates alias ducimus libero esse recusandae placeat, natus quo mollitia sint enim? Ex numquam non officia ipsam?</p>
</body>

<style>
    img{
      float:right;
      margin-right:1rem;
    }
  </style>
</head>
<body>
  <img src="images/coffee.jpg" alt="커피">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti ut dolor ratione blanditiis iste, harum fugit, soluta eum obcaecati, expedita perspiciatis quam culpa? Doloribus repellendus labore sed inventore iusto eveniet. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores at natus aliquid numquam vitae nisi, voluptates laudantium saepe error sapiente nobis adipisci et accusamus molestiae commodi consequuntur earum, ut dicta? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id molestiae perspiciatis non temporibus voluptates alias ducimus libero esse recusandae placeat, natus quo mollitia sint enim? Ex numquam non officia ipsam?</p>
</body>

블록 성격 요소를 인라인 성격 요소처럼 배치하기

 <style>
    div{
      color:white;
    }
    .red-box{
      background-color:red;
      float:left;
    }
    .blue-box{
      background-color:blue;
      float:left;
    }
  </style>

화면상으로는 빨간색 요소와 파란색 요소가 나란히 배치된 것처럼 보이지만, 실제는 파란색 요소 일부가 빨간색 요소 밑에 깔려 있는 상태입니다. 이렇게 작동하는 것은 float 속성이 적용 대상을 공중에 띄워 배치하기 때문에 대상이 있던 위치를 빈 공간으로 인식해서 그렇습니다. 다만, 다음에 오는 요소를 대상 요소 주변에 흐르듯이 배치한다는 float 속성의 특징 때문에 blue-box라는 글씨가 빨간색 요소의 옆으로 배치될 뿐입니다.

 

이 특징을 이용하여 블록 성격 요소를 한 줄로 배치가 가능한데, 파란색 요소에도 float 속성을 적용해 빨간색 요소와 마찬가지로 공중에 띄우면 됩니다. 즉, float 속성이 적용된 대상끼리는 서로의 위치를 제대로 인식할 수 있습니다.

 

※ float 속성 사용 시 문제점

div 태그로 작성된 빨간색 요소와 초록색 요소가 있을 때 이 상태에서 빨간색 요소의 float 속성값을 left로 지정하면 초록색 요소가 빨간색 요소 밑에 존재하여 화면상에 보이질 않습니다. 이러한 특징은 float 속성이 적용 대상의 원래 위치를 보장하지 않기 때문입니다.

 .container {
        width: 400px;
        padding: 1rem;
        margin: 0 auto;
        border: 1px solid black;
        background-color: #ccc;
      }
      .box {
        width: 100px;
        height: 100px;
        float: left;
      }
      .red-box {
        background-color: red;
      }
      .blue-box {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box red-box"></div>
      <div class="box blue-box"></div>
    </div>
  </body>

다음 코드를 실행하게 되면, 웹 브라우저에 그림과 같이 표시됩니다. 즉, float 속성을 적용하면 해당 자식 요소를 부모 요소가 제대로 인식하지 못합니다. 이를 해결하는 방법은 clear 속성을 사용하거나, overflow 속성을 사용하여 해결합니다.

 

clear 속성

float 속성을 해제할 때 사용하는 속성으로 float 속성이 요소에 영향을 주지 않도록 해제합니다.

clear 속성은 float 속성이 마지막으로 적용된 요소 다음에 사용합니다.

clear:<속성값>;
속성값 설명
left float 속성의 left값을 해제합니다.
right float 속성의 right값을 해제합니다.
both float 속성의 left와 right 값을 모두 해제합니다.
<style>
    .box{
        width:100px;
        height:100px;        
    }
    .red-box{
      background-color:red;
      float:left;
    }
    .green-box{
      background-color:green;
      float:left;
    }
    .blue-box{
      background-color:blue;
    }
  </style>

  <style>
    .box{
        width:100px;
        height:100px;        
    }
    .red-box{
      background-color:red;
      float:left;
    }
    .green-box{
      background-color:green;
      float:left;
    }
    .blue-box{
      background-color:blue;
      clear: left;
    }
  </style>

 

파란색 요소를 정상적으로 보이게 하려면 파란색 요소 바로 전에 있는 초록색 요소에 적용된 float 속성을 해제해야 합니다. 파란색 요소에 clear 속성을 추가하는데 이때, 초록색 요소의 float 속성값이 left이니 clear 속성에도 left 값을 적용합니다.

그렇게 하면, 파란색 요소는 다른 요소의 float 속성에 영향을 받지 않아 정상적으로 표시되게 됩니다.

전환 효과 속성 적용하기

전환이란? css에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것을 말합니다.

 <style>
    .red-box{
      width:100px;
      height:100px;
      background-color:red;
    }
    .red-box:hover{
      background-color:blue;
    }
  </style>

 

빨간색 요소에 마우스를 올리면 :hover 가상 클래스 선택자 때문에 파란색으로 변합니다. 전환은 기존 속성값이 다른 값으로 변경되는 것을 말합니다.

 

transition-property 속성

전환 효과를 적용할 대상 속성을 지정합니다.

transition-property:<속성값>;
속성값 설명
none 전환 효과 속성을 지정하지 않습니다.
all 모든 속성을 전환 효과 대상으로 지정합니다.

 

예를 들어, background-color 속성에 전환 효과를 주고 싶다면 다음과 같이 작성하면 됩니다.

transition-property:background-color;

 

전환 효과를 여러 속성에 지정하고 싶다면 쉼표로 구분해 작성하면 됩니다.

transition-property:background-color, color, width;

 

개별 속성이 아닌 모든 속성에 전환 효과를 넣고 싶으면 all로 지정하면 됩니다.

transition-property:all;

 

transition-duration 속성

전환 효과의 지속 시간을 설정하는 데 사용합니다. 속성값으로는 초 단위 값을 사용합니다.

transition-duration:<시간>;

 

예를 들어, transition-duration: 1s; 라고 작성하면 전환 효과가 1초 동안 발생합니다.

여러 속성을 쉼표로 구분하여 전환 효과를 지정할 때는 transition-property와 transition-duration 속성을 각각 지정할 수 있습니다. 만약 다음과 같이 코드를 작성하면 background 속성은 1초, color 속성은 0.5초, width 속성은 2초 동안 각 속성의 지속 시간이 지정되어 전환 효과가 발생합니다.

transition-property:background-color, color, width;
transition-duration:1s, 500ms, 2s;
어떤 요소에 전환 효과를 지정할 때는 transition-property와 transition-duration 속성을 함께 사용해야 합니다. 둘 중 하나의 속성이라도 빠지게 되면 전환 효과가 제대로 적용되지 않습니다.

 

transition-delay 속성

전환 효과의 발생을 지연할 수 있습니다. 속성값으로는 지연하고 싶은 시간을 적으면 됩니다.

 .red-box{
      width:100px;
      height:100px;
      background-color:red;
      transition-property:background-color, color, width;
      transition-duration:1s;
      transition-delay:1s;
    }

 

다음과 같이 코드를 작성하게 되면 빨간색 요소에 마우스를 올렸을 때, 파란색으로 바뀌지 않고 1초 뒤에 전환 효과가 발생하게 됩니다.

 

transition-timing-function 속성

전환 효과의 진행 속도를 지정합니다. 속성값으로는 정해진 키워드와 cubic-bezier () 함수를 사용할 수 있습니다.

속성값 설명
linear 처음 속도와 마지막 속도가 일정합니다.
ease 처음에는 속도가 점점 빨라지다가 중간부터 점점 느려집니다.
ease-in 처음에는 속도가 느리지만 완료될 때까지 점점 빨라집니다. 
ease-out 처음에는 속도가 빠르지만 완료될 때까지 점점 느려집니다.
ease-in-out 처음에는 속도가 느리지만 점점 빨라지다가 다시 점점 느려집니다.
cubic-zeiber(p1, p2, p3, p4) 사용자가 정의한 속도로 진행합니다.
   .container .bar{
      width:100px;
      background-color:red;
      transition-property:width;
      transition-duration:1s;
    }
  .container:hover .bar {
       width:110px;
}

 

bar 클래스가 있는 태그의 너비가 처음에는 10px인데 5초 뒤에는 100px이 증가하므로 이론상 1초에 20px씩 증가하면 됩니다. 이때, 증가하는 속도를 transition-timing-function 속성이 제어하게 됩니다.

 

transition 속성으로 한 번에 지정하기

모든 전환 효과 속성은 단축 속성인 transition 속성으로 한 번에 작성이 가능합니다.

transition:<property>, <duration>, <timing-function>, <delay>;

 

전환 효과는 css 모든 속성이 사용할 수 있는 것이 아닙니다. 

애니메이션 속성으로 전환 효과 제어하기

애니메이션 속성은 전환 효과 속성보다 더 정확하고 부드럽게 전환 효과를 제어할 수 있습니다.

애니메이션 속성의 주요 문법 구성은 애니메이션을 적용할 스타일 속성과 키 프레임입니다.

 

키 프레임 정의하기

애니메이션이 진행되는 과정에서 특정 시점에서 발생해야 하는 여러 작업을 정의하는 문법입니다. 따라서, 키 프레임에는 시작과 종료에 해당하는 최소 2개 시점에 대한 스타일이 정의되어야 합니다.

@keyframes <키 프레임명>{
  0%{ css 코드 }
  n%{ css 코드 }
  100%{ css 코드 }
}

 

애니메이션 시작을 의미하는 0%와 종료를 의미하는 100%는 각각 from과 to 키워드로 대체하여 작성가능합니다.

또한, 중간에 얼마든지 시점을 정의하여 스타일 속성을 정의할 수 있습니다.

 @keyframes bgchange{
      0%{background-color:red;}
      25%{background-color:orange;}
      50%{background-color:yellow;}
      100%{background-color:green;}
    }

 

animation-name 속성

특정 요소에서 적용할 키 프레임명을 지정합니다.

animation-name:<키 프레임명>;

예를 들어, bgchange라는 이름의 키 프레임을 지정하고 싶으면 animation-name:bgchange;라고 작성하면 됩니다.

 

animation-duration 속성

애니메이션을 지속할 시간을 설정합니다. 속성값으로는 초(s)나 밀리초(ms) 단위의 시간을 넣으면 됩니다.

animation-duration:<지속 시간>;
div {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: bgchange;
        animation-duration: 5s;
      }
      @keyframes bgchange {
        0% {
          background-color: red;
        }
        25% {
          background-color: orange;
        }
        50% {
          background-color: yellow;
        }
        100% {
          background-color: green;
        }
      }

 

div 요소의 배경색이 처음에는 빨간색이었다가 키 프레임에 정의된 시점에 따라 주황색, 노란색, 초록색 순으로 변경됩니다. 애니메이션을 전환한 효과는 5초 동안 실행되었다가 다시 요소의 초기색인 빨간색으로 돌아갑니다.

애니메이션 속성이 한 번 실행하고 나면 실행되기 전 상태로 돌아가기 때문입니다.

애니메이션은 키 프레임, animation-name 속성, animation-duration 속성만 있으면 전환 효과를 적용할 수 있습니다. 이 3가지 중 하나라도 빠지게 되면 전환 효과는 적용되지 않습니다. 3가지를 기본으로 하여 나머지 애니메이션 속성을 추가하면 효과를 세부적으로 제어할 수 있습니다.

 

animation-delay 속성

애니메이션 실행을 지연할 수 있습니다. 속성값으로는 초나 밀리초 단위의 시간을 넣으면 됩니다.

animation-delay:<지연 시간>;

예를 들어, 다음 코드를 실행하면 애니메이션을 3초 뒤에 실행합니다.

animation-delay:3s;

 

animation-fill-mode 속성

애니메이션이 끝나도 원래 상태로 돌아가지 않고 애니메이션이 종료된 시점의 상태를 유지할 수 있습니다.

이 속성은 애니메이션이 실행되기 전과 후의 스타일을 지정합니다. 

속성값 상태 설명
none 실행 전 시작 시점(0%,from)의 스타일을 적용하지 않고 대기합니다.
실행 후 실행되기 전의 스타일 적용 상태로 돌아갑니다.
forwards 실행 전 시작 시점(0%, from)의 스타일을 적용하지 않고 대기합니다.
실행 후 키 프레임에 정의된 종료 시점(100%, to)의 스타일을 적용하고 대기합니다.
backwards 실행 전 키 프레임에 정의된 시작 시점(0%, from)의 스타일을 적용하고 대기합니다.
실행 후 실행되기 전의 스타일 적용 상태로 돌아갑니다.
both 실행 전 키 프레임에 정의된 시작 시점(0%, from)의 스타일을 적용하고 대기합니다.
실행 후 키 프레임에 정의된 종료 시점(100%, to)의 스타일을 적용하고 대기합니다.
div{
      width:100px;
      height:100px;
      background-color:red;
      animation-name:bgchange;
      animation-duration:5s;
      animation-fill-mode:forwards;
    }
    @keyframes bgchange {
      0%{background-color:red;}
      25%{background-color:orange;}
      50%{background-color:yellow;}
      100%{background-color:green;}
    }

 

animation-fill-mode 속성은 대부분 애니메이션이 종료된 후에 상태 유지를 목적으로 사용하기 때문에 forwards 속성값을 가장 많이 사용합니다. 다음과 같이 코드를 작성하면 애니메이션이 종료되어도 빨간색으로 돌아가지 않고 초록색으로 유지됩니다.

animation-iterator-count 속성

애니메이션은 기본으로 1회 실행하고 종료되는데 이 속성으로 애니메이션의 실행 횟수를 조절할 수 있습니다.

animation-iteration-count:<횟수>;
div{
      width:100px;
      height:100px;
      animation-name:bgchange;
      animation-duration:1s;
      animation-fill-mode:both;
      animation-delay:4s;
      animation-iteration-count:3;
    }
    @keyframes bgchange {
      0%{background-color:red;}
      25%{background-color:orange;}
      50%{background-color:yellow;}
      100%{background-color:green;}
    }

 

애니메이션을 3회 반복하고 싶다면 다음과 같이 코드를 작성합니다.

 

animation-play-state 속성

애니메이션의 재생 상태를 지정합니다. 속성값으로는 아래 키워드를 사용합니다.

속성값 설명
paused 애니메이션의 실행을 일시 정지합니다.
running 애니메이션을 실행합니다.

 

전환 효과 속성과는 다르게 애니메이션 속성은 실행 도중에 일시 정지하거나 일시 정지했다가 다시 재생할 수 있습니다. 하지만 이렇게 작업하려면 순수 HTML과 CSS 코드만으로 불가능하고 자바스크립트도 함께 사용해야 합니다.

<style>
    div{
      width:100px;
      height:100px;
      background-color:red;
      position:relative;
      animation-name:move;
      animation-duration:10s;
      animation-fill-mode:forwards;
      animation-play-state:paused;
    }
    @keyframes move{
      from{
        left:0;
      }
      to{
        left:300px;
      }
    }
  </style>
</head>
<body>
  <div></div>
  <button id="start">start</button>
  <button id="paused">paused</button>
  <script>
    const box = document.querySelector("div");
    document.getElementById("start").addEventListener("click", function(){
      box.style.animationPlayState = "running";
    });
    document.getElementById("paused").addEventListener("click", function(){
      box.style.animationPlayState = "paused";
    })
  </script>
</body>

animation-play-state 속성값을 paused로 설정했기 때문에 코드를 실행해도 애니메이션이 실행되지 않습니다. 화면의 start 버튼을 누르면 div 요소에서 애니메이션이 시작되고 paused를 누르면 일시 정지 됩니다.

 

animation-direction 속성

애니메이션의 진행 방향을 지정합니다.

animation-direction:<속성값>
속성값 설명
normal 애니메이션의 진행 방향을 키 프레임에 정의된 시간 순서대로 진행합니다. ( to -> from )
reverse 애니메이션의 진행 방향을 키 프레임에 정의된 시간 순서의 역으로 진행합니다. ( from -> to )
alternate 애니메이션이 1회 이상 실행될 경우 홀수 번째는 normal로, 짝수 번째는 reverse로 진행합니다.
alternate-reverse 애니메이션이 1회 이상 실행될 경우 홀수 번째는 reverse로, 짜수 번째는 normal로 진행합니다.

 

애니메이션은 키 프레임에 정의한 순서대로 진행됩니다. 그런데 키 프레임을 어떠한 이유로 건드리지 못할 때, 애니메이션의 진행 방향을 수정하고 싶다면 사용합니다. 

      animation-direction: reverse;

 

animation-timing-function 속성
애니메이션의 속도를 지정할 때 사용합니다. 작동 방식이 transition-timing-function 속성과 동일합니다.

 

animation 속성으로 한 번에 지정하기

모든 애니메이션 속성은 단축 속성인 animation 속성으로 한 번에 작성할 수 있습니다.

animation:<name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

변형 효과 적용하기

전환 및 애니메이션 속성은 요소의 속성을 변하게 하는 것이 주 목적이고 요소의 크기를 변경하거나 위치를 이동하거나 회전시키는 것처럼 요소 자체를 변하게 하려면 변형 효과 속성을 사용해야 합니다.

 

transform 속성

요소에 특정 변형 효과를 지정하는데 사용되며, 속성값에는 변형 효과가 정의된 다양한 함수를 사용 목적에 맞게 지정하면 됩니다.

함수 설명
translate(x,y) 요소를 현재 위치에서 x(x축)와 y(y축)만큼 이동합니다. 
translateX(n) 요소를 현재 위치에서 n만큼 x축으로 이동합니다.
translateY(n) 요소를 현재 위치에서 n만큼 y축으로 이동합니다.
scale(x,y) 요소를 x(x축)와 y(y축)만큼 확대 또는 축소합니다.
scaleX(n) 요소를 n만큼 x축으로 확대 또는 축소합니다.
scaleY(n) 요소를 n만큼 y축으로 확대 또는 축소합니다.
skew(xdeg, ydeg) 요소를 x축과 y축으로 xdeg, ydeg (각도)만큼 기울입니다.
skewX(deg) 요소를 deg(각도)만큼 x축 방향으로 기울입니다.
skewY(deg) 요소를 주어진 deg(각도)만큼 y축 방향으로 기울입니다.
rotate(deg) 요소를 deg(각도)만큼 회전합니다.

 

2차원 좌표로 이동하기

 

translate () 함수는 요소를 현재 위치에서 일정 거리만큼 이동하고 싶을 때 사용합니다. x축과 y축, 두 방향으로 동시에 이동합니다. 

만약, 한 방향으로만 이동하고 싶다면 translateX() - x축 / translateY() - y축 으로 작성하면 됩니다.

이때, 인자를 양수로 주면 x축은 오른쪽 y축은 아래쪽으로 이동합니다.

왼쪽이나 위쪽으로 이동하고 싶다면 값을 음수로 주면 됩니다.

div:hover{
      transform:translate(100px, 200px); /* 오른쪽으로 100px, 아래쪽으로 200px 이동 */
    }

 

2차원 확대 또는 축소하기

 

scale() 함수는 요소를 x축 및 y축 방향으로 확대하거나 축소할 수 있습니다.

이때, 한 방향으로만 확대 및 축소 스타일을 적용하고 싶다면 scaleX () 또는 scaleY() 로 적용할 수 있습니다.

숫자의 작성 범위는 0보다 크고 1보다 작은 소수점을 적으면 요소의 크기가 축소됩니다.

div:hover{ /* 마우스를 올리면 확대 */
      transform:scaleX(2);
      transform:scaleY(2)
      x, y의 값이 같으면 scale(2)라고 적어도 됩니다.
       transform:scale(2, 2);
     
    }

 

2차원 기울이기

요소를 기울이고 싶을 때는 skew () 함수를 사용합니다. skew () 함수에는 각도를 인자로 넣는데, 음수로 넣으면 양수로 적었을 때와 반대 방향으로 됩니다. 만약, 한 방향으로만 지정하고 싶다면 skewX() 와 skewY() 함수를 사용합니다.

  div:hover{
      transform:skew(30deg, 30deg);
    }

 

다음과 같이 작성하면 div 요소에 마우스를 올렸을 때 요소가 skew () 함수로 x축과 y축 방향으로 각각 30도씩 기울어지게 됩니다.

 

2차원 회전하기

rotate() 함수를 속성값으로 사용하면 요소를 회전할 수 있습니다. 양수 값을 넣으면 오른쪽으로 회전하고, 음수 값을 넣으면 왼쪽으로 회전합니다.

.box:hover{ /* 마우스를 올리면 회전 */
      transform:rotate(30deg);  /* 오른쪽으로 회전 */
    }

 

transform-origin 속성

rotate () 함수는 회전의 중심을 기준으로 회전하게 되는데 이 기준점을 transform-origin 속성으로 시작하는 기준점을 설정합니다. 그래서 기준점을 바꾸게 되면 변형 효과가 다르게 적용됩니다. 변형 기준점은 transform-origin 속성으로 변경 가능합니다.

transform-origin:<x축 위치> <y축 위치>;
축 속성값 설명
x축 left 왼쪽을 기준점으로 잡습니다.
center 중앙을 기준점으로 잡습니다.
right 오른쪽을 기준점으로 잡습니다.
y축 top 위쪽을 기준점으로 잡습니다.
center 중앙을 기준점으로 잡습니다.
bottom 아래쪽을 기준점으로 잡습니다.

웹 폰트와 아이콘 폰트 사용하기

글꼴은 시스템에 기본으로 설치된 것도 많지만, 시스템에 없는 글꼴도 많습니다. 웹 폰트는 인증된 기관 또는 회사에서 웹 서버에 올려 놓은 폰트를 말합니다. 검색창에 '구글 웹 폰트' 혹은 'https://fonts.google.com'을 직접 입력하여 들어갈 수 있습니다.

 

{구글 폰트에서 글꼴 검색}

1. 원하는 글꼴을 검색 혹은 선택합니다.

2. select this style로 글꼴의 스타일을 선택합니다.

3. 구글 폰트를 사용하는 방법으로 link 태그와 @import 문이 있습니다. 둘 중 아무거나 선택해서 사용합니다. 여기서는 @import문을 사용하겠습니다.

<style>
    .poppins{
      font-family:"Poppins", sans-serif;
    }
    .varela{
      font-family:"Varela Round", sans-serif;
    }
  </style>
</head>
<body>
  <p class="poppins">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  <p class="varela">Lorem ipsum, dolor, sit amet consectetur adipisicing elit.</p>
</body>

 

@import 문의 코드를 그대로 복사하여 style 태그 최상단에 넣어 줍니다. 그러면 다음과 같이 글자에 글꼴이 적용됩니다.

 

{아이콘 폰트 적용하기}

다양한 아이콘을 웹 폰트를 사용하는 것처럼 간단하고 쉽게 사용하는 기술입니다. 다양한 아이콘을 이미지 파일(jpeg,png) 형식이 아닌 css를 적용하는 방식으로 간단하게 사용하여 실무에서 대단히 활용도가 높습니다. 대표적인 아이콘 폰트로는 Font Awesome과 Material Icon이 있는데, 이 책에서는 Font Awesome을 사용합니다. Font Awesome 사이트에서 아이콘 폰트 라이브러리를 내려 받는 방법과 CDN을 사용하여 서버에 올려진 파일을 참조하는 방법이 있습니다. 여기서는 CDN 방법으로 진행하겠습니다.  Font Awesome 라이브러리 주소: https:/cdnjs.com/libraries/font-awesome

 

주소에 접속하여 최상단에 있는 것에서 "copy link tag"를 클릭하여 복사된 코드를 html 파일의 head 태그 안에 붙여 넣습니다.

<!DOCTYPE html>
<html lang="ko">
<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">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer">  
   
</head>
<body>
  <i class="fa-brands fa-facebook"></i>
</body>
</html>

https://fontawesome.com/icons

위 사이트에 접속하여 아이콘을 검색하고 적용합니다. 원하는 요소를 검색하고 HTML 탭에 보이는 i태그를 클릭하면 코드가 복사됩니다. 아이콘 폰트는 웹에서 텍스트로 취급되기 때문에 텍스트 속성으로 텍스트 꾸미기에서 배우 속성을 적용할 수 있습니다.

  <i class="fa-brands fa-facebook"></i>

list-style 속성

ul 또는 ol 태그를 사용하면 글머리 기호나 숫자가 자동으로 붙는데, 이를 리스트 스타일이라고 합니다. 리스트 스타일은 list-style: none;으로 없앨 수 있습니다.

li {
	list-style: none;
}
728x90
반응형
LIST

'프론트엔드(Web) > CSS' 카테고리의 다른 글

CSS 레이아웃  (0) 2024.07.13
CSS 언어의 특징, 텍스트 속성, 박스 모델 및 인라인 속성 특징 및 성격  (0) 2024.07.10
CSS - 기본 문법 및 적용 & 선택자  (0) 2024.07.10

'프론트엔드(Web)/CSS'의 다른글

  • 현재글CSS 배경 및 애니메이션 속성

관련글

티스토리툴바