프론트엔드 3

filter(필터): 배열의 성분이 불편해? / 자바스크립트 메서드

filter filter 메서드란? : array(배열)의 성분을 필터링하여 새로운 배열을 만드는 메서드. 인자는 콜백함수, 반환값은 배열이다. 기억할 것: 기존의 배열성분을 수정하는 메서드가 아니다. 필터링된 새로운 배열을 반환하는 메서드이다. 문법 // 코드의 형태 array.filter(callback함수); //새로 만들어진 배열을 저장할때 const newArray = array.filter(callback함수); filter 메서드의 인자 1. 인자는 callback 함수이다. 이미 정의되어 있는 함수명이나, 익명함수(arrow function)가 filter 메서드의 인자가 될 수 있다. 2. 콜백함수는 boolean값을 반환해야 한다. true or false를 반환하는 함수가 사용되어야 ..

CSS Selector(CSS 선택자): 기본선택자, 선택자 우선순위 및 선택자 조합하기

공부동기 지난주부터 자바스크립트를통해 DOM등을 이용해 HTML요소를 조작하는방법을 공부하고 있다. 이중에 자바스크립트가 querySelector를 통해 HTML에 접근할때, 인자를 CSS 선택자로 받아들이는것을 보고 한번쯤은 CSS 선택자를 정리할 필요를 느껴 포스팅을 작성한다. 이 글의 목차 1. CSS개념: HTML요소 스타일링하기 2. 기본 CSS 선택자 3. CSS 선택자 우선순위 4. CSS 선택자 결합하기 1. CSS개념: HTML요소 스타일링하기 목차로 돌아가기 CSS (Cascading Style Sheets)란? CSS는 HTML과 같은 웹페이지 문서의 디자인에 사용되는 언어이다. Cascading은 상하식, 계단식이란 뜻이다. CSS를 사용하여 디자인을 지정하는 HTML, XML, X..

bootstrap(부트스트랩) 으로 웹페이지 상단메뉴 구현

부트스트랩? 웹 디자인용 템플릿 코드를 모아놓은 Html, CSS, js기반의 프론트엔드 프레임워크. 특징 mobile-first(모바일 우선): 스마트폰, 태블릿등의 모바일 사이트를 개발하기 수월하다. responsive(반응성): 화면의 크기에 맞춰서 웹페이지의 요소들이 자동으로 조절된다 홈페이지 Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr bootstrap, navbar, toggler를 이용해서 링크 목록을 제공해주는 버튼을 만들어보자. navbar? 네비게이션바의 준말로 웹사이트 맨위에서 사이트..