오늘은 셀렉트박스(Selectbox UI)는 웹사이트에서 굉장히 많이 사용되는 인터페이스 UI 중 하나입니다. 간단하게 선택하여 사용하는 select 태그를 사용한 방식과 콤보박스라 불리는 좀 더 기능적 특징을 가진 UI로 구분할 수 있습니다. 오늘은 select 태그를 사용한 방법에 대하여 예제와 함께 알아보도록 하겠습니다.# select 태그 선택폼 알아보기먼저 select 태그는 방문자로 하여금 손쉽게 원하는 값을 선택할 수 있는 입력폼을 제공합니다. 그래서 방문자로 부터 입력값을 전달받아 서버에 저장하기 위해 통신할 때 간편한 인터페이스를 제공할 수 있습니다. 아래 있는 select 태그는 좋아하는 과일을 손쉽게 선택할 수 있는 가장 기본적인 형태의 인터페이스 모습입니다. 보시는 것처럼 간단하게 원하
Last Modified : 2018-12-31 07:03:35
자바스크립트를 사용하여 웹사이트에 탭메뉴(Tab menu)를 만들어보겠습니다. 어떻게하면 탭메뉴를 만들 수 있을까요?! 탭메뉴 UI란?탭 방식으로 화면을 전환하는 인터페이스를 말합니다. 탭 방식이 자주 사용되는 이유는 간단한데요 바로 제한된 웹페이지 공간에 보여줄 일부 콘텐츠를 레이어로 구분하여 숨기길 수 있기 때문입니다. 숨겨진 영역만큼 확보된 영역에 원하는 콘텐츠를 선택해 보여줄 수 있게되므로 많은 콘텐츠를 보여줘야 하는 경우 많이 쓰입니다.사실 숨겨서 보여주는 화면 인터렉션 방법은 이 외에도 다양한 방법이 존재합니다. 예를들어 어코디언 방식 또는 햄거버 버튼 등도 비슷한 이유로 사용되는 방법이죠. # Why Tab UI? 탭메뉴를 사용하는 이유하지만 탭 메뉴가 선호되는 이유는 다른 메뉴간의 이동이
Last Modified : 2019-08-23 10:06:35
방문자가 사이트에 접속해서 뭔가를 누르거나 액션을 취합니다. 이때 페이지가 현재 로딩중이라는 메시지를 보여주려면 어떻게 할까요? 페이지를 비동기식, ajax로 호출하는 경우 방문자에게 현재 페이지가 로딩중이라는 메시지를 정확히 보여주는 것이 좋을 것입니다. 아래는 이를 구현하는 스크립트를 만들어 실행해보는 예제입니다.먼저 로딩 메시지를 시각적으로 표현하기 위해 아래와 같이 html 및 css를 구현합니다.# 로딩중 메시지 HTML 만들기먼저 실제로 예제를 동작하기 위해 하나의 버튼을 만들었습니다. 이 버튼은 ajax등을 사용하여 콘텐츠를 동적으로 호출하는 것처럼 로딩중이라는 인터페이스를 보여줍니다. 아래의 스크립트 함수를 호출합니다.<button onclick="isLoading.start()">Loadin
Last Modified : 2018-02-19 05:42:08
자바스크립트를 사용해 파일을 드래그앤 드랍하여 서버에 전송하기 위한 입력폼을 만들어보자. 이를 위해서 특정 요소 위해 파일을 드래그 후 드랍해야하는데 나타날 문제는 다음과 같다.# 드래그앤드랍시 브라우저 기본 이벤트 발생하여 페이지 전환됨문제는 파일을 브라우저에 올릴 경우 브라우저가 가진 기본 이벤트가 실행되는데 있다. 정상적으로 구현하기 위해서는 이런 디폴트 이벤트를 제거하는 방법이 필요하다.# 이벤트 제거하기 위한 함수 코드보기// Prevent drag and drop event in window.addEventListener("dragover",function(e){ e = e || event; if (e.target.tagName != "INPUT") { // check which
Last Modified : 2016-05-03 21:12:44
웹사이트 UI 인터페이스 중에서 부분 영역을 숨기는.. 즉, 히든기능을 통해 필요한 콘텐츠만 우선적으로 보여주는 어코디언 또는 탭 방식을 사용할 수 있다. 그 중에서 오늘은 어코디언 방식을 알아보고자 한다.어코디언은 악기 이름에도 있다. 이를 아는 사용자라면 그 기능을 쉽게 유추할 수 있을 것이다. 어코디언 방식은 특정 메뉴를 클릭하면 해당 영역이 넓어지는 애니메이션이 일어나고 나머지 다른 창들은 크기가 줄어들게된다. 이를 활용하면 정해진 공간안에 다양한 콘텐츠를 보여주게 된다. 수납장이라고 생각하면 더 쉬울 것이다.# 어코디언 UI 인터페이스구현제이쿼리 ui를 사용한다면 간단하게 이를 구현할 수 있다. 제이쿼리 ui는 무료이면서 편리한 컴포넌트 요소들을 제공하고 있다.이를 직접 구현하기 위해서는 아래와 같
Last Modified : 2016-03-22 20:14:06