본문 바로가기

✍🏻_Study15

[CSS] clippath로 도형 쉽게 만들기, clippy 추천 (clip-path maker, css clipping mask) css에서 다양한 도형을 만든다는 것은 굉장히 귀찮은 작업이다. 그렇지만 clippy를 사용한다면 뚝딱 만들 수 있음! Clippy — CSS clip-path maker About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape bennettfeely.com clippy의 첫 화면이다. 사용방법은 간단하다. .. 2023. 2. 10.

lottie 사용방법 (after effect로 만든 애니메이션을 web으로) 다들 알고 있는데 나만 몰랐던 걸까?ㅋㅋㅋ 애니메이션을 컨트롤할 수 있는 기깔난 애를 발견했다. 바로 airbnb에서 만들 lottie !! 영상을 잘 다룰 줄 아는 웹디자이너라면 더할나위 없이 좋은 툴인듯하다. (영상몰라도 테스트는 쌉가능ㅇㅇ) Lottie 란? Lottie는 벡터 애니메이션을 위한 파일 형식이며 실루엣 애니메이션의 독일 선구자인 Charlotte Reiniger의 이름을 따서 명명. 이라고 사전에 나온다. 그냥 쉽게 말해서 백터 애니메이션을 영상이 아닌 lottie를 이용해서 web, Android, iOS 등에서 쓸 수 있는 툴이라고 보면 된다. 원한다면, mp4나 gif로 넣을 수도 있다. 그런데 lottie를 쓰면 좋은 이유중에 하나가 클릭하거나, 스크롤에 따른 움직임을 준다던가.. 2022. 8. 9.

[notion icon] 노션 링크아이콘 추천 사이트 모음 요새 내가 매일 쓰는 노션! 다들 제발 썼으면 좋겠는 노션!! 노션에는 좋은 기능들이 진짜 많은데 왜 안쓸까 ㅠㅠㅠ 아무튼 노션을 쓰다보면 콜아웃블록이나 일반 이모지를 넣는 구간에 다른 아이콘들을 쓰고 싶을때가 있다. 그럴 때 이미지를 업로드해도 되지만 그것은 너무 귀찮은 일... 맹그는거 귀차늠.. 뭔가 대중적인 아이콘이어도 상관없다 할때에 쓸 수 잇는 아이콘 사이트 추천! 여기는 notion.vip라는 곳인데 심플한 아이콘이 많다. 사용하는 방법은 원하는 아이콘 하단에 있는 카피 누른다...ㅎ 노션으로 콜아웃블록을 만든 다음, 이모지 클릭 후 링크탭에 들어가 붙여넣기...ㅎ 끗.. 그럼 이렇게 바로 적용됨!! 쉽쥬? 사이트 몇개 더 추천드림 👍🏻 Notion Icons The easiest way t.. 2022. 8. 3.

[css]animista로 keyframes animation 빠르게 적용(jello, wobble,bounce 등) 사이트를 만들다 보면 애니메이션 처리하는 게 생각보다 귀찮고 구상하기가 번거로울때가 많다. 그럴 때 손쉽게 쓸 수 있는게 animista!! animista에서는 애니메이션에 관련된 여러가지 셋팅값들을 가져다 쓸 수 있다. UI도 심플해서 조금만 만져보면 쉽게 파악할 수 있을 듯. 좌측에 다양한 셋팅을 만져보면 중앙에 요소의 움직임을 바꿔볼 수 있고 이 셋팅값이 맘에 든다고 하면 우측에 중괄호{}로 되어 있는 아이콘을 클릭한다. 클릭하면 아래와 같이 팝업창이 나온다. 전부다 css로 되어 있어서 만지기가 훨씬 수월하고 간단하다. 축약형을 원한다면 minify을 클릭해서 코드를 사용하고, 벤더프리픽스 형태로도 가능하다. 애니메이션 처리 뿐만 아니라 text-shadow, 움직이는 backgroud grad.. 2022. 8. 3.

