CSS :focus-within
:hover 속성으로 메뉴가 펼쳐지거나 한다 해도 tab 키로는 마우스 호버가 아니기 때문에 인 열릴 수 있는데, 이때 :focus-within 속성을 써주면 메뉴가 키보드 탭 키를 통해 들어와도 잘 열린다.
일러스트레이터 단축키
오브젝트ctrl c ctrl f - 제자리 포그라운드 복붙ctrl c ctrl b - 제자리 백그라운드 복붙alt 드래그 - 복사펜툴 팁ctrl 클릭 - 펜툴 해제그리는 와중 alt로 핸들 조정 가능별모양alt 누르면 별이 달라짐위아래 화살표로 다른 각모서리 펜툴 ctrl 단축키로 조절해서 라운드로 가능레이어 창 레이어 잠그기 단축키오브젝트 선택 ctrl 2그룹ctrl g 하나의 그룹화더블클릭 격리모드(아이솔레이티드 모드)esc 격리모드 해제레이어 단축키 - 모든 도구, 시험 제시간 - 레이어창 단축키 4개ctrl [ ] 아래 위,ctrl shift [ ] 가장 아래, 가장 위복사 반복 - Blendedctrl d 방금 했던 복사 반복일러스트레이터 단축키ctrl 2 잠금ctrl alt 2 모든 잠금 해제..
포토샵 단축키
최신 주요 단축키레이어 생성 관련 단축키ctrl 썸네일 클릭 - 선택영역 재지정alt 마스크버튼 - 마스크반전alt 드래그 - 레이어 및 효과 복제ctrl j 레이어 복제ctrl e 패스 두 개의 레이어 하나로 합침 - 하나의 레이어에 두 개의 패스도 가능화면 단축키ctrl a 전체 선택영역 지정ctrl shift i 선택영역 반전delete 레이어 색상 전체 삭제 가능공통무브툴 선택 배경 클릭 - 모든 선택 종료 (기본상태)레이어 배경 선택 - 모든 선택 종료 (기본상태)alt 확대space 잡고 이동alt 컬러픽커이미지로 내보내기ctrl shift alt s붓붓조절 [ ]단위 조절shift - 단위 10씩 조절alt - 단위 소수점 조절레이어 및 선택영역ctrl j - 레이어/선택영역 복사alt 드래..
transform 변형의 3가지 키워드 - 모든 곳에 적용되기에 향후 새 툴에서도 적용할 수 있다
scale - 크기translate - 움직임rotate - 회전skew - 비스듬히 기울임 - 필수는 아니고 추가적인 플러스+ 요소
JS margin vs transform: translate
스타일 속성 중 margin, height 등과 같이 기하적변화를 유발시키는 속성을 변경하면 Layout이 발생한다. 반면 transform을 사용한 엘리먼트는 레이어로 분리되기 때문에 영향받는 요소들이 제한되어 Layout과 Paint를 줄일 수 있게 된다. 그리고 합성만 발생시키기 때문에 애니메이션에서 사용 시 렌더링 속도를 향상할 수 있다. transform을 쓰면 GPU를 사용한다고도 한다.같은 효과를 내지만, 실제로는 애니메이션에서는 transform 변형 키워드를 사용하는 것이 더 유리한 이유다. 출처https://velog.io/@jiseong/Why-margin%EA%B3%BC-transform-%EC%84%B1%EB%8A%A5-%EC%B0%A8%EC%9D%B4
피그마 단축키
피그마 단축키 - 캔버스스페이스 끌기 - 이동ctrl 스크롤 - 확대 축소ctrl 누르고 클릭하면 딥셀렉트가 되어서 안에 있는 클릭한 자식 요소 레이어가 바로 선택이 된다**마진을 볼 요소의 위쪽/아래쪽 요소를 선택한 다음 alt를 누르고 그 다음 요소에 커서를 올리면 마진을 볼 수 있다더블 클릭으로 아이콘만 클릭ctrl 누르고 위로 올리면 위에 공간이 추가가 됨ctrl shift r - 대체 붙여넣기ctrl alt k 메인 컴포넌트 만들기ctrl shift alt k - 피그마 메인 컴포넌트로 이동 단축키 암기enter - 레이어 안의 레이어를 볼 때 더블 클릭 / enter를 눌러서 들어갈 수 있다피그마 단축키 - 레이어shift a - 오토레이아웃 만듦ctrl alt g - 프레임 만듦 - 영역을 ..
피그마 개념 용어 모음
피그마 입문웹사이트, 모바일 앱, 서비스 화면 디자인하는 웹 기반 디자인 도구실제 취업에서 10군데 중 6군데만 사용함(포토샵 회사에서 쓰는 곳도 있음)피그마 특징웹기반(피그마 서버 업로드) 협업 유리UI 디자인 특화 - 디자인 시스템(디자인을 저장 후 재사용 유리)프로토타입 기능(사용자 미리 경험) - 인터렉션 요소를 보여줄 수 있음(10년 전에는 스테틱하게만 되었는데, 지금은 피그마 링크를 보내줌)슬라이드도 피그마로 가능!디자인 에셋 라이브러리들이 많이 있음피그마 앱 구조상단 툴바왼쪽 레이어 및 에셋 사이드바캔버스 - 넓음오른쪽 측면 패널 - 속성창(properties) - 디자인 탭 / 프로토타입 중 디자인 탭에서 작업 함주요 개념프레임 - 버튼을 감싸거나 기기 화면의 가이드라인 등으로 될 수 있다..
네이버 개발자 디벨로퍼 Naver Developer API 종류와 네이버 클라우드 플랫폼 Naver Cloud Platform API와의 차이점
네이버에서 제공하는 API를 알아보자. 네이버 개발자 API 분류네이버 개발자 API는 네이버 오픈API라고 통칭되며, Restful 방식으로 제공된다. 이 API는 크게 세 분류로 나뉜다. CLOBA, 네이버 로그인, 서비스 API, 이렇게 세 가지가 있고, 그 아래 하위 항목으로 수많은 API 종류들이 존재한다. 참고로 이 네이버 개발자 API는 아래에서 후술하겠지만 네이버 클라우드 플랫폼 Naver Cloud Platform API와 별개다. 또한 네이버 개발자 API들은 또 사용자의 네이버 로그인이 필요한 API와 필요치 않은 API, 두 가지 분류로 나뉜다. 로그인 방식 API네이버 로그인이 된 상태에서 사용할 수 있는 Restful API다. nid.naver.com/~으로 시작한다. 비로그인..
VSCode indent 코드 들여쓰기 Space 기본 2칸으로 설정하기
과거에는 tab키나 Space 4번이 코드 들여쓰기의 기본이었다. 하지만 현대 프로그래밍 언어에서는 파이썬의 영향인지 기본 2칸을 디폴트로 가져가는 경우가 많다. VSCode는 아직 4칸이 기본 들여쓰기다. 기본 들여쓰기를 2칸으로 바꾸는 법을 알아보겠다.Code > Settings... > Settings로 이동한다. 단축키 command ,를 눌러줘도 된다.tab을 검색해서 Editor: Tab Size를 2로 바꾼다. Text Editor 부분의 어딘가로 내려가줘도 되지만, 귀찮으니 검색한다. Editor: Insert Spaces 항목이 체크되어 있는지 확인한다(기본적으로 체크되어 있다). tab 키를 눌렀을 때 tab 대신 space로 처리하게 해준다. Editor: Tab Size 설명에 따라..
변수 이름 짓는 법 - 코딩 스타일, 코드 컨벤션 Code Conventions
코딩에서 몇 가지 작성 형식, 예컨대 변수 이름, 들여쓰기 등의 형태를 한국말로는 코딩 스타일, 영어론 코드 컨벤션이라고 부른다. 오늘은 변수 이름을 짓는 대표적인 형식들을 알아보겠다. 형식은 아래와 같다.스네이크 케이스variable_nameScreaming Snake CaseVARIABLE_NAME카멜 케이스variableName파스칼 케이스VariableName케밥 케이스variable-name헝가리안 표기법 Hungarian NotationstrVariableName // 자료형을 앞에 붙인다동향과거 PHP, 그리고 SQL은 스네이크를 쓰고, HTML attribute는 케밥 케이스를 쓰지만, 현대 대부분의 프로그래밍 언어는 함수와 변수는 카멜, 클래스는 파스칼을 쓰는 추세다.
컴퓨터는 색상을 어떻게 표현하는가?
컴퓨터는 RGB 가산 혼합 방식으로 색상을 표현한다. 가산 혼합 방식이란 각각의 색상들의 밝기를 조절하고 3가지 색상을 혼합해서 인간의 눈에 다른 색으로 보이게 만드는 착시 방법이다.각각의 R, G, B는 한 색상당 256가지 8비트(1바이트) 밝기 체계를 가지고 있으며, 이 3가지 색을 혼합할 수 있기에 256^3으로 총 16,777,216(1600 77만 7216)가지 색상을 표현할 수 있다.
온라인 강의 준비 팁
ppt는 말하면서 눌러서 한 단락씩 말하면서 나오게 하지 말고, 처음부터 모든 텍스트를 표현하라.- 내가 말하는 속도보다 학생들이 읽는 속도가 빠르다. 말을 보조로 둬서 더 빠른 정보 전달에 초점을 둬라.얼굴 안 나오는 게 좋다. 나와야 한다면 강의 자료 안 가리게 해라. 갭쳐할 때 힘들다. 글씨 쓸 때도 손으로 가리지 마라.말을 더듬거나 음에아어오그저 같은 접두어 말하지 말고 대본대로 그대로 읽어라. 더듬으면 학생들은 배속해서 봐도 불필요한 낱말 때문에 내용 파악하기가 힘들다.