본문 바로가기

Front-End5

Lodash : _.filter(조건에 맞는 데이터 컬렉션 만들기) Lodash: _.filter(조건에 맞는 데이터 컬렉션 만들기) ._filter 📌 _.filter(collection, [predicate=_.identity]) 컬렉션 데이터 중 내가 원하는 데이터로만 재구성 된 컬렉션 만들기 var users = [ { 'user': 'barney', 'age': 36, 'active': true }, { 'user': 'fred', 'age': 40, 'active': false } ]; _.filter(users, function(o) { return !o.active; }); _.filter(users, function(o) { return o.user == 'fred'; }); // => objects for ['fred'] _.filter(users, {.. 2023. 6. 7.
Lodash 란? Lodash 란? Lodash 란? 📌 Lodash A modern JavaScript utility library delivering modularity, performance & extras. - 인기있는 자바스크립트의 라이브러리 ! - 데이터의 구조를 쉽게 변환하여 사용할 수 있음 (array, collection, date 등) - 배열 안 객체들의 값을 다룰 때 유용 Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.Lodash’s modular methods are great for: Iterating arrays, objects, & string.. 2023. 6. 7.
HTML5 레이아웃 : 의미(semantic) 요소 HTML5 의 레이아웃을 위한 의미(semantic)요소 Header 영역 Nav 영역 Section 영역 Footer 영역 2023. 4. 3.
HTML의 기본 구조 HTML 이란? 📌 HTML HTML은 HyperText Markup Language의 약자 HTML 태그는 보통 시작 태그(start tag, opening tag)와 종료 태그(end tag, closing tag)의 한 쌍으로 구성 빈 태그(empty tag) : 등과 같이 종료 태그 없이 시작 태그만을 가지는 태그 HTML 의 기본 구조 : 현재 문서가 HTML5 문서임을 명시합니다. : HTML 문서의 루트(root) 요소를 정의합니다. : HTML 문서의 메타데이터(metadata)를 정의합니다. - 메타데이터(metadata) : HTML 문서에 대한 정보(data). 웹 브라우저에는 직접적으로 표현되지 않는 정보 - , , , , , 태그 등을 이용하여 표현 : HTML 문서의 제목(tit.. 2023. 4. 3.
CSS : 테이블 가로 scroll(스크롤) 적용 (+ overflow) 테이블에 담아야 할 내용이 너~~무 많고 앞으로도 계~~속 추가 된다면 한 화면에 다 담기가 어렵다. 만든 테이블의 컬럼이 25개 였는데, 모두 한 화면에 담으려니 이렇게 못생겨진다 !! 이럴 때 사용하는 가로 스크롤 ! 적용시켜보자 :) 테이블에 가로 스크롤 적용 - 줄바꿈 없이 하기 - 테이블 내용 생략 - 테이블을 감싸고 있는 div에 style="overflow: auto;" 적용 테이블에 style="white-space: nowrap;" 적용 (줄바꿈 되지 않도록) 위 내용을 잘 적용하면 테이블에 스크롤이 생기고, 내용이 가로로 잘 펼쳐지는 모습을 확인할 수 있다 :) 테이블에 가로 스크롤 적용 - 줄바꿈 적용 테이블을 감싸고 있는 div에 style="overflow: auto;" 적용 테이.. 2023. 3. 9.