본문 바로가기

분류 전체보기

 (279)
피그마 3일차 - 컴포넌트 개념 및 애니메이션 효과 ..1 안녕하세요 시란입니다 . 이번시간엔 피그마의 꽃이라 할수있는 컴포넌트의 개념에 대해서 알아보고 프로토타입 탭을 통한 애니메이션 효과를 주는 방법에 대해 알아보겠습니다. 피그마는 컴포넌트 개념을 통해서 내가 만든 UI/UX가 어떻게 동작하는지 정확하게 동료들에게 보여줄 수 있겠죠? 예를 들어 버튼을 클릭했을 때 색깔이 변했으면 좋겠다. 또는 버튼을 클릭했을때 다른곳으로 이동하면 좋겠다. 등등이 있겠죠? 물론 말로 설명해도 좋지만 직접 보여준다면 그보다 더 효과적인 의사소통이 없겠죠? 이런 애니메이션 효과와 인터렉션효과를 줄수있는 부품, 요소들을 만들어서 여러 페이지에 사용할 수 있는 작업을 하면 됩니다. 컴포넌트란 간단하게 말하면 부품이라는 의미이며, 부품 틀을 만들어서 해당 부품들을 찍어낸다 생각하시면 ..
피그마 2일차 - 에디터를 활용한 카드 UI 만들어보기 안녕하세요 시란입니다. 이번시간에는 앞서 배운 에디터를 이용해서 카드UI를 만들어보겠습니다. 우리가 직장에서 일하다보면 카드뉴스라던지 카드콘텐츠들을 많이 보거나 받아보셨을꺼에요 이번시간에는 에디터를 활용해서 웹사이트에서 볼법한 콘텐츠 카드를 한번 만들어보겠습니다. 먼저 pixabay를 통해서 무료사진을 하나 가져왔습니다. 이 사진을 가져올 프레임을 먼저 만들어야겠죠? 프레임 크기는 240 x 400으로 만들어줍니다. 오른쪽에 W와 H값을 변경하면 240x 400 사이즈로 제작 가능하겠죠? 카드의 배경이 될 프레임의 색상은 FFFFFF로 고정합니다. 오른쪽 메뉴중 FILL부분을 수정하면 되겠죠? 그리고 카드 이미지의 모서리를 둥글게 만들어주겠습니다. 마찬가지로 오른쪽 메뉴에서 아래와 같이 라운드 입력란을 ..
피그마 1일차 - 피그마 다운로드 및 기본 활용 방법 안녕하세요 시란입니다. 이번 포스팅에서는 피그마에 대한 기초적인 설명과 활용방법에 대해서 알아보겠습니다. 1일차에는 피그마에 대한 간략한 설명과 다운로드 방법 과 실행 그리고 우리가 이미지를 편집하거나 콘텐츠를 제작하기 위해서는 어도비사의 포토샵이나 일러스트 등을 다운로드 받아서 사용하곤 했습니다. 많이들 들어보셨을꺼에요 현재까지도 아주 강력한 툴이죠. 포토샵의 경우 사진편집이나 이미지 편집하는데는 좋은툴이지만 UI디자인 쪽에는 최적화되어있지 않습니다. 특히 픽셀기반이므로 수정사항이 발생하면 모든 엘리먼트를 수정해야된다던지 시안을 공유하려면 이미지 추출을 해야된다거나 별도의 프로그램을 사용해야 하죠. 특히나 어도비 포토샵을 구매, 설치해야된다는 점이죠. 유료프로그램이라는 의미입니다. 또한 업무 프로세스를..
Thrustmaster Perrari 488 edition wheel + TSS Handbrake + TH8 RS shifter 리뷰 안녕하세요 시란입니다. 이번 리뷰할 제품은 트러스트마스터사의 제품인 TS-PC Racer Ferrari 488 Challenge Edition TSS Handbrake TH8 RS Shifter 3가지 제품입니다. 각각 이미지는 다음과 같습니다. 먼저 TS-PC Racer Ferrari 488 Challenge Edition 입니다. 열롱하죠? 그립감도 괜찮아요. 전작인 TX Leather Edition을 제가 구매했었는데요, 해당 제품과 거의 비슷했지만 약간 다른점을 설명 드리자면 일단 뒷부분 연결 부위가 달라졌습니다. 일단 PC버전이다보니 USB 케이블이 따로 분리되어 나왔습니다. 이전작의 경우는 아예 일체형으로 되어있어서 USB케이블 연결 불량이 생기면 답이 없더라고요... 현재는 이런식으로 선들이..
자바스크립트 10일차 - 헤더 영역, 마우스휠 조절시 영역 표기, scrollTop, animate를 통한 페이지 위치 옮기기 스크롤을 올릴땐 헤더 영역이 나타났다가 스크롤을 내리면 헤더영역이 사라지는 그런 사이트들을 보신적이 있을꺼에요; 스크롤을 내리면 아래처럼 메뉴가 사라지고. 스크롤을 올리면 아래와 같이 메뉴(머릿말)이 나타나도록 만들어보겠습니다. 먼저 헤더영역을 만들어주시고요. ㅎㅎ header 헤더에 스타일을 줍시다. 백그라운드, 글씨색, 텍스트 위치 등등 조절해주시고요. 중요한점이 헤더의 위치는 고정으로 해야됩니다. (이것만 설정하면 휠을 올렸다 내렸다 하더라도 위치를 고정하고 있답니다.) 그리고 현재는 보이지 않도록 하기 위해 translateY 값을 -100%로 줍니다. 이상태를 주면 헤더는 보이는 페이지 위쪽에 우리눈에 안보이는 곳에 위치하게 됩니다. 그리고 transition 값을 0.5s줍니다. 0.5의 속도..
자바스크립트 9일차 - jquery burgermenu, header 이번 시간은 버거메뉴와 header에 대해서 알아보도록 하겠습니다. 버거메뉴란 아래 이미지처럼 생긴 메뉴로 클릭했을때 header든 메뉴든 뜨게 하는 아이콘 입니다. 해당 버튼을 만들어보도록 하겠습니다. 저 버튼을 누르게 되면 아래와 같이 모양이 x자로 바뀌면서 오른쪽의 메뉴가 호출될 수 있도록 만들 계획입니다. 먼저 오른쪽 메뉴부터 만들어보도록 하겠습니다. HOME WORKS ABOUT 그리고 article도 이렇게 만들어봅시다. 버거메뉴 자 이번시간은 css가 정말 많이 들어갈꺼에요 전에 스크립트부터 짜봅시다. 먼저 const를 통해서 각 트리거메뉴와 메뉴를 각각 이름을 지어줍시다. 그리고 클릭이벤트를 넣어줍니다. triggerMenu는 햄버거 버튼을 의미합니다. 이 버튼을 누를경우 togglecla..
자바스크립트 8일차 - jquery css와 클릭이벤트 저번시간에 이어 jquery에서 css와 이벤트들을 한번 넣어보도록 하겠습니다. 1. 선택자 2. 선택자 3. 선택자 마찬가지로 div class를 준비해줍니다. 그리고 나서 어제 배운 선택자를 응용해봅니다. const ex1 = $('.ex1 p') 이렇게 하면 ex1 에는 p태그들이 선택되었습니다. 원래 바닐라 스크립트 였다면 아래와 같이 썼었겠죠 ex1.style = "boarder:1px solid #f00" 하지만 jquery와 바닐라 자바스크립트는 혼용되서 쓸 수 없습니다. 따라서 jquery로 선택된 태그들에는 jquery에 맞는 문법을 사용해야합니다. 아래와 같이 써주면 됩니다. ex1.css({ 'border':'1px solid red', 'color': 'blue', }) css()안..
자바스크립트 7일차 - jquery와 선택자 이번 시간은 jquery를 활용해서 프로젝트를 진행하려고 합니다. jquery는 다운로드 받아도 되지만 그냥 script에 포함시켜서 사용할 수도 있습니다. 구글이 이미 다운로드 해서 배포해놨고, jquery사이트에서 이 스크립트를 사용하면 다운로드 없이 사용이 가능하다. https://jquery.com/download/ Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwid..

티스토리툴바