더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 6개의 일치하는 문서를 찾았습니다.
js[Typescript] 2편. 타입스크립트 클래스 생성 및 interface
타입스크립트를 사용하여 클래스(class)를 생성하고 사용하는 방법에 대하여 알아봅니다.# 타입스크립트에서의 클래스 사용하기타입스크립트에서도 자바스크립트와 동일하게 클래스를 선언하고 사용할 수 있습니다. 먼저 간단하게 Site라는 이름의 클래스를 하나 만들어 봅니다.class Site {}아무것도 없는 빈 클래스를 하나 생성하였습니다. 이제 클래스에 새로운 프로퍼티를 선언해보겠습니다.class Site { no: number;}class 내부에 no, url 두 개의 프로퍼티를 선언하였습니다. 하지만 타입스크립트에서는 다음과 같이 에러를 발생합니다. "Pr...
Last Modified : 2022-01-19 21:36:27
Created : 2022-01-17 19:12:00
webdevetcHTML 자바스크립트로 로딩중 메시지 만들기
방문자가 사이트에 접속해서 뭔가를 누르거나 액션을 취합니다. 이때 페이지가 현재 로딩중이라는 메시지를 보여주려면 어떻게 할까요? 페이지를 비동기식, ajax로 호출하는 경우 방문자에게 현재 페이지가 로딩중이라는 메시지를 정확히 보여주는 것이 좋을 것입니다. 아래는 이를 구현하는 스크립트를 만들어 실행해보는 예제입니다.먼저 로딩 메시지를 시각적으로 표현하기 위해 아래와 같이 html 및 css를 구현합니다.# 로딩중 메시지 HTML 만들기먼저 실제로 예제를 동작하기 위해 하나의 버튼을 만들었습니다. 이 버튼은 ajax등을 사용하여 콘텐츠를 동적으로 호출하는 것처럼 로딩...
Last Modified : 2018-02-19 05:42:08
Created : 2017-10-17 04:19:46
js파일 드래그하여 드랍시 이벤트 무시, preventDefault
자바스크립트를 사용해 파일을 드래그앤 드랍하여 서버에 전송하기 위한 입력폼을 만들어보자. 이를 위해서 특정 요소 위해 파일을 드래그 후 드랍해야하는데 나타날 문제는 다음과 같다.# 드래그앤드랍시 브라우저 기본 이벤트 발생하여 페이지 전환됨문제는 파일을 브라우저에 올릴 경우 브라우저가 가진 기본 이벤트가 실행되는데 있다. 정상적으로 구현하기 위해서는 이런 디폴트 이벤트를 제거하는 방법이 필요하다.# 이벤트 제거하기 위한 함수 코드보기// Prevent drag and drop event in window.addEventListener("dragover",function...
Last Modified : 2016-05-03 21:12:44
Created : 2016-05-03 17:52:21
html[html] Accordion 어코디언 방식의 인터페이스 UI 배우기
웹사이트 UI 인터페이스 중에서 부분 영역을 숨기는.. 즉, 히든기능을 통해 필요한 콘텐츠만 우선적으로 보여주는 어코디언 또는 탭 방식을 사용할 수 있다. 그 중에서 오늘은 어코디언 방식을 알아보고자 한다.어코디언은 악기 이름에도 있다. 이를 아는 사용자라면 그 기능을 쉽게 유추할 수 있을 것이다. 어코디언 방식은 특정 메뉴를 클릭하면 해당 영역이 넓어지는 애니메이션이 일어나고 나머지 다른 창들은 크기가 줄어들게된다. 이를 활용하면 정해진 공간안에 다양한 콘텐츠를 보여주게 된다. 수납장이라고 생각하면 더 쉬울 것이다.# 어코디언 UI 인터페이스구현제이쿼리 ui를 사용...
Last Modified : 2016-03-22 20:14:06
Created : 2016-03-13 13:14:22
htmlhtml로 탭메뉴(Tab Menu) 만드는 방법
자바스크립트를 사용하여 웹사이트에 탭메뉴(Tab menu)를 만들어보겠습니다. 어떻게하면 탭메뉴를 만들 수 있을까요?! 탭메뉴 UI란?탭 방식으로 화면을 전환하는 인터페이스를 말합니다. 탭 방식이 자주 사용되는 이유는 간단한데요 바로 제한된 웹페이지 공간에 보여줄 일부 콘텐츠를 레이어로 구분하여 숨기길 수 있기 때문입니다. 숨겨진 영역만큼 확보된 영역에 원하는 콘텐츠를 선택해 보여줄 수 있게되므로 많은 콘텐츠를 보여줘야 하는 경우 많이 쓰입니다.사실 숨겨서 보여주는 화면 인터렉션 방법은 이 외...
Last Modified : 2019-08-23 10:06:35
Created : 2015-11-05 13:56:50
js[HTML] select 태그(박스) 사용방법
오늘은 셀렉트박스(Selectbox UI)는 웹사이트에서 굉장히 많이 사용되는 인터페이스 UI 중 하나입니다. 간단하게 선택하여 사용하는 select 태그를 사용한 방식과 콤보박스라 불리는 좀 더 기능적 특징을 가진 UI로 구분할 수 있습니다. 오늘은 select 태그를 사용한 방법에 대하여 예제와 함께 알아보도록 하겠습니다.# select 태그 선택폼 알아보기먼저 select 태그는 방문자로 하여금 손쉽게 원하는 값을 선택할 수 있는 입력폼을 제공합니다. 그래서 방문자로 부터 입력값을 전달받아 서버에 저장하기 위해 통신할 때 간편한 인터페이스를 제공할 수 ...
Last Modified : 2018-12-31 07:03:35
Created : 2015-03-06 17:55:23