포스트 (443) 썸네일형 리스트형 [피그마플러그인강좌] #03. Pixabay와 Unsplash - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Pixabay와 Unsplash를 보도록 하겠습니다. Pixabay와 Unsplash는 무료이미지를 제공하는 피그마 플러그인입니다. 원래는 사이트인데, 플러그인도 있는 거죠. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 클릭클릭~! 두 플러그인 모두 사용법은 같아서 pixabay만 정리했습니다. Step02. 도형에 바로 마스크 처리합니다. 그냥 사진선택하면 프레임 밖에 나가니까 도형먼저 그리고 사진을 선택해 주세요. Step03. 여러 도형을 잡고 선택하면 한 번에 이미지 들어갑니다. 편리하죠? 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해 주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. https://youtu.be.. [Figma] 29강 Position Fixed와 ScrollTo기능 - 오쌤의 니가스터디 ** 자세한 강의는 유튜브도 있어요! https://youtu.be/WsT01xGUFVY - 유튜브 멤버십 중급 강좌 이상을 신청해야 볼 수 있습니다! 1. Position Fixed - 사이트들을 보다 보면 헤더영역이 고정되었다거나, 스크롤탑버튼이 따라다니는 것을 볼 수 있습니다. - HTML/CSS에서 그 기능은 position: fixed; 를 통해 사용합니다. - position관련 기능을 피그마도 지원하고 있습니다. - 프로토타입 패널에 가면 [Scroll behavior]의 [Position] 기능으로 있습니다. Scroll width parent : 기본 값으로 프로토타입 실행에서 스크롤 이동 시 자신의 위치에 고정된 상태를 의미합니다. Fixed : 프로토타입 실행에서 스크롤 이동 시 화면.. [피그마플러그인강좌] #02. 써큘라 텍스트(Circular Text) - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Circular Text를 보도록 하겠습니다. Circular Text는 텍스트를 원형으로 돌려 줍니다. 원래 일러스트레이터나 포토샵에는 있는 기능인데 피그마에서는 이렇게 플러그인을 설치해야 합니다. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 클릭클릭~! Step02. 창에 원하는 글자를 작성 각도를 지정하면 원이나 반원도 가능! Step03. 프레임 안으로 끌어갖고 오기 보통 프레임 밖에 생성되므로 안으로 끌어 오기! 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. https://youtu.be/iN8h9QszRiQ 유튜브 검색창에 오쌤의 니가스터디라고 검색해주세요. 여러.. [피그마플러그인강좌] #01. 구글시트싱크(Google Sheet Sync) - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 포스트에서는 피그마 플러그인 중 구글시트싱크를 보도록 할게요. 구글시트싱크 (Google Sheet Sync)는 구글시트 데이터를 피그마에 적용시켜 줍니다. Step01. 구글시트에 데이터를 작성합니다. 표 제목은 반드시 굵게 하는 것이 뽀인트~! Step02. 원본 컴포넌트 제작 데이터가 들어갈 레이어명앞에는 #붙이기 Step03. 구글시트주소를 복사해와서 입력창에 붙여넣고 [Fetch & Sync]버튼눌러 적용합니다. 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해주세요. 1강부터 5강까지는 무료, 그 이후는 유료 강좌입니다. https://youtu.be/7hTH891OvTU 웹디자인기능사 실기 동영상 A~E유형까지 20개 모두 오픈 안녕하세요. 오쌤입니다. 2023년 웹디자인기능사 실기 새로 나온 모든 유형을 영상으로 제작했습니다. 그럼 오쌤에게 듣는 웹디실기 꿀팁을 볼까요? 비전공자면 기초학습영상을 보고 시작하세요. 아래 주소는 기초학습영상 카테고리로 들어갑니다. https://www.youtube.com/watch?v=qyKjpzBiyD8&list=PLdwQP35_Nz9e4DIQCtvAqctMBxEXgRo5s 어느 정도 웹언어인 HTML/CSS/제이쿼리를 공부한 적이 있는 수험자라면 이파트들부터 보면 됩니다. 레이아웃 및 컨텐츠 제작, 제이쿼리 컨텐츠 제작을 해봅니다. 아래 주소를 클릭하면 실전코딩연습 카테고리로 들어갑니다. https://www.youtube.com/watch?v=Ezu6zxxBeG8&list=PLdwQP35_.. [Figma] 28강 Text Ellipsis(...생략기호효과) ** 자세한 강의는 유튜브 쇼츠로도 있어요! https://youtube.com/shorts/hbObYS83y9o 1. 글자 생략기호 처리하기 - 디자인을 하다 보면 텍스트 상자의 크기를 지정하고, 그 범위를 벗어나면 생략기호를 줘야 하는 경우가 생깁니다. - 포토샵에서 디자인할 때는 일부러 그냥 박스에 ...을 줘야 하지만 피그마는 기능으로 있습니다. - 추후 구글시트싱크(Google Sheet Sync)를 통해 글자를 한 번에 적용할 때 알아서 범위를 넘어가지 않게도 해줍니다. - 위와 같이 5줄만 표시할 수 있는 텍스트 상자 범위인데, 글자가 넘어갔다고 보겠습니다. 1) 디자인패널의 Text 추가 옵션 누르기 - 빨갛게 체크한 [...]아이콘을 클릭해 줍니다. 2) 추가 옵션 창에서 글자 줄임 효과.. [제품리뷰] 무선이어폰 청소 키트(feat. 다이소) - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번에는 다이소 갔다가 겟겟한 물건을 소개해보겠습니다. 무선이어폰 청소키트입니다. 안 그래도 이어폰이 너무 더러웠는데 좋은 물건 구입했네요. ** 영상으로 보고 싶은 분은 아래 주소를 클릭해 주세요. https://youtube.com/shorts/iT6tmiA8pYo 화장실의 등이 나가서 다이소에 갔다가 무선이어폰 청소키트를 발견했습니다. 안그래도 너무 더러웠는데 청소하려니 힘들더라고요. 뒷면에 자세한 설명이 나와 있습니다. 1. 우선 펜촉으로 틈새 먼지나 이물질을 제거합니다. 2. 좁은 브러시로 이물질을 섬세 청소합니다. 3. 넓은 브러시로 케이스의 먼지들을 제거해 줍니다. 참 쉽죠? 뜯어보니 펜촉, 좁은 브러시, 큰 브러시 모두 잘 구성되어 있습니다. 케이스가 있으니 항상 .. [ES6강좌] 14강 Fetch API사용하기 - 오쌤의 니가스터디 - Fetch API를 사용하면 웹 브라우저가 웹 서버에 HTTP 요청을 할 수 있습니다. - 2015년~2017년 사이 모든 브라우저가 Fetch API를 지원하므로 더 이상 XMLHttpRequest가 필요하지 않습니다. 1. REST API - REST API는 웹 주소를 이용하여 서버와 통신하는 방법 중 하나라고 보면 됩니다. - 주소를 입력하는 방법으로 데이터를 생성, 요청, 변경, 삭제를 할 수 있습니다. - 그래서 우리는 REST API의 4가지 함수를 보도록 하겠습니다. 1) REST API 함수 REST API함수 설명 CRUD표현 주소입력방식 POST 데이터 등록 Create /test GET 데이터 조회 Read /test 또는 get/test/4 PUT 데이터 수정 Update /t.. 이전 1 ··· 9 10 11 12 13 14 15 ··· 56 다음
