Front End
선택자 Selector
선택자 Selector선택자(Selector)는 CSS 속성을 적용할 대상을 선택하는 방법을 의미한다. 일반적으로 id와 class를 기준으로 많이 작성하지만, 이 외에도 CSS에서는 다양하게 활용할 수 있는 셀렉터를 제공한다.기본 셀렉터전체 셀렉터문서의 모든 요소를 선택한다.* { }태그 셀렉터같은 태그명을 가진 모든 요소를 선택한다. 복수 선택도 가능.h1 { } div { } section, h1 { }attribute 셀렉터같은 속성을 가진 요소를 선택한다.a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { }ID 셀..
CSS 기초
CSSCascading Style Sheets의 약자로 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어.CSS는 단순한 디자인을 넘어서 좋은 사용자 경험(UX; user experience)을 제공하기 위한 도구이다. 같은 콘텐츠를 담더라도 가독성이나 시인성의 차이가 분명해지게 되며, 이는 개발자가 CSS를 통해 웹 앱에 접근하는 사용자 인터페이스(User Interface)부터 만들게 되는 이유이기도 함.CSS는 언어 자체는 단순하지만 프로젝트 규모가 조금만 더 커져도 CSS를 의미 있게 구성하기 어렵다. 단순하기 때문에 그 양이 많아질 수록 코드의 양이 방대해지고 관리가 어려워 지기 때문. → 이런 CSS가 가진 고유한 복잡함을 다루기 위해 많은 종류의 다양한 모범 사례(Best practi..
조건문과 반복문
조건문 (Conditional)어떠한 조건을 판별하는 기준을 만드는 것이며 조건문에는 반드시 비교 연산자(Comparison operator)가 필요하다.비교 연산자3 > 5; // false 4 >= 4; // true 9 < 10; // true 8
문자열
문자열모든 글자의 나열을 뜻하며, 컴퓨터는 코드와 문자열을 구분 할 수 있어야 하기 때문에 작은 따옴표’ 나 큰 따옴표”를 사용해서 문자열을 구분한다.문자 하나는 character이며, char이라는 축약어로 부르기도 함문자열은 read-only이다. 새로 할당 하지 않는 이상 부분 재할당은 할 수 없다.str[index]해당 문자열의 인덱스를 찾아 값을 도출한다. 순서는 0번부터 시작한다. 이 때, index로 접근만 가능할 뿐 (read-only) 해당 문자열을 재할당 할 수는 없다.let str = 'ninefloor'; console.log(str[0]); // 'n' console.log(str[4]); // 'f' console.log(str[9]); // undefined str[0] = '..
UI/UX
UI (User Interface, 사용자 인터페이스)GUI(Graphical User Interface, 그래픽 사용자 인터페이스)UX(User Experience, 사용자 경험)UI와 UX의 관계UI 디자인 패턴모달 (Modal)토글 (Toggle)탭 (Tab)태그 (Tag)자동완성 (Autocomplete)드롭다운 (Dropdown)아코디언 (Accordion)캐러셀 (Carousel)페이지네이션 (Pagenation)무한 스크롤(Infinite Scroll, Continuous Scroll)GNB (Global Navigation Bar), LNB (Local Navigation Bar)그리드 시스템 (Grid System)컬럼 그리드 시스템(Column Grid System)MarginColum..