방방이네 블로그

    background-image: url('사진 경로');
    background-size: cover; /* 배경 이미지를 화면에 꽉 채우도록 크기 조절 */
    background-position: center center; /* 배경 이미지를 화면 중앙에 위치 */
    width: 100vw; /* 가로 전체 화면 너비 */
    height: 100vh; /* 세로 전체 화면 높이 */

자바스크립트를 이용하는것이아닌 css로 간단 하고 귀여운 애니메이션을 주는 방법 입니다.

css를 처음 사용하시는 분들을 위해 아주 쉽게 설명해 놨습니다.

css로 애니메이션을 만들수있습니다 간단하게나마 만들수있으며 웹접근성이 뛰어난 css로만으로 제작이 가능합니다.

그것은 바로 @keyframes 을 활용 하시면 됩니다

@keyframes icons-moving {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

라고 css파일에 적어 줍니다

형식은 @keyframes 변수명 { } 이렇게  작성합니다.

@keyframes 으로 설정할 변수명을 적고 {} 중괄호에는 애니메이션이 작동할 처음과 끝을 적어주시면됩니다.

0% { }
50%{ }

100%{ }

저는 이렇게 3분류로 나누었지만 %단위로 더디테일하게 수정할수있습니다

 애니메이션만드는 기본은

from { }
to { }

시작과 끝만 적어주시면 됩니다.

@keyframes icons-moving {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

다시한번 이코드를 보게되면 0%~100%까지 위로 올라갔다가 다시 원위치로 돌아오는 코드입니다

이것을 css선택자를 이용  animation 속성을이용해서 적용 시켜주면 됩니다

.icons {
  
  animation: 1s icons-moving infinite;
  
}

1초동안 icons-moving 을 무한반복 시키는 것입니다.

이렇게 간단하게 적용을 할수있으니 복붙을 해서 사용해보세요

예쁘게 적용된 모습입니다 MDN 사이트에서 보면 더 멋진 속성들과 제어하는방법이있습니다

style.css 파일에 작성 한것 입니다.

@import "reset.css";
@import "header.css";
@import "footer.css";
@import "main.css";

Link 방식 vs @import 방식
결과적으로 보면 같아 보일 수 있겠지만, 사실은 Link 방식을 사용하는 것이 @import 방식을 사용하는 것보다 페이지의 로딩 속도 측면에서 뛰어나다.
@import 방식의 장, 단점
CSS파일 내에 @import를 이용하여 CSS를 연결하는 방식이다.
하나의 CSS파일에 여러개의 페이지 CSS를 로드시켜 편리하다고 생각하면, 편리하다고도 할 수 있다.
그러나 성능을 생각한다면 그리 좋은 방법은 아니다. @import를 많이 사용한다면, 익스플로러에서는 다운로드 순서가 다르게 작동하여 문제가 발생할 수 있으며, 병렬방식이 아닌 직렬방식으로 다운로드 하기때문에 전체 로딩시간이 길어지는 문제점이 있기에, 추천하는 방법은 아니다.
그리고 이 글의 주제처럼 엣지(Edge) 브라우저에서 @import 방식을 사용할 경우 @import된 CSS파일을 적용하지 못한다.

Link 방식의 장, 단점
HTML의 Link태그를 사용하는 CSS연결 방식이다.
필자가 사용하는 CSS연결 방식으로 하나의 파일에 여러 페이지의 스타일을 일괄 수정 및 추가 등 유지/보수에 용이하며, 직렬방식이 아닌 병렬방식으로 다운로드 하기에 로딩속도가 빠르고, CSS파일 여러개를 Link 방식으로 다운로드 하더라도 익스플로러에서 순서가 동일하게 작동한다.
그리고 이 글의 주제처럼 엣지(Edge) 브라우저에서 CSS파일을 다운로드 하지 않는 일이 발생하지 않는다.
사용방법은 아래와 같습니다.

<header class="header">
    <nav class="header-nav">
        <div class="header-nav__button">

        </div>
    </nav>
</header>

이글을 쓰는 시점이 css  이름을 짓는 BEM명명법 이란것을 알게되어 적습니다.

개발을 하시는 모든분들이라면 가장 시간이 많이 소요되는 변수명 짓기 같은것을 쉽게 하기 위함 입니다.

제 블로그에선 최대한 쉽게 설명하기위해 영어 한자를 무분별하게 사용하지않습니다

BEM 이름 짓기 방법

B:  Bolck

E:  Element

M: modifier

순서로 이름을 짓는것입니다.  예나 지금 이나 저는 영어로 써있으면 한국인이라 이해가 빠르지 않음으로

block이 뭐고 Element가 뭐고 Modifier가 뭔지 적는 그런식에 설명은 하지않습니다

BLOCK 큰  범위

Element 중간 범위

Modifier 작은 범위

예를들어 

<header>
    <nav>
        <div>

        </div>
    </nav>
</header>

라는 코드가있다면 

가장큰 범위인 "Header"   중간범위 "nav"  작은범위 "div"  순으로구분하면된다

<header class="header">
    <nav class="header-nav">
        <div class="header-nav__button">

        </div>
    </nav>
</header>

이렇게 설정해주면된다 .

이규칙에서 특이한점은 가장 하위단계인 Modifier를 수정할적에는 __ 언더바2개를 사용합니다.

저부분을 수정자라고하며 수정자의 이름을 지을때에는 언더바__두개를 사용 합니다.

https://heroicons.com

히어로 아이콘! 무료로 아이콘들을 사용할수있습니다 

이홈페이지를 들어가보며면

아이콘들이 나열 되어있는데요

"Copy SVG"를 선택 복사한후

".SVG"라는 확장자로 파일을 만든다음 안의 내용을 복사해준다 

html파일에서 사진파일처럼 사용하면끝!

예) <img src="icon/home.svg" alt="홈모양 아이콘" >

https://dribbble.com