둠선생 연구실

SASS는 Syntactically Awesome Style Sheets의 약자로 CSS의 단점을 보완하기 위해 나온 CSS 전처리기다. CSS에서 중복, 반복되는 부분 등 불편함을 해소하기 위해 만들어졌다. SASS는 Sass와 SCSS가 있다. (이름이 비슷해서 헷갈리기 쉽다.) sass파일 자체를 HTML과 연결하여 사용하는 것이 아니라, sass를 통해 작성된 문서를 컴파일러를 통해 css파일로 컴파일 하여 html 문서에 링크한다. 따라서 컴파일러가 필요한 데 Ruby와 C++ 기반의 컴파일러가 기존에 많이 사용되었지만, 현재는 Dart 언어를 기반으로 한 Dart Sass를 권장하고 있다. 1. Dart 설치 먼저 Dart 언어를 설치해야 한다. IDE는 상관이 없으나 본인 PC에 설치되어 있..

탭 간의 이동은 자주 실행하는 명령이지만, 단축키가 지정되어있지 않으면 마우스를 이용해야 하기때문에 불편합니다. VS code에서는 탭 이동 명령을 단축키로 지정할 수 있습니다. 1. 먼저 파일 -> 기본설정 -> 바로가기 키를 누릅니다. 2. 우측 상단에 보이는 바로가기 키 열기를 누릅니다. 3. 아래와 같은 화면이 나옵니다. 이제 아래의 코드를 입력해줍시다. { "key": "ctrl+0", "command": "workbench.action.openLastEditorInGroup" }, { "key": "ctrl+1", "command": "workbench.action.openEditorAtIndex1" }, { "key": "ctrl+2", "command": "workbench.action.o..

제이쿼리를 사용하는 방법으로는 크게 두 가지 방법을 사용한다. 프로젝트 폴더 내에 jquery 파일을 위치시키고 2. CDN을 이용한 방법 https://developers.google.com/speed/libraries#jquery Hosted Libraries | Google Developers A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries. developers.google.com 구글 CDN 페이지에서 원하는 버전의 jquery를 복붙해서 html에 넣어주기만 하면 된다. (매우 쉽다) 그 밖에도 얼마든지 다..

우리가 웹페이지를 읽는 과정은 웹문서를 가지고 있는 서버에 데이터를 요청하여 브라우저에서 해당 내용을 보여주는 것이다. 그렇기 때문에 인터넷에 연결된 상태에서 인터넷 사이트에 접속하여 웹페이지를 볼 수 있다. 그렇다면 만약 오프라인 상태에서 웹페이지를 보고 싶다면 어떻게 해야할까? 물론 방법은 당연히 데이터를 미리 내 로컬 디렉토리에 저장해놓아야 한다. 이번엔 HTTrack을 이용한 웹페이지를 다운로드 하는 방법을 알아보고자 한다. 1. HTTrack 다운로드 https://www.httrack.com/page/2/en/index.html Download HTTrack Website Copier 3.49-2 - HTTrack Website Copier - Free Software Offline Brows..

웹 페이지에서 사용자의 마우스나 키보드에 의한 입력과 이미지나 문서의 로딩 등, 문서나 브라우저에 변화가 생길 경우 이벤트(Event)가 발생한다. 또한 이벤트를 처리하기 위해 작성된 자바스크립트 코드를 이벤트 리스너(Event Listener)라고 한다. 첫 번째로 간단하게 HTML 태그 내에 이벤트 리스너를 작성할 수 있다. 코드가 짧을 경우 주로 사용한다. Click me 두 번째로는 DOM객체의 이벤트 리스너 속성을 이용하여 작성하는 방법이다. function mover() { // 마우스를 올렸을 경우 동작할 내용 } var p = document.getElementById("p"); p.onmouseover = mover; 세 번째로 DOM객체의 addEventListener() 메소드를 활용..

HTML 문서 내에서 자바스크립트 작성할 수 있는 위치 다음과 같다. html 태그의 이벤트 리스너 속성에 작성 태그 내에 작성 자바스크립트 파일을 따로 작성 URL 부분에 작성 클릭 시 실행 자바스크립트에서 var 키워드로 변수를 선언할 수 있고, string(문자열), boolean, number(숫자), 객체 리퍼런스, null 값 등을 지정할 수 있으며, 아무것도 할당 받지 못한 객체를 undefined라고 한다. 자바스크립트에는 사용자가 직접 객체를 만들어 사용할 수도 있지만, 기본적으로 제공되는 객체가 있다. 자바스크립트에서 기본으로 제공되는 객체로 Array, Boolean, Date, Math 등 기본객체가 있으며 이들을 코어객체라고도 한다. HTML DOM(Document Object M..

웹 워커(Web worker)는 자바스크립트 코드를 백그라운드에서 실행시킬 수 있게 해주는 HTML5의 표준 기능이다. 실행시간이 긴 계산 작업을 별도로 백그라운드에서 실행시켜 사용자 인터페이스를 원활하게 할 수 있다. 웹 워커 기능을 사용하려면, 자바스크립트 파일 형태로 만들어져야하며, 웹페이지와 동일한 웹사이트에 설치되어 있어야한다. 또한 로컬 컴퓨터에 있는 웹 페이지에서는 작동하지 않는다. 웹 워커 기능을 이용하여 만든 백그라운드 테스크를 워커 테스크라고 한다. 먼저 백그라운드에서 동작할 자바스크립트 코드를 만들어야 한다. 일반적으로는 실행속도가 오래걸리는 작업을 백그라운드에서 동작시키도록 하지만, 연습을 위해 demo_workers.js 라는 코드를 아래와 같이 생성하였다. var i = 0; f..

우리가 웹 페이지에서 무엇인가 정보를 기억해야할 때, 예를 들면 쇼핑몰에서 우리가 장바구니에 담아둔 목록과 같은 정보들이 있을 때, 이러한 사용자들의 정보를 모두 웹 서버에 저장하는 것은 웹 서버의 저장 공간 뿐만 아니라 네트워크 트래픽 증가도 일으킬 수 있다. 따라서 이와 같이 필요한 정보를 웹 스토리지(Web storage) 기능을 이용해 저장하기도 한다. 웹 스토리지는 2가지 종류로 나누어 볼 수 있다. 세션 스토리지 (Session Storage) 로컬 스토리지 (Local Storage) 세션은 브라우저 창과 웹 사이트가 연결된 상황을 말하는 데, 세션 스토리지는 세션이 생길 때 생성되며, 세션이 종료될 떄 종료되는 일시적인 저장공간이다. 세션 스토리지는 한 세션 동안 주고 받는 데이터를 일시적..