SCSS Sass(syntactically awesome stylesheets, 사스)는 스타일시트 언어입니다. Sass는 종속형 시트(CSS)로 해석 및 컴파일되는 스크립트 언어입니다. SassScript는 그 자체로 스크립트 언어이다. Sass는 2가지로 구성되어 있습니다. 새로운 "SCSS"는 CSS의 것과 비슷한 블록 형식을 사용합니다. 블록 안의 줄을 구불하기 위해 괄호를 사용하여 코드 블록과 세미콜론을 인지합니다. SCSS 설치 Sass는 단독으로 설치 가능한 애플리케이션이 아닌, 루비온레일스(Ruby On Rails)라는 오픈 소스 웹 프레임워크에 속한 패키지 프로그램이기 때문입니다. 먼저 루비를 설치하고 그다음 Sass를 설치합니다. 루비 사이트 가기 설치 방법 1. https://ruby..
Illustrator 단축키 설명 단축키 복사하기 Ctrl + C 붙여넣기 Ctrl + V 잘라내기 Ctrl + X 확대하기 Ctrl + + 축소하기 Ctrl + - 문서 작업(Work with documents) 설명 단축키 문서 만들기 Ctrl + N 템플릿으로 문서 만들기 Shift + Ctrl + N 대화 상자 열지 않고 문서 만들기 Alt + Ctrl + N 문서 열기 Ctrl + O 문서에서 파일 가져오기 Shift + Ctrl + P 파일 정보 상자 열기 Alt + Shift + Ctrl + I 문서 설정 상자 열기 Alt + Ctrl + P Adobe Bridge 탐색하기 Alt + Ctrl + O 문서 창 닫기 Ctrl + W 문서에 대한 변경된 내용 저장 Ctrl + S 다른 이름으로 ..
SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. IE9 이상 지원합니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 되어 문서 복잡도가 증가되어 렌더링이 느립니다. Rect 스정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하..
Canvas 캔버스 요소(canvas element)는 HTML5의 일부로서 2차원 모양과 비트맵 그림의 스크립트 작성이 가능한 동적 렌더링을 허용한다. IE9 이상 지원합니다. HTML5의 canvas는 자바스크립트를 이용해 원하는 2D그래프를 만들 수 있습니다. Raster방식의 드로잉이기 때문에 픽셀 단위로 컨트롤 합니다. 픽셀로만 컨트롤 되기 때문에 화면이 클수록 성능이 떨어집니다. canvas 기초 View 라인 Property Description lineWidth 선의 두께를 설정합니다. lineCap butt 선의 끝의 모양이 사각협니다. round 선의 모양이 동그랗습니다. square 선의 모양이 사각형이빈다. 선 두께 만큼 늘어납니다. lineJoin round 모서리 모양을 원 모양..
유형 메서드 설명 Basic .hide() 선택한 요소를 숨깁니다. .show() 선택한 요소를 보여줍니다. .toggle() ♥ 선택한 요소를 숨김/보여줍니다. Fading .fadeIn() 선택한 요소를 천천히 보여줍니다. .fadeOut() 선택한 요소를 천천히 숨김니다. .fadeto() 선택한 요소를 투명도를 조절합니다. .fadeToggle() 선택한 요소를 천천히 숨김/보여줍니다. Sliding .slideDown() 선택한 요소를 슬라이딩으로 보여줍니다. .slideToggle() 선택한 요소를 슬라이딩으로 숨김/보여줍니다. .slideUp() 선택한 요소를 슬라이딩으로 숨김니다. custom .animate() ♥ 선택한 요소에 애니메이션을 적용합니다. .clearQueue() 선택한 요..
탭 메뉴 See the Pen Teb_Menu1 by jeongahlee (@jeongahlee) on CodePen. 탭 메뉴(웹접근성) See the Pen gqyEXZ by jeongahlee (@jeongahlee) on CodePen. 사이드 메뉴 - 버튼(텍스트) See the Pen Side menu by jeongahlee (@jeongahlee) on CodePen. 사이드 메뉴 - 버튼(이미지) See the Pen Side menu-button(image) by jeongahlee (@jeongahlee) on CodePen. 아코디언 메뉴(Accordion Menu1) See the Pen Accordion Menu1 by jeongahlee (@jeongahlee) on CodeP..
포토샵 단축키(Photoshop keys) 인기 단축키 설명 단축키 자유 변환 Ctrl + T 브러시 크기 축소 [ 브러시 크기 증가 ] 브러시 경도 감소 { 브러시 경도 증가 } 기본 전경색/배경색 D 스위치 전경색/배경색 X 복사를 통한 새 레이어 생성 Ctrl+J 절단을 통한 새 레이어 생성 Shift+Ctrl+J 선택 도구 추가 모든 선택 도구+Shift+drag 브러시 또는 견본 삭제 Alt 키 누른 상태에서 브러시 또는 견본 클릭/td> 이동 도구를 사용하여 자동 선택 전환 Ctrl 키 누른 상태에서 클릭 모든 모달 대화 상자 창 취소 (작업 영역 시작 포함) Esc 도구 모음의 첫 번째 편집 필드 선택 Enter 필드 간 이동 Tab 반대 방향으로 필드 간 이동 Tab+Shift 재설정으로 ..