[개발일지 2022.5.26] CSS 라이브러리 소개- animiate CSS, imagehover CSS, loading.io, hint.css, Skeleton 등
1.학습한 내용
1)고양이 블로그 Cat Blog
1-1) aside
이번에는 웹페이지의 옆을 꾸며줄 aside부분을 만들게 되었다.
1-2)footer
웹페이지의 아래를 꾸며주는 footer 부분을 만들었다.
1-3)미디어쿼리 mediaquery
width가 599이하일때는 aside가 아래에 나오다가
width 가 600일때는 aside가 옆으로 이동을 하게된다.
2)기타 기능들
1)에밋 emmet.io
emmet.io은 코딩을 빠르게 자동완성 해주는 기능이다.
기존에 쓰고있던 방식도 있지만, 자동완성을 하게되는것으로 코드를 쓰는 시간을 단축시켜준다.
위의 사진 외의 기능은 docs.emmet.io/cheat-sheet/에서 확인할수있다.
2)변수
왼쪽의 코드를 오른쪽과 같이 변수를 사용하는것으로 대입을 시켜줄수있다.
짧은 코드일때는 왼쪽이 더 간편할수있지만, 길면 길어질수록 변수를 사용하는것이 간편해진다.
주의점으로는 대소문자에 따라서 다른 변수로써 작용을 하며
커스텀속성에는 background-color,header 같은 속성명을 넣을수없다.
또한 호출한뒤 단위를 덧붙이는것으로는 적용이 되지않지만, *1rem 과 같은 방식으로 해결이 가능하다.
3) Sass
CSSㄹ르 보조하는 새로운 도구이며.
파일 확장자는 scss , sass 이다.
scss를 작성한후 css파일로 변환을 하여서 사용하는 방식인데.
장점으로는 셀렉터 부모 자식간의 관계를 네스트로 구현이 가능하며,
변수로 값을 다시 사용할수가 있다.
또한 파일을 여러개로 분할을 해서 사용하는것으로 용도에 따라서 다른 곳에서 활용이 가능하다.
3-1)Sass -VSC 에서 실습
비쥬얼스튜디오 코드에서 DartJS sass compiler and sass watcher 를 설치하는것으로 사용이 가능하다.
이런 확장프로그램을 설치한후 scss파일을 작성해고 저장을 하게되면
사진과 같이 여러가지의 css파일과 map파일이 만들어지게된다.
해당 scss 파일을 저장하게되면
사진과같은 css파일이 만들어지게된다.
4)mixin
function 과 비슷한 기능으로, 미리 저장한 스타일을 필요한곳에서 불러와서 재사용하는것이 가능하다.
스타일을 저장할때는 @mixin 으로 저장을하고, 불러올때는 @include 으로 불러온다.
5)폰트 표시 단위
px: 고정크기.
픽셀단위이며, 웹페이지에서 지정이 되지않았을때는 기본 16px로 설정되어있다.
em:상대 크기(기준:부모요소)
부모크기에 따라서 배율로서 적용이 된다.
이때 em을 사용할때 주의할점은 중첩적용이 가능하다는 점으로,
하나의 범위에 여러번 적용이 되어서 1.5배가 아닌 2.25배. 3.75배 등이 될수도있는것을 주의하여야한다.
rem:Root em , 위의 중첩이 되는 문제를 해결하기 위한 단위로 중첩적으로 적용이 되는것이 아니라 root에서 설정한 값에서만 배율이 적용이 된다.
6) SVC
화질에 영향을 받지 않는 벡터이미지
스타일 수정 용이
xml 기반의 문서
애니메이션,css3 효과 적용 가능
움직이는 것을 표현이 가능한 벡터이미지이다.
기본적인 svg 아이콘은 해당 링크 에서 다운로드해서 사용할수있다.
2)CSS 라이브러리
2-1)Animate.CSS
사용하기 쉬운 CSS 애니메이션 라이브러리이다.
https://animate.style
$ npm install animate.css --save 를 통해 설치를하고
import 'animate.css'; import를 하는것으로
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
원하는 기능을 적용시킬수있다.
2-2)imagehover CSS
https://imagehover.io/
마우스를 올렸을때 작동하는 애니메이션을 모아놓은 라이브러리이다.
2-3)loading.io
loading.io
로딩 화면과 로딩 프로그래스를 모아놓은 라이브러리이다.
2-4)hint.css
힌트
https://kushagra.dev/lab/hint
css에 도움을 주는 툴팁 라이브러리로, 해당 링크에서 파일을 다운로드해서 사용이 가능하다.
2-5)Skeleton
getskeleton.com
웹페이지의 뼈대를 만드는것에 도움을 주는 라이브러리이다.
해당 링크에서 파일을 다운로드해서 사용이 가능하다.
2.학습내용 중 어려웠던 점
코드를 작성하던 도중 newsletter 부분의 등록버튼부분이 혼자 줄바꿈이 되는 문제가 생기게되었다.
또한 Sass 확장자가 작동을 하지 않았다.
3.해결방법
https://wepplication.github.io/tools/compareDoc/
이는 위의 링크에서 코드를 비교하는것으로 해결할수 있었다.
.newsletter-form 부분의 form이 fotm 으로 오타가 입력되어서 display:flex 가 적용이 되지 않아서 생긴 문제였다.
sass 확장자의 경우에는 별도로 SASS 라는 확장프로그램의 설치가 필요하며.
sass는 scss 가 css형식으로 작성하는것과는 다르게 파이썬형식으로 작동을 하는것을 알수있었다.
두가지 모두 작동하는 기능은 같기 때문에 보다 보기쉬운 scss를 쓰는 쪽으로 방향을 잡았다.
4.학습소감
css 에도 다양한 라이브러리가 있다는 것을 배울수 있게되었다.
또한 이전날 생각을 해보았던 화면의 너비에 따라서 aside가 아래와 오른쪽을 이동하게되는 코드를 나는 display:grid를 이용하여서 이동을 하도록 미디어쿼리를 만들었지만, 수업에서는 display:flex를 이용하여서 이동을 하는 차이를 가졌다.
이때 display:grid를 사용하는 방식은 본문의 내용을 div로 다시 묶어내는 과정이 필요했지만, display:flex를 사용하는 방식은 추가로 작업을 하지않고 가능하였다.
같은 표현도 다른 방법으로 가능하다는것을 알게되었다.
하지만 웹페이지의 길이가 길어질수록 어느 쪽이 더 나은지를 비교를 해보아야 할듯하다.
