[Figma] 개발자 환경 구축: Figma 계정 생성 및 프로그램 설치💡Figma 환경 구축 https://www.figma.com/ Figma: The Collaborative Interface Design Tool Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.isaac-christian.tistory.comFigma를 설치하기 전이라면 위 글을 참고하여 계정을 생성하고, Figma를 설치하도록 한다. 💡페이지 알아보기프로젝트 팀 권한 Owner (Admi..
💡Figma 환경 구축https://www.figma.com/ Figma: The Collaborative Interface Design ToolFigma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.www.figma.comFigma 홈페이지에서 최신 업데이트 내용과 인사이트를 확인할 수 있다. Figma 계정 생성계정 생성을 위해 Get started for free 버튼을 클릭하여 가입 화면으로 넘어간다.팝업창에서 구글 이메일로도 등록이 가능하며, 업무용으로 사용할 경..
💡Figma란?Figma는 UX/UI 디자인 및 프로토타입 제작을 위한 기능을 온라인에서 사용할 수 있는 디자인 툴이다.웹, 앱, 인터페이스 디자인 등 다양한 분야에서 사용되며, 디자인과 개발 과정에서 필요한 여러 협업 기능을 지원한다.2022 Design Tools Survey 결과, 현업에서 UI 디자인과 프로토타이핑에 가장 많이 사용하는 툴로 Figma가 선정되었다. 프로토타이핑 툴의 차이점 피그마 (Figma)스케치 (Sketch)프레이머 (Framer)포토샵 (Photoshop)실행 환경웹, 프로그램프로그램(MAC OS만 가능)웹, 프로그램프로그램실시간 공동 작업OXXX히스토리 관리OXOX애니메이션프로토타이핑OOOX디바이스별 대응OOOX위 표를 통해 각 프로토타이핑 툴의 차이점을 살펴보도록 하..
🍁CSS 적용CSS 읽기 쓰기읽기: CSS(속성)쓰기: CSS(속성, 값) CSS 읽기//alert(getComputedStyle(document.getElementById('box')).getPropertyValue('color'));alert($('#box').css('color'));jQuery에는 내부적으로 이 작업이 되어 있다는 것을 알 수 있다. CSS 쓰기 (메서드 체인)//$('#box').css('color', 'blue');$('#box').css('color', 'blue').css('background-color', 'gold').css('font-size', '3rem');jQuery는 연쇄적으로 작업할 수 있다는 점에서 편리하다.css(속성명, 값)이 반복하여 쓰이고 있다. 이..
🍁Scroll Event 기본 코드 Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quia veniam quisquam voluptatibus facilis iste ad sequi? Ducimus, optio fugiat. Tempora non fugiat nobis soluta a quia, aliquam mollitia eos. Soluta maiores quisquam molestias nemo eos at neque impedit, perspiciatis dolorem, enim iusto obcaecati sit suscipit minus, non dolores doloremque! Esse a adipisc..
🍁전용 함수와 범용 함수전용 이벤트 함수객체.이벤트함수(콜백함수)$('#btn1').click(function() { alert();});위 코드는 클릭 이벤트만을 처리하는 함수이다.이렇게 하나의 이벤트만을 처리하는 함수를 전용 이벤트 함수라고 한다. 범용 이벤트 함수객체.on(이벤트명, 콜백함수)$('#btn2').on('click', function() { alert();})on은 범용 함수로, 이벤트명을 입력해야 한다.이벤트명에 따라서 다양한 이벤트를 처리하는 함수를 범용 이벤트 함수라고 한다.반대로 객체의 이벤트를 해제할 때에는 off 함수를 사용한다. 🍁Effect Function1. hide(time), show(time), toggle(time)2. fadeOut(time), ..
🍁jQuery() 함수jQuery() 함수는 CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다. 기본 코드 jQuery() 함수 상자1 상자2 상자3 상자4 상자5 Array.from()//forEach > new Array()에서 동작//list.forEach(box => box.style.color = 'yellow'); //HTMLCollection (유사 배열)Array.from(list).forEach(box => box.style.color = 'tomato');자바스크립트는 구조상 진짜 배열이 없다고 했다. 하지만 new Array()로 만들어진 것을 진짜 배열로 취급한다.위에서 선언한 list는 배열이 아닌 HTMLCol..
