html5
-
[CSS Grid] 2. Hello World CSS Grid프로그래밍/HTML5 Web 2018. 7. 14. 17:31
코스이름은 Your First Grid 인데 너의 첫 그리드 라고 제목짓긴 좀 그래서 그냥 Hello World라고 지었다. 이번 강의는 매우 심플하다. Grid을 사용해서 행과 열 모양을 만드는 강좌이다. .container{ display: grid; grid-template-columns: 100px auto; grid-template-rows: 50px 50px 200px; grid-gap: 3px; } 1 2 3 4 5 6 아래와 같은 코드인데 완성시키면 아래와 같은 모양으로 완성이 된다. 일단 내가 이해한바로는 display 값에서 grid를 사용하겠다고 선언하고, 행과 열에서 px을 지정해주는데 auto의 경우에는 남는 비율을 전부 차지하는것 같았다. grid-gap의 경우에는 사이의 빈공간..
-
[CSS Grid] 1. 코스 소개프로그래밍/HTML5 Web 2018. 7. 14. 17:14
CSS Grid을 공부해야하는 이유는 무엇인가? 1. 2차원의 레이아웃을 쉽게 개발이 가능하다2. 간단한 마크업3. 유연함4. 프레임워크 스킵5. 브라우저 지원 이러한 장점들이 있다고한다. 나는 개인적으로 다른 부분은 모르겠고 어떤 프레임워크를 추가하지 않다고 된다는 점에 끌렸다. 일단 코드를 살펴보자 CSS GRID HEADER MENU CONTENT FOOTER BOOTSTRAP HEADER MENU CONTENT FOOTER CSS Grid을 사용한 방법과 Bootstrap을 사용한 예제를 보여주고있다. 설명하길 CSS Grid보다 Bootstrap에서의 클래스 네임이 훨씬 더 지저분하고 알아보기 어렵다고 설명하고 있다. 참고로 결과물은 동일하다. 이제 본격적으로 CSS Grid에 대해서 알아보도록..
-
CSS Grid 공부를 시작하며프로그래밍/HTML5 Web 2018. 7. 14. 16:49
프로젝트를 진행하면서 항상 진행을 방해하던것이 CSS이다. 그렇다고 기본 개념을 모르고 있는건 아닌데 항상 제대로 레이아웃을 구성하고 뭔가 제대로 ? 멋있게 만들어보려하면 굉장히 머리아프게 만들어서 포기하게 만드는 놈인것같다. 그래서 부트스트랩을 공부할까 레이아웃을 짜는 법을 공부해보려고 알아보던 도중에 해외에서 아주 좋은 자료를 발견하였다. https://scrimba.com/g/gR8PTE 여기로 접속하면 되는데 CSS Grid에 대해서 아주 상세하게 무료로 알려주고 있다. 단점이라면 영어인 부분이 있긴하지만 개발자에게 영어는 필수이기에 ㅎㅎ.. CSS Grid가 무엇인가에 대해서 좀 찾아보았더니 아주 신세대? 기술로서 앞으로는 아주아주 잘 활용될 것이라는 어떤 블로거 분의 글이 있어서 이번 기회에 ..
-
[HTML5] 웹워커 Web Worker 기초 상식과 개요프로그래밍/HTML5 Web 2016. 7. 13. 15:46
HTML5에 추가된 기능은 기존의 기능을 응용하여 대부분 구현할수 있는데 저번에 다룬 해시 변경 이벤트도 타이머로 구현할수 있으며 드래그와 드롭 기능도 jQuery와 같은 라이브러리로 구현이 가능합니다. 하지만 아무리 대체하려해도 기존의 기능으로는 구현할수 없는 것이 있는데 이것이 웹 워커(Web Worker) 입니다. 코드 진행에 있어서 작은 실행 흐름 단위를 스레드라고 부르는데, 스레드를 여러개생성하면 동시에 여러 개의 코드를 병렬로 실행이 가능합니다. 하지만 자바스크립트의 경우에는 스레드를 별도로 생성할수 없으므로 한번에 하나의 코드만 실행합니다. 이것을 보완하기 위해 비동기 입출력과 이벤트로 동시에 여러 가지 일을 하는 것처럼 개발을 할수 있습니다.다음의 코드는 XMLHttpRequest 객체로 ..
-
[HTML5] HashChange Event 해쉬 변경 이벤트 처리 PushState와 popState 메서드프로그래밍/HTML5 Web 2016. 7. 11. 21:46
Sammy.js 라이브러리를 통해 히스토리를 관리하여 해시를 사용하여 뒤로가기 버튼을 활용해보았습니다. 다만 Sammy.js 라이브러리를 사용하지 않고 해시 이벤트를 구현해보도록하겠습니다. HTML5에서 hashchange 이벤트로 해시 변경을 검사합니다. 12345678910111213141516171819 Hash Change //Connect Event window.addEventListener('hashchange', function () { //Show alert(location.hash); }); Move To Point_A Move To Point_BColored by Color Scriptercs 코드를 실행하고 a 태그를 각자 클릭하면 해시가 변경되면서 이벤트 리스너가 실행됩니다. 이후에..
-
[HTML5] Sammy.js 라이브러리에서 요청 매개변수 처리프로그래밍/HTML5 Web 2016. 7. 10. 18:15
Sammy.js 라이브러리를 사용하면 요청 매개변수를 처리할수 있는데 여기서 말하는 요청 매개변수는 입력양식을 뜻하는것입니다.Sammy.js 라이브러리를 사용하면 웹 페이지 입력양식과 같은 데이터 요청을 모두 처리할수 있습니다. 아래 코드는 글자를 입력하면 그 글자를 HTML 상으로 띄워주고 5초후에 다시 메인페이지로 돌아가는 기능을 가진 코드입니다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 Sammy.js Basic var app = Sammy(function () { this.get('#/form', function () { // 템플릿을 추출합니다. var templat..
-
[HTML5] Sammy.js 라이브러리로 히스토리 기능 사용 및 페이지 라우트프로그래밍/HTML5 Web 2016. 7. 10. 16:57
Ajax로 페이지를 전환하는 웹앱에서 뒤로가기 버튼을 어떻게 처리해야하는지에 대한 문제를 직면하는 경우가 있는데요. 웹브라우저에서 뒤로가기 버튼을 이용한다는것은 웹 브라우저의 기록을 관리하여야한다는 뜻입니다. 그리고 이러한 기록들을 관리하려면 히스토리 객체를 사용하여야합니다. 이를 위해서 Sammy.js라는 라이브러리를 사용하여야하는데 이 라이브러리는 웹 페이지 라우터 모듈입니다. 라우터 모듈이란 페이지 라우팅을 구현하는 모듈로 클라이언트 요청에 따라 적절한 페이지를 제공하게 합니다. 기존에는 서버에서만 할수 있는 일이었지만 HTML5에서는 클라이언트에서도 사용가능합니다. Sammy.JS 라이브러리의 공식홈페이지에 방문하여 관련 문서를 확인합시다. [링크] http://www.sammyjs.org/ 참고..
-
[HTML5] 벤더 프리픽스 제거 메서드 removePrefix() Method프로그래밍/HTML5 Web 2016. 7. 10. 16:05
현재 HTML5의 표준은 계속 제정중인데요. 확정된 기능이 아닐경우에는 벤더 프리픽스를 사용하여 범용성을 높여줍니다. 하지만 벤더 프리픽스가 바뀌었을 경우에를 대비해서 보완하는 코드를 작성합니다. removePrefix() 함수는 벤더 프리픽스를 제거합니다. 12345678910111213141516171819202122232425262728 removePrefix() //Set Variable var prefixes = ['webkit', 'ms', 'moz', 'o']; //Upper Function var capitalize = function (name) { return name.substr(0, 1).toUpperCase() + nmae.substr(1); }; //Remove Prefix fu..