본문 바로가기

전체보기111

[Brackets] 화면 창 분할/단일 보기 화면 분할 (Split screen) 기본 보기에서 창을 분리시켜 여러 파일을 동시에 보고 싶다면, 두 개의 창으로 분할해서 볼 수 있다. 보기 → 수평 분할 또는 보기 → 수직 분할 클릭 (View → Horizontal Split or View → Vertical Split) 또는 다음의 에디터 분할 아이콘을 클릭 기본보기를 분할하면 두 번째 "작업 파일(Working Files)" 목록이 생성되어 어떤 파일이 어떤 창에 열려 있는지 확인할 수 있다. (아래 이미지 참고) 이 두 작업 파일 목록 사이에서 파일을 드래그하여 원하는 창으로 이동할 수도 있다. 브래킷은 각 프로젝트의 보기 레이아웃을 기억하기때문에, 다른 프로젝트로 전환하면 프로젝트를 닫을 때 선택한 레이아웃이 표시된다. 단일 화면(Sing.. 2020. 10. 26.
jQuery란 jQuery는 JavaScript 라이브러리이다. jQuery는 다양한 브라우저에서 사용하기 쉽게 작동하는 API를 통해 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 JavaScript 보다 훨씬 간단하게 만든다. jQuery의 모든 기능은 JavaScript를 통해 액세스되므로 코드를 이해하고 구조화하거나 디버깅하려면 JavaScript에 대한 이해가 필수적이다. 따라서 JavaScript와 기본 구문을 먼저 이해 하는 것이 좋겠다. jQuery 작동 원리 알아보기 ↓ How jQuery Works | jQuery Learning Center link jQuery: The Basics This is a basic tutorial, designed to help yo.. 2020. 10. 26.
Visual Studio Code 단축키 자주 사용하는 단축키 Ctrl + K + F : 전체 선택(Ctrl+A)한 후, Ctrl(맥은 커멘드)키를 누른 상태로 K, F 키를 차례로 누르면 코드가 자동으로 정렬되어 정리된다. html:5 : 프로그램에서는 다음 이미지와 같이 필요한 태그 첫 자를 입력하면 자동적으로 뜨게 된다. (첫 자 입력 후 ctrl+space 입력해도 동일하게 뜸) HTML 파일에서 html:5를 입력하면, 기본 태그가 작성된다. 코드 작성 시 (원하는 코드를 드래그하여) 텍스트 커서 + 방향키 : 코드 열에 텍스트 커서를 둔 후, 방향키를 통해 위/아래로 이동 Tab : 내어쓰기 Shift + Tab : 들여쓰기 Ctrl + / : 주석 걸기 및 풀기 Key Command Command ID Ctrl+Shift+Alt+D.. 2020. 10. 26.
웹표준 및 웹접근성/유효성 검사하기 웹 접근성 진단을 위한 프로그램 및 사이트 웹 접근성 진단을 위한 프로그램 및 사이트를 소개합니다! 1. Colour Contrast Analyser (CCA)텍스트와 그래픽/배경 이미지의 명도 대비를 체크해주는 프로그램스포이드 도구를 사용하여 두 색상의 명암비를 쉽게 결정할 수 있는 TPGi의 무료 색상 대비 검사기 도구WCAG (웹 콘텐츠 접근성 지침)- WCAG 2.0 레벨 AA는 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트의 경우 3:1의 명암비 필요 - WCAG 2.1은 그래픽 및 사용자 인터페이스 구성 요소에 대해 최소 3:1의 명암비 필요- WCAG 레벨 AAA는 일반 텍스트의 경우 최소 7:1, 큰 텍스트의 경우 4.5:1의 명암비 필요  Colour Contrast Analyser (.. 2020. 10. 23.
[Brackets] 확장 기능 설치하기 Brackets 확장 기능 설치하기 1. 확장 기능 창 열기 : [파일 → 확장 기능 관리자...] 또는 우측의 도구 모음에서 [플러그인 블록] 아이콘 클릭! 해당 창에서 확장 기능을 검색하고 설치·제거를 할 수 있다. 2. 확장 기능 창에 설치하고자 하는 연관 단어를 검색하고 우측의 설치 버튼을 클릭하면 완료! - 연관 글 : Brackets TortoiseSVN 확장 기능 Brackets TortoiseSVN 확장 기능 (Windows) Brackets TortoiseSVN : Brackets TortoiseSVN은 브래킷용 TortoiseSVN 메뉴 확장 기능이다. (Windows만 지원함) 이 확장 기능은 commit, switch, update, revert, log, diff, blame in.. 2020. 10. 23.
Brackets TortoiseSVN 확장 기능 (Windows) Brackets TortoiseSVN : Brackets TortoiseSVN은 브래킷용 TortoiseSVN 메뉴 확장 기능이다. (Windows만 지원함) 이 확장 기능은 commit, switch, update, revert, log, diff, blame in File 메뉴, 디렉토리 트리 및 작업 세트 컨텍스트 메뉴와 같은 TortoiseSVN 명령을 추가한다. Brackets TortoiseSVN 확장 기능 설치하기 1. 확장 기능 창 열기 : [파일 → 확장 기능 관리자...] 또는 우측의 도구 모음에서 [플러그인 블록] 아이콘 클릭! 해당 창에서 확장 기능을 검색하고 설치·제거를 할 수 있다. 2. 확장 기능 창에 SVN을 검색하여 Brackets TortoiseSVN를 설치한다. 3. 설.. 2020. 10. 23.
SVN(Subversion) SVN, 서브버전 SVN은 서브버전(Subversion) 명령어를 줄인 말이다. 서브버전은 제한이 있던 CVS를 대체하기 위해 2000년부터 콜랩넷에서 개발됐다. 현재는 아파치 최상위 프로젝트로서 전 세계 개발자 커뮤니티와 함께 개발되고 있다. 서버-클라이언트 모델을 따르는 서브버전 서버는, 작업하는 컴퓨터 내에 둘 수도 있고 전산망에 연결된 별도의 컴퓨터에 두고서도 사용할 수 있다. 서브버전 서버와 클라이언트는 http, https, svn, svn+ssh의 규약으로 통신한다. (wikipedia) SVN 설치 1. SVN 사이트를 접속(tortoisesvn.net/downloads.html)하여, 해당 PC에 적합한 설치 파일을 다운로드한다. 2. 다운로드한 설치 파일을 실행하고 Next 버튼을 계속.. 2020. 10. 21.
CSS Preprocessor, SASS, SCSS CSS Preprocessor(전처리기) CSS 전처리기는 CSS가 동작하기 전에 사용하는 기능을 하며, 전처리기의 종류로는 SASS, LESS, Stylus 등이 있다. (참고로 SASS와 LESS와 같은 컴파일 언어를 개발하기 위해 사용하는 - CSS 도구 개발을 위한 프레임워크 - PostCSS도 있다.) CSS 전처리기는 CSS 문법과 유사하지만 표준 CSS보다 많은 기능을 사용하기 때문에 보다 편리하게 작성할 수 있다. 하지만 웹에서 직접 동작하지 않기 때문에, 작성한 전처리기는 웹에서 동작 가능한 표준 CSS로 컴파일해야 한다. 즉, 전처리기로 작성하고 CSS로 컴파일해서 동작시킨다. (컴파일의 경우 전처리기의 종류마다 방법이 다소 다름) SASS와 SCSS의 차이점? SCSS는 CSS구문과 .. 2020. 10. 15.
모바일 사용자 인터페이스 : 터치 제스처 및 영역 터치 제스처 사용자 인터페이스에서 터치 제스처와 터치 영역은 모바일 기기 사용성의 핵심 요소입니다. 디자이너와 개발자는 사용자의 직관적인 상호작용을 위해 제스처를 이해하고 최적화해야 합니다.터치 제스처의 종류- 탭(Tap) : 화면을 짧고 가볍게 터치하는 기본 동작- 더블 탭(Double Tap) : 빠르게 두 번 연속 터치- 프레스(Press) : 화면을 2초 이상 길게 누르는 동작- 스와이프(Swipe) : 화면을 일정 거리 밀어내는 동작- 플릭(Flick) : 빠르게 스크롤하는 동작- 핀치(Pinch) : 두 손가락으로 확대/축소하는 동작- 팬(Pan) : 손가락을 떼지 않고 계속 드래그하는 동작- 로테이트(Rotate) : 두 손가락으로 회전하는 동작터치 타겟 크기 기준 - 안드로이드: 48 x .. 2020. 9. 16.
UI/UX 용어 : 실무에서 꼭 알아야 할 핵심 용어 가이드 UI/UX 정의UX 디자인이 제품이나 서비스의 전체적인 사용자 경험 및 설계를 다룬다면, UI 디자인은 그 경험을 시각화하는 구체적인 인터페이스를 다룹니다. 두 분야는 밀접하게 연관되어 있으며, 성공적인 제품 개발을 위해서는 UX와 UI가 조화롭게 설계되어야 합니다.UI (User Interface) : 사용자 인터페이스사용자가 디지털 제품과 상호작용하는 시각적 접점입니다. 버튼, 아이콘, 색상, 폰트 등 사용자가 직접 마주하는 모든 시각적 요소를 포함합니다. UI 디자이너의 역할은 서비스나 제품을 사용자가 어떻게 이용하도록 시각적으로 구현할지 고민하고 디자인(톤앤무드, 레이아웃, 컬러, 타이포 등)하는 것입니다.UI 디자이너의 역할 : 사용자가 제품이나 서비스와 상호작용하는 시각적 접점을 설계하는 것입.. 2020. 9. 15.
반응형 레이아웃 그리드 : 머티리얼 디자인 본 글은 구글에서 제시하는 머티리얼 디자인 가이드 중 반응형 레이아웃 그리드의 대부분의 내용을 옮긴 글이며, 일부 편집과 재해석이 있을 수 있습니다. 지난 글에서는 반응형 웹 디자인/레이아웃을 위한 미디어쿼리와 뷰포트에 대해서 알아봤는데, 이번 글에서는 머티리얼 디자인 가이드로 '반응형 레이아웃 그리드'에 대해 알아보고자 한다. 레이아웃 그리드 구성 요소 : Columns, Gutters, Margins 레이아웃 그리드는 ①컬럼(열), ②거터, ③여백으로 이루어져 있다. ① Columns (컬럼/열) 컬럼은 컨텐츠를 담는 영역이다. (컨텐츠 배치 시 거터를 포함 또는 불포함) ㅡ 컬럼 너비 : 고정 값이 아닌 백분율로 정의하여 컨텐츠가 다양한 화면 크기에 유연하게 적응할 수 있도록 한다. ㅡ 컬럼의 수 .. 2020. 9. 11.
모바일 앱의 종류 네이티브 앱 (Native App) 네이티브 앱은 모바일 기기에 최적화된 언어로 개발된 앱으로, 사용자는 App Store를 통해 다운받아 설치하여 사용한다. 장점 모바일에 설치되어 성능이 빠르고 안정적이며, 최적화된 개발 및 업데이트가 가능하다. 모바일 기기의 유틸리티를 사용하기 때문에 GPS, 연락처, 카메라 등 다양한 기능에 접근이 자유롭다. 앱스토어 및 구글플레이에서 쉽게 찾아 볼 수 있다. 애플이나 구글은 자체 툴킷(sdk)과 인터페이스 구성 요소를 제공한다. 단점 Android, iOS 각각의 개별적으로 개발이 필요하므로 시간과 비용이 많이 든다. 정기적인 업데이트가 필요하다. (Android, iOS 각각의 승인 필요, iOS 승인 오래걸림) 앱스토어 및 구글플레이는 인앱결제에 대한 수수료 .. 2020. 9. 10.
반응형 웹 디자인/레이아웃 : 미디어쿼리와 뷰포트 반응형 웹 디자인은 별도의 특별한 기술이 아니다.웹 페이지를 다양한 디바이스의 해상도 및 규격에 맞게 레이아웃을 유연하게 적용(반응)하도록 하기 위해 알아야 할 사항이 있을 뿐이다.  반응형 웹을 제작하기 위해 알아야 할 사항으로는 반응형 이미지 및 타이포그래피 개념과 CSS Media Query(반응형 디자인의 핵심적인 구성요소)라고 할 수 있을 것 같다.    미디어 쿼리 미디어 쿼리는 미디어 유형과 화면 해상도, 뷰포트의 너비 등에 따라 웹이나 앱의 스타일을 수정할 때 사용한다. 미디어 쿼리를 한다는 것은 웹 브라우저에게 질의를 던지는 것이다. 모바일 너비를 640px, 데스크톱 너비를 1024px로 한다는 가정하에 "현재 브라우저 너비는 640px이 맞습니까?" 질의를 던지며 뷰포트가 640px이.. 2020. 8. 21.
길이 "단위"에 대하여 본 글은 MDN의 자료를 보고 스터디하며 작성했습니다. 지난 글에서 상대 길이 단위인 em, rem에 대해 알아봤는데, 이번 글에서는 길이 단위들을 간략히 정리한다. em, rem : 유연하게 반응하는 상대적인 길이 단위 본 글은 하단의 참고 사이트를 통해 스터디하며 작성했습니다. 틀린 부분이나 의견주시면 수정하겠습니다. 보통 폰트나 박스 등의 사이즈를 지정할 때 우리는 생각한 사이즈 그대로 노출하기 �� hyoni-k.tistory.com 절대 길이 단위는 그 어떤 것(환경이나 요소)에도 영향을 받지 않고 항상 동일하게 그대로 유지된다. css에서 px을 사용하는데 px를 제외한 나머지 단위들은 보통 인쇄에서 유용하게 사용된다. 반면에 상대 길위 단위는 root 요소의 폰트 크기나 viewport(사용.. 2020. 8. 13.
em, rem : 유연하게 반응하는 상대적인 길이 단위 본 글을 통해 em, rem은 대략 무엇이고 em, rem을 px 단위로는 어떻게 되는지 알 수 있습니다.본 글은 하단의 참고 사이트를 통해 스터디하며 작성했습니다. 틀린 부분이나 의견주시면 수정하겠습니다.  보통 폰트나 박스 등의 사이즈를 지정할 때 우리는 생각한 사이즈 그대로 노출하기 위해 상대적인 길이 단위가 아닌 절대 길이 단위인 px을 자주 사용한다. 절대 길이 단위는 편리하지만 (목적에 따라) 사이즈가 제각각인 여러 디바이스에서 어떻게 보일지 생각해 볼 필요가 있다. 다양한 디바이스 및 브라우저의 스크린 사이즈에 대응하기 위해 반응형으로 작업한다면 상대적인 길이 단위로 사이즈를 지정해야 할텐데 이때 em, rem 등을 사용한다.(상대 길이 단위로는 em, ex, rem, ch, 1h, vw, .. 2020. 8. 13.
반응형

티스토리툴바