본문 바로가기
728x90
반응형

css7

Intersection Observer API: 스크롤링에 따라 엘리먼트가 짠!하고 나타나게 해주는 애니메이션을 만들고 싶을 때 채용 과제를 만들면서 틈틈이 파이널 프로젝트 개선 작업을 진행하고 있다. 사각사각의 랜딩 페이지를 수정하면서 커스텀 훅을 하나 만들었는데, 이 훅이 하는 일이 바로 마치 스크롤링을 할 때마다 무언가(?!)에 맞추어 페이지 요소들이 짠!하고 나타나는 것처럼 보이는 애니메이션을 추가하는 것이다. 백문이 불여일견! 애니메이션 추가 Before와 After를 살펴보자. 단순한 parallax만 적용되어 있다. Parallax는 그대로, 거기에 스크롤링에 따른 슬라이드인 애니메이션을 더했다 완전 동일한 디자인이지만, 화면에 표시되는 엘리먼트들에 스크롤링에 따른 slide-in 애니메이션을 추가했더니 조금 더 역동적인 모습이 연출되는 것 같다. 물론 메인 랜딩 디자인은 수정할 예정이지만, 그럼에도 불구하고 나의 커.. 2021. 8. 18.
[CSS] 움직이는 하늘 배경 만들기 (linear-gradient, background-position, keyframes animation + pointer-events ) 나무 가득한 화면을 만들어보고 싶다는 생각이 문득 들어서, 가지고 있던 어두운 나무 png파일을 이용하여 숲을 조성(?)했다. 그런데 그냥 하늘을 하자니 너무 심심한 것 같아서, gradient를 준 background에 애니메이션을 추가하면 어두운 하늘, 밝은 하늘 등을 나타낼 수 있지 않을까하는 생각에 적용해봤더니 의외로 괜찮은 것 같았다. 구현된 모습 How-To 위와 같이 배경에 애니메이션을 주는 것의 요지는 아래 두가지이다: 1. 배경을 오버 사이즈로 크게 만든다. 2. 화면에 나오는 배경 부분을 keyframes를 통해 바꿔준다. 즉, 우리 눈에 보이는 뷰 사이즈보다 크게 만든 배경의 다른 부분들을 천천히 움직이면서 집중 조명(?)해주는 방식이라고 생각하면 된다. CSS 태그 하나가 화면을 가.. 2021. 6. 4.
[CSS] 마우스 스크롤 시 자동으로 스냅(snap)되게 하기 (scroll-snap-type & scroll-snap-align) 간혹 웹사이트들을 구경하다보면, 마우스 스크롤 시 자연스럽게 - 마치 다음 페이지로 넘어가는 것처럼 - 다음 페이지의 맨 윗부분이 y = 0 인 부분으로 스냅(snap)되는 것을 볼 수 있다. 뭔가 대단한 기술이 들어간 것인가?!라고 생각했지만, 아주 간단한 CSS로 구현 가능하다는 것을 알게 되었다. 바로 scroll-snap-type과 scroll-snap-align이다. 동작되는 모습 마우스 스크롤을 하면, 원하는 다음 화면을 가득히 똑! 떨어지게 보여준다. // How-To 1단계: 페이지 엘리먼트들을 만든다. 영상의 예시같은 경우 리액트로 만든 것이여서, Home이라는 컴포넌트 안에 className이 home-sections인 을 여러개 반복해서 만들어주었다. 이 하나가 width와 heigh.. 2021. 6. 3.
[CSS] 개발자를 위한 가시성(visibility) 올리는 디자인 꿀팁! (두가지 컬러 조합 추천 사이트 + 크롬 개발자도구 Contrast 참고 방법) 디자인 백그라운드가 없는 개발자들에겐 디자이너의 서포트 없는 개인 작업은 굉장히 어렵게 느끼질 수 있다. 특히, 개인 프로젝트를 만들어야 할 때 아무리 아이디어가 좋아도 디자인이 영 이상하다면 그 누구도 좋게 보지 않을 것이 뻔하기 때문에 디자인에 대한 부담은 배로 다가올 수밖에 없다. 그러다보면 각종 특이한 것들을 마구잡이로 가져다가 쓰게 될 수가 있는데, 강약조절에 실패한 디자인은 정말 보는 이의 마음을 아프게 한다. 예를 들면... 2가지 컬러 조합 추천 사이트 이런 무시무시한 경우를 최대한 피하기 위해서 여러 조언들을 찾아보셨을탠데, 그 조언들 중 자주 들었던 것 중에 너무 여러 색깔을 한번에 사용하지 말라는 것도 분명히 있었을 것이다. 그래서 이번에 아주 좋은 색깔 조합 사이트 하나를 추천하려고.. 2021. 4. 8.
자바 스크립트 세번째 과제, 아티클 프리뷰(article preview) 만들기 / 처음으로 받아 본 커뮤니티 코멘트 2020/12/24 - [Learn to Code] - HTML, CSS, 자바스크립트 배운 뒤 프로젝트 하라고?! 어..어떤 프로젝트?2020/12/24 - [Learn to Code] - 프론트엔드 맨토(Frontend Mentor), 과제 제출하기!2020/12/24 - [Learn to Code] - 프론트엔드 멘토(Frontend Mentor), 과제 결과 리포트!2020/12/26 - [Learn to Code] - 자바 스크립트 두번째 과제, 반응형 FAQ 카드 만들기! 그리고 받은 결과 리포트 프론트엔드 멘토(Frontend Mentor)에서 가장 쉬운 것 부터 선택하여 자바스크립트 프로젝트를 작은 것들부터 만들어보고 있다. 아직 공부를 한지 한 달밖에 되지 않아서 새로운 프로젝트를 할 때.. 2020. 12. 27.
자바 스크립트 두번째 과제, 반응형 FAQ 카드 만들기! 그리고 받은 결과 리포트 프론트엔드 멘토(Frontend Mentor)에서의 두번째 JavaScript 과제를 제출했다. 첫번째로 도전했던건 HTML과 CSS만 사용하는 과제였고, 이번에 처음으로 자바 스크립트를 이용해야하는 걸 해보았다. (사실 튜토리얼 등을 보면서 따라한 것 외에 처음으로 어떠한 가이드 없이 혼자 자바 스크립트를 사용해본 경우였다!) 아직 HTML/CSS/자바 스크립트를 독학한지 한 달밖에 되지 않아서 이 과제도 너무나 어렵게 느껴졌다 ㅠ_ㅠ.. 직접 코드를 계속 짜봐야 된다는게 정말 맞는 말인 것 같다. 2020/12/24 - [Learn to Code] - HTML, CSS, 자바스크립트 배운 뒤 프로젝트 하라고?! 어..어떤 프로젝트? 과제 리소스로 다운받은 zip파일 안에는 디자인 리소스가 담긴 ima.. 2020. 12. 26.
프론트엔드 멘토(Frontend Mentor), 과제 결과 리포트! 자, 그렇다면 Frontend Mentor에서 제출한 과제에 대해 어떤 자동 보고서를 받을 수 있을까? 2020/12/24 - [Learn to Code] - HTML, CSS, 자바스크립트 배운 뒤 프로젝트 하라고?! 어..어떤 프로젝트?2020/12/24 - [Learn to Code] - Frontend Mentor, 과제 제출하기! Frontend Mentor 홈페이지에서, 우측 상단 메뉴들 중 가장 오른쪽의 가장 위에 있는 사진 아이콘이 나(me)를 가리킨다. 그걸 누르면, "Profile", "Settings", Sign out"이 나오는데, 이중 Profile을 선택하자. Profile 창으로 들어가면 기본으로 보여지는 곳이 Overview이다. 그 옆에 Solutions, Comments가.. 2020. 12. 24.
728x90
반응형

티스토리툴바