티스토리

룰루

검색하기

블로그 홈

룰루

lulu-g.com/m

정부지원, 청년정책, 생활정보

구독자: 20

방명록 방문하기

반응형

주요 글 목록

[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의 첫 화면이다. 사용방법은 간단하다. .. 공감수 0 댓글수 0 2023. 2. 10.
lottie 사용방법 (after effect로 만든 애니메이션을 web으로) 다들 알고 있는데 나만 몰랐던 걸까?ㅋㅋㅋ 애니메이션을 컨트롤할 수 있는 기깔난 애를 발견했다. 바로 airbnb에서 만들 lottie !! 영상을 잘 다룰 줄 아는 웹디자이너라면 더할나위 없이 좋은 툴인듯하다. (영상몰라도 테스트는 쌉가능ㅇㅇ) Lottie 란? Lottie는 벡터 애니메이션을 위한 파일 형식이며 실루엣 애니메이션의 독일 선구자인 Charlotte Reiniger의 이름을 따서 명명. 이라고 사전에 나온다. 그냥 쉽게 말해서 백터 애니메이션을 영상이 아닌 lottie를 이용해서 web, Android, iOS 등에서 쓸 수 있는 툴이라고 보면 된다. 원한다면, mp4나 gif로 넣을 수도 있다. 그런데 lottie를 쓰면 좋은 이유중에 하나가 클릭하거나, 스크롤에 따른 움직임을 준다던가.. 공감수 0 댓글수 0 2022. 8. 9.
[notion icon] 노션 링크아이콘 추천 사이트 모음 요새 내가 매일 쓰는 노션! 다들 제발 썼으면 좋겠는 노션!! 노션에는 좋은 기능들이 진짜 많은데 왜 안쓸까 ㅠㅠㅠ 아무튼 노션을 쓰다보면 콜아웃블록이나 일반 이모지를 넣는 구간에 다른 아이콘들을 쓰고 싶을때가 있다. 그럴 때 이미지를 업로드해도 되지만 그것은 너무 귀찮은 일... 맹그는거 귀차늠.. 뭔가 대중적인 아이콘이어도 상관없다 할때에 쓸 수 잇는 아이콘 사이트 추천! 여기는 notion.vip라는 곳인데 심플한 아이콘이 많다. 사용하는 방법은 원하는 아이콘 하단에 있는 카피 누른다...ㅎ 노션으로 콜아웃블록을 만든 다음, 이모지 클릭 후 링크탭에 들어가 붙여넣기...ㅎ 끗.. 그럼 이렇게 바로 적용됨!! 쉽쥬? 사이트 몇개 더 추천드림 👍🏻 Notion Icons The easiest way t.. 공감수 0 댓글수 0 2022. 8. 3.
[css]animista로 keyframes animation 빠르게 적용(jello, wobble,bounce 등) 사이트를 만들다 보면 애니메이션 처리하는 게 생각보다 귀찮고 구상하기가 번거로울때가 많다. 그럴 때 손쉽게 쓸 수 있는게 animista!! animista에서는 애니메이션에 관련된 여러가지 셋팅값들을 가져다 쓸 수 있다. UI도 심플해서 조금만 만져보면 쉽게 파악할 수 있을 듯. 좌측에 다양한 셋팅을 만져보면 중앙에 요소의 움직임을 바꿔볼 수 있고 이 셋팅값이 맘에 든다고 하면 우측에 중괄호{}로 되어 있는 아이콘을 클릭한다. 클릭하면 아래와 같이 팝업창이 나온다. 전부다 css로 되어 있어서 만지기가 훨씬 수월하고 간단하다. 축약형을 원한다면 minify을 클릭해서 코드를 사용하고, 벤더프리픽스 형태로도 가능하다. 애니메이션 처리 뿐만 아니라 text-shadow, 움직이는 backgroud grad.. 공감수 0 댓글수 0 2022. 8. 3.
[라이브러리] 간단하게 css로 animate 적용하는 Bounce.js css로 animation 처리를 할 수 있지만, 부드럽고 자연스럽게 넣는 게 생각보다 어려웠다. 특히나 아기자기한 느낌을 내고 싶을 때, 젤리형태나 바운스된 느낌을 넣고 싶을때는 ease나 cubic-bezier로 커스텀 한다고 할지라도 한계가 있었다. 그래서 찾아본 결과 css만으로도 애니메이션 효과를 넣을 수 있는 bounejs 사이트를 알게 됐다. 사용해보니까 굳이 js를 거치지 않고 써도 되는건데 왜 이름이 bounejs인지 모르겠넹 ㅇ_ㅇ....(코알못) 일단 사이트진입 ㄱㄱ 왼쪽이 효과를 선택할 수 있는 부분이고, 중앙이 미리보기와 소스를 가져갈 수 있는 형태로 되어 있는 듯하다. 애니메이션 효과 적용 왼쪽에 select preset을 누르면 기본적으로 셋팅되어 있는 다양한 효과들을 볼 수 .. 공감수 0 댓글수 0 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%;.. 공감수 0 댓글수 0 2022. 3. 18.
mac os sass install, 에러(error) 해결방법& 맥 sass설치하기! SASS 설치를 위한 조건 sass를 설치하기 위해서는 Ruby가 있어야 한다고 한다. 다행히 맥에서는 기본으로 Ruby가 설치되어 있고, 윈도우의 경우에는 sass 설치 전, Ruby 설치를 해야한다. 그럼에도 mac에서 sass설치가 제대로 되지 않아 몇시간 동안 시간을 잡아먹었다. 컴맹인 나는 이유도 모른채 열심히 찾고 찾아서 겨우 설치에 성공했다. 설치에 실패하는 이유? 잘은 모르겠지만 찾아보니 대충 이러한 이유들이라고 한다. 1. 루비 버전이 너무 낮은 것 2. xcode와 같은 것들이 설치되어야만 하는것(이유 멀라염ㅇ_ㅇ) 3. mac os 버전에 따라 다른 것 일단 나의 경우에는 암호같은 터미널도 너무 낯설었고, 패스워드에서 멘붕이 잠시 왔다. 누군가가 말안해줬더라면, 아마 설치를 포기했을 .. 공감수 2 댓글수 1 2021. 3. 23.
웹퍼블리셔과정 6~10일차_transition, transform 이 과정은 HTML와 CSS를 정말 기초적인 것들만 알려주신다. 이론적인 설명도 간단하게 적어주시고 바로 실습하는 느낌? 그래서 뭔가 블로그에 정리하기가 쉽지않다. 그냥 내가 이해한대로 적어야할 것 같은 느낌.. 그래도 10일안에 20개정도의 레이아웃을 만들어 본거 같다. 그래서 조금 더 빨리 숙달되는 느낌이랄까? 시간이 지날수록 새로운 것을 배운다는 느낌은 없지만 레이아웃을 좀 더 빨리 짤 수 있게 된 느낌이다. 물론 현업에 들어가기엔 어림도 없겠지만! 워낙 귀찮아하는 탓에 하루하루 적지 못하고 또다시 몰아서 적게 됐다ㅠㅠ 최근엔 트랜지션, 트랜스폼, 미디어쿼리를 배웠다. 어렵지 않았고 금방 터득할 수 있었다. 미디어쿼리를 쓸때 하나씩 아다리(?)가 맞을 때마다 희열을 느껴져서 변태인가 싶...ㅋㅎ.... 공감수 0 댓글수 2 2021. 3. 4.
UI/UX 웹퍼블리셔 과정 3~5일차 블로그는 나같이 의지약한 사람은 하기 힘든 것 같다. 3-5일 과정은 계속 HTML,CSS 무한 반복이었다. 한 5~10개 정도 예제를 주시고 20분 내에 작업해 보라는 미션을 계속 주셨다. 대체로 시간내에 다 레이아웃을 짯고 실수하는 것들도 더러 있었다. 그나마 나는 ㄷㅈㅇㄴㅅ에서 웹퍼블리싱 단기과정을 들은 경험으로 기본 개념이 잡혀 있어서 금방 따라갈 수 있었는데, 아마 처음듣는 사람은 따라가기 쉽지 않겠다는 생각이 들었다. 커리큘럼없이 흘러가는 느낌이랄까... 게다가 온라인 수업이니 질문도 제대로 못하고 넘어가는 수강생들도 많겠구나 싶었다. 아무튼 그래서 3~5일 수업은 별거 없이 쓱 흘러가버렸다. 빨리 스크립트 배우고 포폴 만들어서 취업하고 싶다. 7월까지 어떻게 기다려야 하나ㅏㅏㅏㅏ 공감수 0 댓글수 2 2021. 2. 25.
UI/UX 웹퍼블리셔 과정 2일차, float과 position 아무래도 블로그에 올리는건 그리 오래하지 못할 것 같다. 2,3일째인데 벌써 밀려버리다니... 어제는 배경, 색상표기, float, position등에 대해서 배웠다. 원래 알던 내용이라 조금 지루하긴 했지만, 새로 다시 복습한다는 느낌으로 집중했다. 이렇게 수업 배울수록 내가 하고 싶은 것을 잘 찾은 느낌이다. 디자인도 재밌지만, 너무 주관적인 분야다 보니 작업이 내 뜻대로 안나올때, 또 잘 나와도 남들이 보기에는 별로인 순간들이 있을 때면 의욕도 사라지고, 허무함도 느낄 때도 있어서 어쩔때는 다 때려치고 싶다는 생각을 가질 때가 있다. 그래서 답이 있는 코딩 작업이 재미있게 느껴진다. 그래서 이렇게 복습하면서 다시 들어도 재밌고, 과제를 받을때면 뚝딱뚝딱 만들어지는 결과물이 나올때면 더 큰 흥미를 느.. 공감수 0 댓글수 0 2021. 2. 18.
[수업] 내돈내산! 클래스101 블렌더(blender) 3D 수업 클래스101에서 블렌더 수업을 듣기 시작했다. 역시 백수가 되니 돈은 숭숭 나가지만 이것저것 해볼 수 있어서 좋다! 포폴에 간단하게 넣어 보고 싶기도 했고, 작업물에 3D 이미지가 있으면 아무래도 작업물이 훨씬 사는 느낌이기 때문에 깊이 있게 배우진 않더라도 간단하게라도 배워보고 싶어서 시작했다. 나는 조금 할인받아서 10만원 초반대였던거 같은데 지금은 15만원 정도! 수업영상의 버전과 현재 블렌더 제공 버전도 달라서 낮은 버전으로 다시 깔아야 했고, 선생님은 윈도우기반이고 나는 맥 기반이라 설명하시는 단축키에 차이가 좀 있어서 여간 힘들었다.😰 하지만 돈쓴게 있기 때문에 구글링도 하고, 댓글로 여쭤보면서 했는데 다행히도 어느정도 단축키에도 적응 됐다. 그리고 달범 선생님의 답변은 대부분 하루안에 답변이.. 공감수 0 댓글수 3 2021. 2. 16.
UI/UX 웹퍼블리셔 과정 1일차 * HTML 기본 태그 1. 블럭요소 [종류] , , , , 등 [특징] 전체 너비를 차지한다. 블럭요소와 인라인 요소 전체를 감쌀 수 있다. 너비값을 지정하지 않으며 브라우저 전체를 차지한다. 2. 인라인요소 [종류] , , ,,, 등 [특징] 너비, 높이값에 영향을 받지 않는다. 너비에 영향을 받지 않기 때문에 연속적으로 붙음 인라인 태그는 인라인 태그만 감쌀 수 있다. * CSS 기본 속성값 [폰트] div { font-weigtht: bold; /* 폰트 굵기 */ font-size: 10px; /* 폰트 사이즈 */ line-height: 1.5; /*행간(배수,픽셀 등 단위 설정가능) */ color:red; /* 폰트 색상(16진수로도 색상값 적용가능) */ text-align:right /.. 공감수 0 댓글수 5 2021. 2. 16.
웹퍼블리싱 과정 OT 쉬는동안 자바스크립트를 공부하고 싶었다. 그래서 다양한 방법으로 찾아보다가 하코사에서 오래 스터디를 하신 선생님이 국비지원으로 수업을 한다는 것을 알게 되었고, 시작하려고 했던건 자바스크립트 주말과정이었지만 고민끝에 평일 웹퍼블리셔 과정을 수강하기로 했다. 왜냐하면 취업이 한동안 안될것 같은 이유가 컸다. 또한 디자인만으로는 벌어먹기 힘든 세상이기도 하고, 원래 흥미도 있던 분야이기에 다시 공부를 좀 해보고 싶어졌다. 사실 이전에 국비지원으로 수업을 들은 경험이 있었는데 그때 이후로 다시는 국비지원으로 수업을 듣지 않겠다고 다짐했었다. 하지만 상담도 받아보고, 커리큘럼에서 믿음이 생겨서 한참을 고민한 끝에 수업을 듣기로 했다. 결코 짧은 기간이 아니기 때문에 지금도 사실 걱정 되지만 열심히 해보겠다는 의.. 공감수 0 댓글수 2 2021. 2. 15.
[정보] 무료 목업 찾기 좋은 곳(free mockup) 모바일 디바이스 위주*** 저작권은 작업물마다 다르니 필히 확인하고 사용할 것** 추천 순서 아니고 마구잡이로 나열한 것** 1. 비핸스(behance) 비핸스에 생각했던 것보다 무료 목업이 많다. free mockup iphone, mockup mobile 등으로 검색하면 퀄리티도 좋고, 상당히 많은 목업의 종류가 나온다. 작업자 마다 저작권 범위가 다르니 꼭 확인해보고 사용해야 한다. 2. 목업월드(mockupworld) 종합적으로 목업만 공유되는 사이트여서 보기 편하다. 그런데 무료라고 적혀져 있어도 실제로 선택하면 무료가 아닌 것도 있었고, 회원가입이 필요하거나, 결제 카드를 걸어놔야 하는 번거로움이 있는 목업들이 있어서 잘 골라서... 찾아서... 써야 한드아. 3. 드리블(dribbble) 드.. 공감수 2 댓글수 3 2021. 2. 2.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.