nika-blog

이번 포스팅에서는 CSS 애니메이션을 공부하면서, keyframe 사용 법 및 다양한 애니메이션 속성에 대해 공부하겠습니다. CSS 애니메이션이란? 여러 개의 CSS 스타일을 부드럽게 전환해준다. @keyframes 키워드 활용 시 시간 순서대로 정밀하게 짜여진 애니메이션 만들기 가능 @keyFrames 활용 1. CSS로 키프레임 블록 만들기 /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% ..

안녕하세요. 오늘은 반응형 웹개발에 대해서 작성해 보려고 해요.  요즘, 워낙 다양한 크기의 기기들이 많아서 반응형 웹개발은 필수가 되었는데요, 다양한 요소가 필요하지만 주요 CSS 속성으로는 다음과 같은 것들을 활용할 수 있습니다.  %자주 사용하는 것으로 % 가 있는데요, 기억해야 할 것은 %는 부모 컨테이너의 영향을 받기 때문에,100% 라고하면, 부모 컨테이너의 100%가 되는 것입니다.  vh대신, vh 라고 하면 화면의 높이를 의미하는 것이기 때문에, 100vh 라고 하면 전체화면의 높이가 됩니다.  이 밖에도 flex gird, flex box, vw 등을 사용할 수 있습니다. 화면 크기에 따라 박스 배치를 바꾸고 싶다면 Media Queries를 사용할 수 있는데요, 보통은 3가지 크기에 ..

안녕하세요. css에서 요즘 가장 핫한 속성이 flexbox라고 생각이 드는데요,오늘은 flex에 대한 이야기를 포스팅해보겠습니다.  먼저 flexbox에서 주로 사용하는 속성들은 다음과 같습니다. displayflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content위 속성들을 이용해서 flexbox 를 유용하게 사용할 수 있을 것 같아요. 자세한 정보는 MDN에서 확인할 수 있습니다.  축(axis)flexbox 사용시 꼭 알아야 하는 개념은 축 인데요, 그래프에서 x축, y축 하는 것처럼 main axis 와 cross axis를 잘 알아야 합니다.  main axis : 주축은 flex-direction에 의해 정의되며 4개의 ..