3.구현 썸네일형 리스트형 [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을 지정한.. 더보기 [java/kotlin] Spring Boot에서 웹소켓 사용하기 들어가기 웹소켓(websocket)은 브라우저와 웹서버 간에 통신을 할 수 있는 채널을 만드는 기술이다. 기존 HTTP을 사용하는 경우 데이터를 송수신할 때마다 매번 연결하고 끊어지는 작업이 반복된다. 웹소켓은 계속 연결된 상태로 유지되기 때문에 데이터를 더 효율적으로 처리할 수 있다. 웹소켓도 사용하기 위한 자신만의 규약이 있지만 Spring Boot에서 웹소켓을 쉽게 사용하는 방법이 있다. 작성자: http://ospace.tistory.com/ (ospace114@empal.com) 웹소켓이란? 웹소켓은 양방향 통신하는 프로토콜(RFC6455)이다. 웹소켓은 80과 443위에서 HTTP 프로토콜과 호환되도록 동작한다. 기존 HTTP 폴링에 비해 부하가 낮고 푸시 방식의 실시간 데이터 전송가능하다. .. 더보기 [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 태그를 사용한 폼 컴포넌트는 많이 사용되는 기능 중에 하나이다. 그러나 기능이 너무 단순하고 여러 요소를 선택하거나 값을 선택하는 명령이나 선택된 값을 추출하는 처리가 쉽지 않.. 더보기 이전 1 2 3 4 5 ··· 29 다음
