Scientific Computing & Data Science

이번 글에서는 HTML 페이지에서 페이지를 스크롤 다운(Scroll Down) 시 일정 이상이 스크롤 다운되면 콘텐츠가 고정되는 예제입니다.웹페이지를 스크롤 다운하다가 상단의 메뉴가 사라지면 메뉴를 클릭하기 위해 다시 웹페이지를 스크롤 업(Scroll Up)해야 하는 불편함이 있습니다.본 예제는 이러한 불편함을 제거해 주는 기능 구현에 관한 것이며, 대다수의 모던 웹페이지들이 채택하는 것이기도 합니다.HTML다음 HTML 문서는 예제용 문서이며, 핵심은 JavaScript 코드임을 명심하길 바랍니다. scroll-fixed.html Example - Fixed Content While Scrolling 1st Menu 2nd Menu 3rd Menu SassCSS의 전처리기인 Sass 파일로 작성하였습니..

이 글에서는 CSS 전처리기(Preprocessor)인 Sass의 간단한 사용법 및 컴파일 등에 대하여 알아보고자 합니다. 현재 널리 사용되는 CSS 전처리기는 Sass, LESS, Stylus가 있으며, 이 중 현재 개발자들이 가장 많이 사용하는 전처리기는 Sass입니다.CSS 전처리기란 무엇인가?최근 웹페이지의 경향에 있어 CSS 문서 작성이 점점 양이 방대해지고 있는데, 주로 반복적인 작업이 많이 요구되기 때문입니다. 즉, hex 컬러값을 찾는 것과 tag를 닫는 일, 클래스를 상속받아야 하는 것으로 인한 copy & paste 등 비효율적으로 시간이 요구되는 작업이 많습니다. 이것이 CSS 전처리기 등장의 이유이며, 단지 CSS 전처리기는 CSS를 확장하기 위한 스크립팅 언어이며 컴파일러를 통해 ..

이번 글에서는 Modal Dialog를 작성하는 방법에 대해 알아보고자 한다.본 예제는 W3Schools.com의 예제를 기반으로 jQuery로 동작하도록 작성한 것이며, 버전 3.0.0을 이용하여 작성되었지만, 이전 버전에서도 큰 문제없이 동작하리라 생각된다. 편의를 위해 jQuery 3.0.0 소스를 첨부한다: HTML다음과 같이 index.html 파일을 작성한다: [index.html] Modal Example Open Modal × Some text in the Modal.. CSSCSS 파일을 다음과 같이 작성한다: [modal-dialog.css]/* The Modal (background) */ .modal { display: none; /* Hidden by default */ posit..

이번 글에서는 CSS3에 공식적으로 포함되어 있지는 않지만, 테스트 해 볼만한 새로운 기능인 이미지 반사(Image Reflection)에 대하여 알아 보도록 하겠다.[테스트 이미지] landscape.jpg 준비테스트를 위해 HTML 파일을 다음과 같이 준비한다.[index.html] 단, 준비한 이미지 "landscape.jpg"는 index.html 파일과 동일한 경로에 존재하여야 한다.포함한 CSS 파일 "base.css"에서 이미지 반사 옵션에 대한 코드를 작성할 것이다.기본 반사기본 반사 옵션은 원본 이미지 그대로 반사되는 효과를 의미한다.CSS 파일에 img라는 클래스를 정의하고 다음과 같이 옵션을 작성한다.[base.css]img { -webkit-box-reflect: below; } 결..

원본: http://www.zdnet.co.kr/news/news_view.asp?artice_id=20151201024656&type=det&re= "자바스크립트가 세상을 먹어치우고 있다(Javascript Is Eating The World)” ​세상에 나온지 20년 가까이 된 언어인 자바스크립트가 재조명받고 있다. 다양한 자바스크립트 프레임워크와 라이브러리가 등장하고 또 발전하면서 웹부터 서버, PC 및 모바일 네이티브 앱 개발까지 안 쓰이는 곳이 없어졌기 때문이다.​소프트웨어가 세상을 먹어치우고 있다면 소프트웨어를 먹어치우고 있는 건 자바스크립트다는 말도 들린다. 자바스크립트가 어디에나 있다는 의미로 '자바스크립트 유비쿼터스'라고 하는 사람도 있다.​■ 워드프레스닷컴은 왜 PHP를 버리고 자바스크..

by Geol Choi | March 12, 2014프로젝트 파일 다운로드이번 글에서는 Node.js를 이용한 서버 스크립팅과 Node.js 상에서 구동되는 MongoDB 모듈인 Mongoose를 이용하여 회원 관리 및 블로그 포스팅 기능이 포함된 웹 페이지를 만들어 보도록 하겠다.서버 응답에 대하 클라이언트-사이트 HTML 렌더링 방식은 HTML5의 JavaScript 형식을 지원하는 "ejs(Embedded JavaScript)"가 활용되었다. 이를 위해, Node.js의 ejs 엔진 모듈이 사용되었다. 차례사전 이해 요구사항사전 준비사항MongoDB 설치 및 실행Node.js 설치 및 실행웹 페이지 전체 구조프로젝트 폴더 전체 구조Node.js 패키지 모듈 설치전체 논리 흐름app.jsindex.j..

http://oscarotero.com/jquery/