그럼에도 불구하고

오늘은 정규 표현식으로 특정 문자를 검색해 보자 [ 정규 표현 패턴의 표기 ] 문자열의 패턴은 내용의 앞뒤에 /를 삽입한다. /패턴/ 대표적인 패턴 패턴 의미 x 문자 x xyz 문자열 xyz [xyz] x, y, z 중 하나의 문자 [a-z] a ~ z 중 하나의 문자. [a-f]. [A-Za-z] 방식도 가능 [^xyz] x, y, z 외 하나의 문자 [^a-z] a ~ z 외 하나의 문자 abc|xyz 문자열 abc 혹은 xyz {숫자} 반복 횟수 ^x 시작 문자 x x$ 종료 문자 x . 하나의 문자(줄바꿈 코드 제외) x* 0개 이상 계속되는 x* \ 다음에 오는 문자를 이스케이프(escape) 처리 \d 숫자 [0-9] \D 숫자가 아닌 문자 [^0~9] \w 영문, 숫자, 언더바 [A-Za-..

오늘은 자바스크립트 내장 객체에 대해 알아보자 [ Array 객체 ] Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룬다. 배열을 자바스크립트에서 자주 사용하는 자료형이므로 Array 객체의 주요 프로퍼티와 메서드를 잘 알고 사용하는 것이 중요하다. [ Array 객체의 메서드 ] Array 개체에는 여러 가지 메서드가 있다. 종류 설명 concat 기존 배열에 요소를 추가해 새로운 배열을 만든다. every 배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환하고 그렇지 않으면 false를 반환한다. filter 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만든다. forEach 배열의 모든 요소에 대해 주어진 함수를 실행한다. in..

오늘은 부트스트랩에 대해 알아보자 Bootstrap은 빠르고 간편한 반응형 웹 디자인(responsive web design)을 위한 open-source front-end framework이다. HTML, CSS JavaScript로 만들어진 typography, 입력양식(forms), 버튼, 테이블, 탭, 네이베이션, 이미지 캐러셀 등을 제공하며 추가적으로 JavaScript plugin들을 제공한다. https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components..

오늘은 이벤트와 각종 이벤트 처리기에 대해 알아보자 [ 이벤트 ] 이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다. 예를 들어 키보드에서 키를 누르는 것도, 웹 브라우저에서 새로운 페이지를 불러오는 것도 이벤트이다. 하지만, 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아니다. 이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한다. 따라서 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다. 예를 들어 브라우저 창 맨 위의 제목 표시줄을 클릭하는 것은 이벤트라고 하지 않는다. 자바스크립트의 이벤트는 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생한다. [ 마우스 이벤트 ] 마우스 이벤..

오늘은 지역 검색을 할 수 있는 code를 만들어보자 조건 지역명의 첫 번째 글자만 받아서 검색한다. (한글, 영어) 검색된 지역명과 data에 있는 지역명이 일치하는 지역만 보여준다. 일치하지 않는 지역은 보여주지 않는다. ( display: none; 속성 이용 ) [ searchName.html ] 지역명의 첫번째 글자를 입력해주세요. 속초 부산 포항 상주 서울 제주 김해 대구 울산 창원 마산 인천 평택 의정부 고양 성남 용인 부천 안산 남양주 시흥 파주 김포 광명 군포 이천 하남 과천 전주 군산 목포 나주 광양 춘천 원주 사천 광주 구리 삼척 당진 공주 천안 부천 수원 세종 대전 충주 [ search.js ] const numberMaxLength = function (e) { const MAX_..

오늘은 벤더 프리픽스에 대해 알아보자 CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용해야 한다. Can I use? 에서 제공하는 브라우저별 CSS 지원 정보를 보면 텍스트와 요소의 선택을 방지하는 user-select 프로퍼티는 모든 브라우저에 벤더 프리픽스를 사용하여야 한다. 브라우저의 버전이 올라감에 따라 벤더 프리픽스를 사용하지 않아도 될 수 있다. 그러나 구형 브라우저를 지원하기 위하여 벤더 프리픽스를 사용하여야 할 필요가 있다. Can I use... Support tables for HTML5, CSS3, etc caniuse.com * { -webkit-user-select: none; /*..

지난번에 다뤄본 변수 호이스팅을 변수별로 알아보자 [ 변수 선언의 실행 시점과 변수 호이스팅 ] console.log(score); // undefined var score; // 변수 선언문 위의 예제에서는 변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(score);가 가장 먼저 실행되고 순차적으로 다음 줄에 있는 코드를 실행한다. 따라서 console.log(score);가 실행되는 시점에는 아직 score 변수의 선언이 실행되지 않았으므로 참조 에러(ReferenceError)가 발생할 것처럼 보인다. 하지만 참조 에러가 발생하지 않고 undefined가 출력된다. 그 이유는 변수 선언이 소스코드가 한 줄..

오늘은 전역 변수의 문제점에 대해 알아보자 전역 변수에는 여러 가지 문제점이 있다. 우선 지역 변수는 (함수 내부에 선언되었다고 가정) 함수가 호출되면 생성되고 함수가 종료하면 소멸된다. 하지만 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 즉, 지역 변수에 비해 생명 주기가 길다. [ 전역 변수의 문제점 ] 1. 암묵적 결합 전역 변수를 선언한 의도는 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 뜻이다. 이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합(implicit coupling)을 허용한다. 변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다. 2. 긴 생명 주기 전역 변수는 생명 주기가 길다..

오늘은 CSS 그리드 레이아웃에 대해 알아보자 [ CSS 그리드 레이아웃 ] 그리드 레이아웃을 많이 사용하면서 플렉스 박스에 이어 CSS 그리드 레이아웃(CSS grid layout)이라는 새로운 CSS 표준이 만들어졌다. 플렉스 박스를 사용할 때는 '주축'이라는 개념이 있어 수평이나 수직 중 하나를 기준으로 해서 요소를 배치한다. 하지만 CSS 그리드 레이아웃은 수평과 수직 어느 방향이든 배치할 수 있다. CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용한다. 그래서 플렉스 항목은 1차원이고 CSS 그리드 레이아웃은 2차원이라 말한다. CSS 그리드 레이아웃은 가로 방향을 가리키는 줄(row)과 세로 방향을 가리키는 칼럼(column)으로 웹 화면을 구성한다. 그리고 칼럼과..

오늘은 플렉시블 박스 레이아웃에 대해 알아보자 [ 플렉시블 박스 레이아웃 ] 플렉시블 박스 레이아웃(flexible box layout)은 그리드 레이아웃을 기본으로 하고, 각 박스가 원하는 위치에 따라 배치하는 것이다. 이때 여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수 있다. 플렉시블 박스 레이아웃은 수평 방향이나 수직 방향 중에서 한쪽을 주축으로 정하고 박스를 배치한다. 예를 들어 아래의 그림처럼 주축을 수평으로 정하면 박스를 왼쪽에서부터 오른쪽으로 순서대로 배치하는데, 화면 너비를 넘어가면 수직으로 이동해서 다시 순서대로 배치한다. ( 플렉시블 박스 레이아웃을 플렉스(flex) 박스 레이아웃이라고도 한다. 아래부터는 플렉스 박스 레이아웃으로 지칭하겠다.) 플렉스 박스 레이아웃에 ..

오늘은 그리드 레이아웃에 대해 알아보자 [ 그리드 레이아웃 ] 반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 한다. 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃(grid layout)을 사용한다. 그리드레이아웃이란 웹 사이트를 여러 개의 칼럼(column)으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말한다. 그리드 레이아웃을 사용하면 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있다. 그리드 레이웃의 특징을 알아보자 시각적으로 안정된 디자인을 만들 수 있다. 그리드 레이아웃을 사용한 웹 사이트 디자인은 사용자에게 안정감을 준다. 이미 책이나 신문 등 여러 시각매체에서는 대부분 그리드 레이아웃을 사..

오늘은 반응형 웹에 대해 알아보자 [ 반응형 웹 디자인이란? ] 요즘은 PC나 노트북보다 더 작은 스마트폰에서 웹 사이트에 접속하는 경우가 많다. 그런데 PC와 스마트폰의 화면 크기는 다르므로 PC용으로 만든 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨로 표시된다. 데스크톱에서 보여주던 내용을 스마트폰의 작은 화면 안에서 보여줘야 하기 때문이다. 그래서 포털 사이트나 쇼핑몰 사이트의 경우 모바일 기기의 특성을 충분히 활용할 수 있도록 모바일 사이트를 별도로 제작한다. 하지만 스마트폰이나 태블릿, 스마트 TV 등 브라우저 환경이 다양하게 바뀌는데 그때마다 웹사이트를 각각 제작하는 것은 쉬운 일이 아니다. 그래서 반응형 웹 디자인 (Responsive web design)이 필요하다. 반응형 웹 디자인..