본문 바로가기
반응형

분류 전체보기51

Daily UI로 100일동안 성장하기 안녕하세요:) 좋은 과제를 하나 소개해드리기 위해서 이렇게 글을 씁니다. 저는 디자인을 전공을 하지 않고, 독학으로 디자인을 공부하여 운 좋게 디자이너로 취업이 되었습니다. 회사에 도움이 되고자 디자인 공부를 혼자 꾸준히 하고 있는 상황입니다. 디자이너분들의 유튜브를 보면서 어떻게 공부해야 하고 무엇을 준비를 해야 하는지 터득하고 있습니다. 그중 어느 유튜브님이 추천해주신 daily UI 100을 추천해주셔서 시작해볼까 합니다. Daily UI 100이란? 디자인이 늘려면 많이 해보고 많이 보는 거라고 다들 그러시더라고요 여유가 있을 때마다 많은 디자인 작품들을 보기는 하는데 제가 직접 해보지를 않아서 늘지 않더라고요 해당 과제는 100일 동안 꾸준히 매일매일 다른 주제와 주제에 관한 힌트를 제공해주면서.. 2021. 6. 14.
CSS 글자속성 글자 속성 글자의 스타일을 지정 📢 들어가기 전 살펴봐야 할 것 더보기 상속이라는 개념을 잡고 가야 될 거 같아서 정리합니다. 상속이란?? 부모요소의 스타일을 자식요소에 전달되는 것을 의미합니다. 부모와 자식관계를 통해 속성값의 상속이 가능하게 된다. 속성값은 부모로 부터 자식으로 전달된다 상속을 받고 싶지 않을 때는 자식요소에 따로 직접 스타일일 지정하면된다. 하지만 모든 속성들이 상속되는건 아니다. font-size 글자의 크기를 설정 font-family 글꼴을 설정 font-weight 글자의 두꼐를 설정 font-style 글자의 기울기를 설정 font-variant 대소문자에 대한 설정 line-height 줄 간격을 설정 1. font-size 글자의 크기를 설정하는 스타일 보통 px와 같은.. 2021. 6. 11.
애니메이션을 이용한 가로 막대그래프(스킬바) 오랜만에 포트폴리오 포스팅을 해볼까 합니다. 포트폴리오에 빠질 수 없는 스킬 바 바 형식이 아니더라도 나의 스킬을 표현할 수 있는 방법들은 다양하지만 이번 포스팅을 막대그래프를 활용한 스킬 바를 코딩을 해볼까 합니다. 제가 코딩을 하는 건 아니고 괜찮은 소스가 있어서 소개를 시켜드릴라고 합니다. 저의 포트폴리오에 사용도 되었던 막대그래프입니다. 포트폴리오에 스킬 바를 어떻게 하면 표현할 수 있을지 고민을 하다가 이런 그래프를 넣어야겠다 해서 많은 그래프나 도형들을 찾아봤는데 다들 소스들이 어렵고 헷갈려서 사용하기 좀 어려웠던것들은 다 패스를 하고 그래도 해당 소스는 수정하기도 편하고, 디자인도 괜찮고 해서 사용하게 되었습니다. 해당 소스는 아래의 링크에 있습니다. https://jsfiddle.net/k.. 2021. 6. 8.
[Adobe XD] 무한반복차트 만들기 안녕하세요 :) 오랜만에 adobe XD를 가지고 왔는데요 이것보다는 인터렉션에 관한 내용을 먼저 정리를 해야 하는데 이번에 UX/UI 디자인을 하다가 차트를 그리고 차트가 움직이게 구현을 하고 싶어가지고 생각을 해보고 어떻게 하면 반복으로 멈추지 않고 계속 차트가 움직일 수 있을까 하고 생각을 하다가 성공을 해서 이거 먼저 정리를 하려고 합니다 서론이 길었네요 바로 시작해보죠!! adobe xd를 실행시켜주세요 1. 아트보드 생성 아트보드의 사이즈는 상관이 없겠죠? 연습이니까 그냥 1920 아트보드로 해보도록 하겠습니다. 2. 차트 그리기 차트를 자동으로 그려주는 플러그인이 있는데 플러그인 소개는 다음번에 해드리도록 하겠습니다. 저는 아트보드에 네모안에 차트가 나오게 하기 위해서 사각형을 하나 그리고 .. 2021. 5. 27.
반응형