[라이브러리] 간단하게 css로 animate 적용하는 Bounce.js css로 animation 처리를 할 수 있지만, 부드럽고 자연스럽게 넣는 게 생각보다 어려웠다. 특히나 아기자기한 느낌을 내고 싶을 때, 젤리형태나 바운스된 느낌을 넣고 싶을때는 ease나 cubic-bezier로 커스텀 한다고 할지라도 한계가 있었다. 그래서 찾아본 결과 css만으로도 애니메이션 효과를 넣을 수 있는 bounejs 사이트를 알게 됐다. 사용해보니까 굳이 js를 거치지 않고 써도 되는건데 왜 이름이 bounejs인지 모르겠넹 ㅇ_ㅇ....(코알못) 일단 사이트진입 ㄱㄱ 왼쪽이 효과를 선택할 수 있는 부분이고, 중앙이 미리보기와 소스를 가져갈 수 있는 형태로 되어 있는 듯하다. 애니메이션 효과 적용 왼쪽에 select preset을 누르면 기본적으로 셋팅되어 있는 다양한 효과들을 볼 수 .. 2022. 5. 10.

[css] 간단하게 css로 3D card 뒤집는 애니메이션 효과 양면이 서로 다른 카드의 형태를 겹쳐놓고 hover했을 때, 카드 뒤집어지는 효과가 적용되도록 하고 싶었다. css3에서 perserve-3d등을 이용해서 구동할 수 있다고 한다. 주석처리된 부분들만 잘 넣으면 아마 잘 구동되지 싶다. (인터넷익스플로러 x) 1. 구조 front back 원근감을 줄 수 있는 영역이(section)가 있어야 하고, 카드 2장을 감쌀 부모(.card)와 자식으로 앞면(.front)과 뒷면(.back)을 만들어야 한다. 2. 스타일 1) 요소 영역 배치 및 위치 section { width: 100vw; height:100vh; background: indianred; position: relative; } .card { position: absolute; left:50%;.. 2022. 3. 18.

mac os sass install, 에러(error) 해결방법& 맥 sass설치하기! SASS 설치를 위한 조건 sass를 설치하기 위해서는 Ruby가 있어야 한다고 한다. 다행히 맥에서는 기본으로 Ruby가 설치되어 있고, 윈도우의 경우에는 sass 설치 전, Ruby 설치를 해야한다. 그럼에도 mac에서 sass설치가 제대로 되지 않아 몇시간 동안 시간을 잡아먹었다. 컴맹인 나는 이유도 모른채 열심히 찾고 찾아서 겨우 설치에 성공했다. 설치에 실패하는 이유? 잘은 모르겠지만 찾아보니 대충 이러한 이유들이라고 한다. 1. 루비 버전이 너무 낮은 것 2. xcode와 같은 것들이 설치되어야만 하는것(이유 멀라염ㅇ_ㅇ) 3. mac os 버전에 따라 다른 것 일단 나의 경우에는 암호같은 터미널도 너무 낯설었고, 패스워드에서 멘붕이 잠시 왔다. 누군가가 말안해줬더라면, 아마 설치를 포기했을 .. 2021. 3. 23.

웹퍼블리셔과정 6~10일차_transition, transform 이 과정은 HTML와 CSS를 정말 기초적인 것들만 알려주신다. 이론적인 설명도 간단하게 적어주시고 바로 실습하는 느낌? 그래서 뭔가 블로그에 정리하기가 쉽지않다. 그냥 내가 이해한대로 적어야할 것 같은 느낌.. 그래도 10일안에 20개정도의 레이아웃을 만들어 본거 같다. 그래서 조금 더 빨리 숙달되는 느낌이랄까? 시간이 지날수록 새로운 것을 배운다는 느낌은 없지만 레이아웃을 좀 더 빨리 짤 수 있게 된 느낌이다. 물론 현업에 들어가기엔 어림도 없겠지만! 워낙 귀찮아하는 탓에 하루하루 적지 못하고 또다시 몰아서 적게 됐다ㅠㅠ 최근엔 트랜지션, 트랜스폼, 미디어쿼리를 배웠다. 어렵지 않았고 금방 터득할 수 있었다. 미디어쿼리를 쓸때 하나씩 아다리(?)가 맞을 때마다 희열을 느껴져서 변태인가 싶...ㅋㅎ.... 2021. 3. 4.

[후기] 웹디자인기능사 필기시험 합격과 필기요점정리, 요약 취업에 도움되는 자격증은 아니지만 띵까띵까 노는 게 한심했고, 목표를 가져야 공부를 할 것 같아서 도전한 웹디자인기능사 시험! 그럼에도 불구하고 느긋하게 놀다가 2주전에 시작하려고 한참 놀다가, 갑자기 할머니가 돌아가시고 정신없는 한주를 보내느라 공부할 수 있는 시간은 일주일도 안되어버렸다. 미리미리 공부할 걸이라는 후회가 됐지만 이미 이렇게 된걸 우째...ㅜㅜ 그래도 최대한 해보는 게 좋을 것 같아서 맘잡고 공부했다. 기본적인 개념을 알고 싶어서 이기적 책을 한권 구매해서 봤고, 문제은행식이라 그래서 굳이 최신판을 보진 않았다. 신기하게도 고딩때 수업에서 얼핏 들었던 내용들이였고 그게 괜히 배운게 아니었구나 싶었닼ㅋㅋㅋ 그렇게 개념부분을 가볍게 2번 읽었고 본격적으로 문제를 풀어봤다. 책상에 앉아있기 .. 2021. 2. 26.

UI/UX 웹퍼블리셔 과정 3~5일차 블로그는 나같이 의지약한 사람은 하기 힘든 것 같다. 3-5일 과정은 계속 HTML,CSS 무한 반복이었다. 한 5~10개 정도 예제를 주시고 20분 내에 작업해 보라는 미션을 계속 주셨다. 대체로 시간내에 다 레이아웃을 짯고 실수하는 것들도 더러 있었다. 그나마 나는 ㄷㅈㅇㄴㅅ에서 웹퍼블리싱 단기과정을 들은 경험으로 기본 개념이 잡혀 있어서 금방 따라갈 수 있었는데, 아마 처음듣는 사람은 따라가기 쉽지 않겠다는 생각이 들었다. 커리큘럼없이 흘러가는 느낌이랄까... 게다가 온라인 수업이니 질문도 제대로 못하고 넘어가는 수강생들도 많겠구나 싶었다. 아무튼 그래서 3~5일 수업은 별거 없이 쓱 흘러가버렸다. 빨리 스크립트 배우고 포폴 만들어서 취업하고 싶다. 7월까지 어떻게 기다려야 하나ㅏㅏㅏㅏ 2021. 2. 25.

UI/UX 웹퍼블리셔 과정 2일차, float과 position 아무래도 블로그에 올리는건 그리 오래하지 못할 것 같다. 2,3일째인데 벌써 밀려버리다니... 어제는 배경, 색상표기, float, position등에 대해서 배웠다. 원래 알던 내용이라 조금 지루하긴 했지만, 새로 다시 복습한다는 느낌으로 집중했다. 이렇게 수업 배울수록 내가 하고 싶은 것을 잘 찾은 느낌이다. 디자인도 재밌지만, 너무 주관적인 분야다 보니 작업이 내 뜻대로 안나올때, 또 잘 나와도 남들이 보기에는 별로인 순간들이 있을 때면 의욕도 사라지고, 허무함도 느낄 때도 있어서 어쩔때는 다 때려치고 싶다는 생각을 가질 때가 있다. 그래서 답이 있는 코딩 작업이 재미있게 느껴진다. 그래서 이렇게 복습하면서 다시 들어도 재밌고, 과제를 받을때면 뚝딱뚝딱 만들어지는 결과물이 나올때면 더 큰 흥미를 느.. 2021. 2. 18.

[수업] 내돈내산! 클래스101 블렌더(blender) 3D 수업 클래스101에서 블렌더 수업을 듣기 시작했다. 역시 백수가 되니 돈은 숭숭 나가지만 이것저것 해볼 수 있어서 좋다! 포폴에 간단하게 넣어 보고 싶기도 했고, 작업물에 3D 이미지가 있으면 아무래도 작업물이 훨씬 사는 느낌이기 때문에 깊이 있게 배우진 않더라도 간단하게라도 배워보고 싶어서 시작했다. 나는 조금 할인받아서 10만원 초반대였던거 같은데 지금은 15만원 정도! 수업영상의 버전과 현재 블렌더 제공 버전도 달라서 낮은 버전으로 다시 깔아야 했고, 선생님은 윈도우기반이고 나는 맥 기반이라 설명하시는 단축키에 차이가 좀 있어서 여간 힘들었다.😰 하지만 돈쓴게 있기 때문에 구글링도 하고, 댓글로 여쭤보면서 했는데 다행히도 어느정도 단축키에도 적응 됐다. 그리고 달범 선생님의 답변은 대부분 하루안에 답변이.. 2021. 2. 16.

이전 1 2 다음

티스토리툴바