분류 전체보기46 [UX UI figma] 피그마 인터페이스 (1) - 툴바 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 Figma의 인터페이스에 대하여 알아보도록 할게요! 우선 Figma(밑에서는 한글로 지칭하도록 하겠습니다)를 사용하기 위해서는 계정을 먼저 만들어 주셔야 합니다. https://www.figma.com/ Figma: the collaborative interface design tool. Build better products as a team. Design, prototype, and gather feedback all in one place with Figma. www.figma.com 1. 피그마의 첫 화면 피그마에 로그인을 하시면 이런 화면을 만나게 됩니다. 2. 피그마 인터페이스 1) 새 파일 만들기 왼쪽 상단의 New design file을.. 2023. 3. 7. [UX UI figma] 피그마란? 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 UX UI 디자인에서 자주 사용하는 Figma에 대하여 알아볼게요! 1. 피그마(figma)란? https://www.figma.com/ Figma: the collaborative interface design tool. Build better products as a team. Design, prototype, and gather feedback all in one place with Figma. www.figma.com Figma는 클라우드 기반의 디자인 툴로, 디자이너와 개발자가 함께 작업할 수 있도록 만들어졌습니다. 윈도우, 맥 등 어떤 웹 브라우저에서든 실행이 되며, 언제 어디서나 사용 가능합니다. 웹 기반이기에 별도의 앱을 설치하지 않아도.. 2023. 3. 6. [CSS animation] css 애니메이션 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 CSS 애니메이션에 대해 알아볼게요! CSS 애니메이션은 다양한 속성이 있는데, 속성이 너무 많다 보니 어떻게 사용하지는지, 언제 어떻게 적용하는지 헷갈리는 경우가 있죠. 어떤 속성이 있는지 한번 정리해봅시다! 1. HTML 구조 간단하게 클래스 명이 box인 태그를 만들어 볼게요. 2. CSS 가로, 세로 300 x 300 크기의 배경 색상이 들어가게 만들었습니다. 브라우저 결과 화면 그럼 애니메이션을 적용하기 위해 어떤 속성이 있는지 확인해 봅시다 1. animation-name .box { width: 300px; height: 300px; background-color: salmon; animation-name: box_ani; } 애니메이션을.. 2023. 2. 26. [Visual Studio code] 비주얼 스튜디오 코드 추천 익스텐션 안녕하세요 PNcoding 입니다 :) 비주얼 스튜디오 코드엔 여러 유용한 익스텐션이 있습니다. 비주얼 스튜디오 코드를 사용하면서 개인적으로 추천하는 익스텐션입니다. 먼저, 비주얼 스튜디오 코드를 설치 후 익스텐션 설치하는 방법에 대해서 알아보겠습니다. 비주얼 스튜디오 코드 설치 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux.. 2023. 2. 26. 이전 1 ··· 5 6 7 8 다음 반응형
