3.구현/HTML5&Javascript 썸네일형 리스트형 [CSS] Flex 사용하기 들어가기 CSS에서 화면 배치 관련해서 Flexbox가 있다. 간단하게 화면 레이아웃을 구성하는데 유용하다. 작성자: http://ospace.tistory.com/ (ospace114@empal.com) 기본 구성요소 먼저 Flex을 들어가기 전에 기본 구성 요소부터 살펴보자. Flex container는 배치할 Flex item라는 자식들을 가지는 부모요소이다. Flex item은 Flex container에 포함되고 배치될 요소들이다. 그리고 Main Axis은 수평 방향의 축을 의미하며, Cross Axis은 수직 방향의 축을 의미한다. Flexbox 시작 Flexbox을 사용하려면 항상 Flex container에 해당하는 부모의 display 속성에 flex 또는 inline-flex을 지정한.. 더보기 [javascript] 이미지 동적 로딩 Javascript을 이용한 간단한 이미지 동적 로딩을 다룬다. 동적로딩이라는 부분이 애매할 수 있는데, 이미지가 매우크거나 속도나 느린 네트워크에서는 이미지가 바로 보이지 않는다. 일부만 천천히 로딩되거나 중간에 로딩이 실패하면서 이미지가 제대로 보이지 않는다. 이럴 경우 이미지가 제대로 로딩이 완료되면 표시되면 화면에 표시되고 그렇지 않으면 표시되지 않게 할 수 있다. 이를 응용하면 이미지 로딩 중을 기본으로 화면에 표시하고 로딩되면 표시하도록 만들수 있다. 그럼 간단하게 만들 수 있는 방법을 알아보자. 작성자: http://ospace.tistory.com/ (ospace114@empal.com) 단순 이미지 로딩 가장 일반적인 이미지를 로딩하는 예제이다. 이미지 태그를 사용한 간단한 예제이다. 위.. 더보기 [javascript] VR Panoramic 360 video player 사용 들어가기 요즘(?) VR에 대해서 관심이 많다. 요즘이라고 해도 너무 오랜동안 관심만 많은 듯 하다. 유튜브에서도 360 video을 제공하고 있다. 웹 환경에서 360 video를 재생하는 방법을 살펴볼려고 한다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 오픈소스 간단하게 360 video를 재생할 수 있는 오픈소스를 찾아보았다. 찾은 오픈소스로 Video.js가 있다. Video.js는 널리 사용하고 있는 HTML5 비디오 플레이어이다. 360 video를 재생할 수 있는 플러그인 사용하여 360 video를 재생할 수 있다. https://github.com/videojs/video.js (Apache License, version 2.0) ht.. 더보기 [jquery] 단순 DOM 데이터 바인딩 들어가기 HTML에서 화면에서 데이터를 추출하고 처리하는 부분이 귀찮은 일이다. 대부분 화면 컨트롤에서 데이터를 가져오고, 가져온 데이터를 화면에 적용하는 일이 매우 많다. 이를 개선해서 출력과 입력을 처리하는 바인딩하는 작업을 만들어보았다. 즉, 데이터 객체와 DOM 객체 간에 양방향 바인딩 처리하는 작업이다. 데이터에 값을 저장하면 자동으로 화면에 적용되고, 컨트롤에 값을 입력하면 자동으로 화면에 출력된다. 어떻게 하는지 살펴보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 기존 처리 방식 Ajax을 많이 활용하면 화면에 동적으로 처리해야하는 작업이 많다. 예를 들어 아래 처럼 입력 텍스트와 입력된 텍스트를 아래에 텍스트로 출력하는 예를 보자. 텍스.. 더보기 [HTML] crossorigin 속성 들어가기 최근 작성했던 글을 보다가 특정 이미지가 보이지 않는 상황을 인지했다. 원인을 확인해보니 Chrome에서 CROS 정책으로 인해서 이미지 처리 중에 “No 'Access-Control-Allow-Origin' header is present on the requested resource.” 오류가 발생했다. 하나씩 살펴보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ crossorigin crossorigin 속성은 audio, img, link, script, video 태그에 있는 속성이다. 이는 각 요소가 교차출처 리소스 공유(Cross-Origin Resource Sharing, CORS) 요청하는 방식을 지정할 수 있다. 설정할 수 있.. 더보기 [jquery] multiselect 플러그인 제작하기 들어가기 jQuery로 플러기인을 만들었던 그 경험을 공유하려고 글을 작성하였다. 만들려는 UI 컴포넌트는 multiselect로 select 컨트롤에 체크박스를 추가하여 여러 값을 선택할 수 있는 select이다. 물론 기능적으로는 문제는 없지만 플러그인을 작성하기 위해 매우 간단하게 작성하였으므로 실제로 사용하다보면 수정이 많이 필요하다. 그렇기에 실제 multiselect은 다른 플러그인을 사용하고 여기 multiselect은 간단한 플러그인 제작을 위해서만 참고하기 바란다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ Multiselect 요구사항 Multiselect은 여러 체크박스로 동시에 여러 항목을 선택하는 컨트롤이다. 여기서는 이런 체크 .. 더보기 [jquery] multiselect 플러그인 소개 들어가기 jQuery 기반의 multiselect 컨트롤러 컴포넌트이다. jQuery 플러그인 형태로 구현되었다. 최대한 기존 select의 기능과 인터페이스를 그대로 지원했고, 좀더 확장된 기능을 추가했다. select을 단순하게 사용했다면 별다른 변경없이 그대로 적용할 수 있다. 작업한 플러그인은 jQuery 플러인 제작을 위한 연습용으로 만들어서 기능적으로 부족한 부분이 많다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ Multiselect 플러그인 소개 기존에 select 태그를 사용한 폼 컴포넌트는 많이 사용되는 기능 중에 하나이다. 그러나 기능이 너무 단순하고 여러 요소를 선택하거나 값을 선택하는 명령이나 선택된 값을 추출하는 처리가 쉽지 않.. 더보기 [javascript] JSONP 란? 들어가기 JSONP(JSON with Padding)는 크로스 도메인(cross domain)으로 인한 접근 제한 문제를 회피하기 위한 방법이다. 크로스-도메인 정책으로 다른 서버에 Ajax를 요청할 수 없다. JSONP을 간단히 설명하면 클로스-도메인을 우회하여 요청하는 방법으로 ajax를 사용하지 않고 script 태그를 사용한 요청방법이다. 하나씩 살펴보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 크로스 도메인이란? 공격자가 가장 흔하게 사용하는 해킹 기법이 XSS(Cross-Site Scripting)이 있다. 온라인 게시판에 입력 받스가 있다면 내용에 자바스크립트를 입력할 수 있다. 또는 링크를 만드는 곳에 자바스크립트 실행하도록 만들 수도.. 더보기 이전 1 2 3 4 ··· 6 다음
