반응형 응용소프트웨어19 [Figma] Auto Layout 세부 설정 space between프레임의 크기에 따라 자동으로 간격이 설정됨(가변) - `Gap` 란에 `auto`를 입력하면 됨 Advanced Layout선을 하나의 길이로 포함시킬 것인지, 아닌지를 선택.프레임을 선택한 뒤 오른쪽 패널에서 Stroke를 추가하면 Position란에 존재한다. 1. included layout 선 포함 간격2. excluded layout 선 제외 간격 canvas stackingAuto Layout에서 오브젝트들이 겹쳤을 때 어떤 것부터 앞으로 보낼 것인지를 정한다. First on top: 왼쪽 오브젝트가 가장 위로 오도록Last on top: 오른쪽 오브젝트가 가장 위로 오도록 Absolute PositionAuto Layout 인데 위치가 자유로워야 할 경우 응용소프트웨어/Figma 2025. 4. 16. [Figma] 오토레이아웃 목적프레임에 자동으로 간격을 조절해 주는 기능.html의 flex box와 유사하다 보면 됨 단축키오토레이아웃 만들기: Shift + A 기능1. Direction 2. Gap 3. Padding 4. Alignment 응용소프트웨어/Figma 2025. 4. 15. [Figma] 배리언트(variant) 목적- 하나의 컴포넌트 안에 여러 상태, 스타일, 버전을 묶어서 관리하려고 쓰는 기능- 같은 버튼인데 상태가 다름 (기본 / 호버 / 클릭 / 비활성)- 같은 스위치인데 켜짐/꺼짐 구분 필요함- 같은 인풋인데 포커스, 에러 상태 필요함- 같은 카드인데 라벨이 있고 없고 다름만드는 법- 마스터 컴포넌트 여러 개 마스터 컴포넌트 여러 개를 선택하고 오른쪽 패널에 `combine as variant` 클릭- 마스터 컴포넌트 한 개 오른쪽 패널에... 누르면 add variant - 인스턴스 여러 개 오른쪽 패널에... 누르면 `Create component set`구역배리언트를 선언하면 구역?이 생기는데 그 구역 안에 오브젝트를 넣어서 베리언트를 추가할 수 있고, 오브젝트를 끄집어내서 베리언트를 해제할.. 응용소프트웨어/Figma 2025. 4. 15. [Figma] 프로퍼티 피프로퍼티란컴포넌트의 상태, 텍스트, 보임 여부 등을 설정할 수 있는 속성값으로 프로퍼티 옵션 적용은 마스터 컴포넌트, 프로퍼티 옵션 활용은 인스턴스에서 한다. 프로퍼티 종류1. 텍스트 프로퍼티 - 컴포넌트 내의 텍스트 속성을 외부에서 수정가능케 함 2. 불리언 프로퍼티- 컴포넌트의 특정 요소를 On/Off 하여서 Display 3. 스왑 프로퍼티 - 특정 인스턴스들로 교체가 가능함. 응용소프트웨어/Figma 2025. 4. 15. [Figma] 컴포넌트 특징 & 단축키 컴포넌트란- UI 디자인에서 반복해서 쓰는 덩어리로 반복작업을 줄이는 것이 목적- 하나의 수정으로 전체가 반영이 되도록- 원본으로 수정할 수 있는 마스터 컴포넌트와, 수정된 것을 적용시키는 인스턴스가 있음 종류1. 마스터 컴포넌트 원본으로 수정이 가능하다.2. 인스턴스 마스터 컴포넌트에서 복제된 것으로 마스터 컴포넌트가 수정되면 인스턴스도 수정된다.3. 프로퍼티 (이후 포스팅 글에 자세히 설명) 컴포넌트의 속성값특징- "create component"로 생성 - 마스터 컴포넌트 수정 시 인스턴스 전부 같이 수정됨 - 마스터 삭제했어도 인스턴스 우클릭 → Main component → Restore main component 클릭 - 마스터 위치 찾을 땐 인스턴스 우클릭 → Go to mai.. 응용소프트웨어/Figma 2025. 4. 8. [notepad++] javascript, json 자동정렬 1. 플러그인 2. JSTool 설치 3. JSTool 에서 JSFormat 선택 이외에도 JSON Viewer도 있고 min.js 파일 포맷도 있다. 2022.11.23 - [응용소프트웨어/Notepad++] - [notepad++] html /xml 자동 정렬 [notepad++] html /xml 자동 정렬 html 작성은 notepad++이 편한데 자동정렬이 안 되는 게 단점 HTML 또는 XML을 자동정렬해주는 플러그인 설치하여 사용한다. 1. 플러그인 관리 2. XML Tools 설치 3. Pretty~ 로 시작되는 정렬 기준 중 선택 태 park-duck.tistory.com 응용소프트웨어/Notepad++ 2022. 11. 23. [notepad++] html /xml 자동 정렬 html 작성은 notepad++이 편한데 자동정렬이 안 되는 게 단점 HTML 또는 XML을 자동정렬해주는 플러그인 설치하여 사용한다. 1. 플러그인 관리 2. XML Tools 설치 3. Pretty~ 로 시작되는 정렬 기준 중 선택 태그를 열고 안닫아주면 깨질 수도 있다. 예를 들면 을 으로 바꿔줘야 한다. 이외에도 XML Tools는 구문검사, 를 < 또는 >로 바꿔주는 기능도 있다. 2022.11.23 - [응용소프트웨어/Notepad++] - [notepad++] javascript, json 자동정렬 [notepad++] javascript, json 자동정렬 1. 플러그인 2. JSTool 설치 3. JSTool 에서 JSFormat 선택 이외에도 JSON Viewer도 .. 응용소프트웨어/Notepad++ 2022. 11. 23. [포토샵] 고급 개체를 직접 편집할 수 없으므로... 오류 해결 이미 생성된 파일에 이미지를 불러오고 엔터를 누르고 수정을 하려 하면 아래와 같은 오류가 뜬다. "고급 개체를 직접 편집할 수 없으므로 요청한 사항을 완료할 수 없습니다." 특이사항은 레이어의 우측 하단에 이상한 아이콘이 생성된다. 해결방법은 고급 개체를 직접 편집할 수 없다고 하니 고급 개체를 해제하면 된다. 즉 레스터화를 해야 하는데 레스터화란 벡터 같은 이미지를 포토샵 형식인 픽셀 이미지로 변환시키는 것이다. 실제론 이미지를 불러와도 픽셀과 처럼 깨지는데 꼭 벡터 이미지가 아니더라도 레스터화 시켜야 하는 것 같다. 방법은 2가지이다. 1. 레이어 우클릭 - [레이어 레스터화] 클릭 2. [레이어] 메뉴에서 [레스터화]-[고급 개체] 클릭 응용소프트웨어/포토샵 2022. 11. 4. [일러스트] 캔버스에 맞춰 이미지 자르기 이미지나 도형의 크기에 맞게 캔버스에 맞추고 싶을 때가 있다. 사용하고 있는 버전은 Illustrator CS6 한글 버전이다 아래는 캔버스에 맞춰 이미지를 자른 결과! 아래와 같이 도형이 있다고 가정하자. 1. [윈도우] - [대지]를 선택 2. 대지 옵션을 클릭 - 툴팁이 안 나와서 뭔진 모르겠지만 아래의 사진과 같은 아이콘을 클릭! - 옵션을 누르면 아래와 같이 나올텐데 수동으로 캔버스를 잡고 줄이고 늘려도 된다. 3. [사전 설정]을 "아트웍 테두리에 맞추기"를 클릭한다 4. 완성본 응용소프트웨어/일러스트 2022. 9. 16. [한글/hwp] 표 붙이기 간단한 방법 표 내용을 복붙 하다가 표가 따로따로 놀고 있는데 이걸 붙여야 할 때가 있다. 매우 매우 간단하다. 붙일 표A가 상단에 위치하고 표 B가 하단에 위치할 때, 1. 상단에 위치한 표에 커서를 찍는다 2. 상단 메뉴를 클릭하여 "표붙이기" 클릭 (단축키 Ctrl+N 누른 뒤 Z) 3. 표붙이기 완성 단, 표 A와 표 B사이에 어떠한 글이 있어도 안되며 공백/줄 바꿈은 상관없다. 응용소프트웨어/한글(hwp) 2022. 8. 21. [포토샵] 이미지에 맞춰 캔버스 자르기 로고나 컴포넌트(버튼 등)의 이미지를 사용할떄 이미지 사이즈에 맞게 배경 캔버스를 축소시켜야 할 때가 있다. 내가 원하는 크기만큼 잘라야 할 때와 자동으로 이미지에 맞춰 캔버스를 자르는 방법, 총 2가지를 설명한다. 레이어를 선택하지 않는 실수는 하지말자! 1. 임의의 값으로 캔버스 사이즈 수정 [이미지(Image)] - [캔버스 크기(Canvas Size)]를 선택한 뒤 원하는 크기만큼 수정한다. 2. 이미지에 맞춰 캔버스 사이즈 수정 [이미지(Image)] - [재단(Crop)]를 선택하고 자르는 기준을 선택 응용소프트웨어/포토샵 2022. 5. 20. [한글 hwp] 한영 자동변환 끄기 [도구] - [글자판]에서 "글자판 자동변경"을 체크 해제 응용소프트웨어/한글(hwp) 2022. 2. 4. 이전 1 2 다음 반응형
