UX·UI - FrontEnd Dev. Story

프론트엔드 119

[Javascript] 정규 표현식이란? Regular expression 알아보기

정규 표현식 소개 - 정규표현식(Regular expression)은 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 '형식단어'이다. - 정규 표현식은 많은 텍스트 편집기와 프로그래밍 언어에서 '문자열의 검색과 치환'을 위해 지원하고 있다. ​ ​ ​var regex = /정규표현식/; if(!regex.test("검사할문자열")) {...} ​ - Javascript는 정규 표현식을 슬래시( / )로 감싸서 표현한다. (따옴표가 아님에 주의) - 정규 표현식은 하나의 객체 형태가 되고, 내장하고 있는 test() 메서드를 통해 문자열이 그 식에 부합할 경우 true, 그렇지 않을 경우 false를 리턴한다. - 정규 표현식의 검사 결과는 보통 문자열이 식에 부합되지 않을 때에 대한 예외 처리가..

[모바일 UI] 모바일 앱 UX-UI 굿 디자인 팁 Tip 정보

UI - User Interface Design : 사용자(User) 위주의 인터페이스. 즉, 인터페이스를 만드는 기술과 디자인을 실현시켜 사용하는 것이다. 모바일이나 웹디자인에서의 UI는 보다 세부적인 범위로 그래픽 사용자 인터페이스를 뜻하는데, 사용자가 어떤 프로그램을 접했을 때, 더 효과적이고 편리하게 이용할 수 있도록 메뉴나 버튼 등을 디자인하는 것입니다. 쉽게 설명하자면, 사용자가 길을 헤매지 않도록 표지판 같은 역할을 해주는 것이지요. UX - User Experience Design : 사용자가 제품과 서비스, 그리고 그것을 제공하는 회사와 상호작용하면서 발생하는 모든 경험의 총합을 의미합니다. ‘사용자 경험’이라는 전체적인 콘셉트 아래 프로그램의 개발과 디자인을 디렉팅하게 되죠. 또한, 사..

[Javascript] 자바스크립트 기초 배열 문법 활용하기

배열 배열은 여러개의 데이터를 순차적으로 저장하는 저장소이며, 사용하는 방법이 다양합니다. 1.문법 var 변수명 = [값1, 값2, 값3......] 배열 사용하는 방법 01 배열을 선언하고 데이터를 순차적으로 선언하는 방법입니다. var arr1 = new Array(); arr1[0] = 100; //첫번째 배열 저장소에 100을 저장 arr1[1] = 200; //두번째 배열 저장소에 200을 저장 배열 사용하는 방법 02 배열을 선언과 동시에 데이터를 넣는 방법입니다. var arr2 = new Array(100,200); 배열 사용하는 방법 02 배열을 선언하지 않고 바로 데이터를 넣는 방법입니다. var arr3 = [100,200]; 2. 배열 객체의 메서드 / 속성 종류 설명 join()..

[Javascript] 자바스크립트 변수 / 변수명 활용하기

변수명 자바스크립트에는 의미를 가진 단어들이 있기 때문에 사용자가 임의로 사용할 수 없는 단어들이 있습니다. 키워드 : 자바스크립트에서 사용하는 단어 식별자 : 사용자가 임의로 사용하는 단어 1. 키워드 break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, false, finally, for, function, if, import, in, instanceof, new, null, return, super, switch, this, throw, true, try, typeof, var, void, while, with, yield 2. 단어를 조합할 때 규칙 언더스코어 노테이션(스네이크..

[CSS] flex 관련 속성 정리 flex-direction / flex-wrap / flex-flow

1. flex-direction - 요소들 나열 방향 지정 A B C D E F main { width: 200px; height: 200px; border: 1px solid lightgray; display: flex; flex-direction:row; } main div { width: 50px; height: 50px; } flex-direction 속성의 부모 요소에 display:flex; 설정 되어 있어야 합니다. 그리고 flex-direction 속성 기능을 기재하지 않으면 기본값은 row 이므로 즉, 가로로 정렬 됩니다. row : 가로로 정렬 row-reverse : 가로로 오른쪽에서부터 정렬 column : 세로로 정렬 column-reverse : 세로로 밑에서부터 정렬 initi..

프론트엔드/CSS 2019.12.23
반응형