둠선생 연구실

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에 설치되어 있..

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

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

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

웹 페이지 내에서 사용자의 입력을 받기 위한 구성요소를 웹 폼(Web form)이라고 한다. 예를 들면, 우리가 평소에 사용하는 검색창 혹은 로그인 창과 같은 형태가 모두 웹 폼이다. HTML에서 웹폼을 구성하기위해선 태그를 사용한다. 폼 태그 사이에는 웹 폼을 구성하기 위한 다양한 태그들이 들어갈 수 있는 데, 폼 요소(form element)라고 부른다. 먼저 태그에 지정할 수 있는 속성들을 살펴보자. 속성(Attribute) 설명(Description) accept-charset 제출 된 폼에 사용 된 문자 세트를 지정합니다 (default: the page charset). action 폼을 제출할 주소 (URL)를 지정합니다. (default: the submitting page). autoco..

CSS는 HTML 문서에 크기나 색상 등 스타일에 관한 요소들을 적용시킬 때 사용된다. CSS 사용방법은 일반적으로 아래와 같이 사용한다. 태그 내에 태그를 통해 스타일 시트를 작성하는 방법 태그내에 style 속성 지정해 주는 방법 스타일 시트를 css파일로 작성한 뒤 태그나 @import를 이용하여 적용하는 방법 태그 내에

HTML(HyperText Markup Language) 표준 HTML5를 기준으로 작성 HTML은 태그로 구성되어 있다. HTML에는 약 150여 가지의 태그들이 있다. 그중에서 문서작성에 필수적인 태그가 있는 반면, 사용빈도가 낮은 태그들도 있다. 당연히 주로 자주 사용되는 태그 위주로 사용방법을 기억하고, 활용빈도가 낮은 태그는 사용해야할 경우에 따로 찾아서 사용하는 것을 추천한다. 태그는 와 같이 여는 태그와 닫는 태그로 이루어지기도 하고, 태그나 줄바꿈 태그와 같이 단독으로 활용되는 태그들도 있다. 태그에는 속성(property)이라는 것이 들어갈 수 있는데, 태그종류에따라 필수속성과 그렇지 않은 속성이 있을 수 있다. 예를들어 링크를 지정하기 위한 태그에는 href라는 속성을 반드시 지정해주어..