웹솔루션개발 25년 노하우! 해피CGI의 모든것

한국거래소에서 제공하는 KRX OPEN API는 KOSPI, KOSDAQ등의 지수 정보 및 각종 주식 정보, 증권, 채권, 파생상품, 일반상품 정보를 제공하는 API 입니다. http://openapi.krx.co.kr/ 제공되는 API 목록은 아래 페이지를 통해 확인이 가능 합니다. http://openapi.krx.co.kr/contents/OPP/INFO/service/OPPINFO004.cmd 각각의 API 를 클릭 해보시면 아래와 같이 개발 명세서를 다운로드 가능 합니다. 각 API별 샘플 테스트 및 예제 확인이 가능 하므로, 이를 참고 하여 프로그램을 구현하면 수월하게 작업이 가능 합니다.

배경이미지를 사용하지 않고 간단하게 기울어진 배경색상을 적용할 수 있습니다. transform(skew(0deg, -10deg)); 부분을 수정해서 기울기를 조절할 수 있습니다. .content{ @include transform(skew(0deg, 20deg)); 텍스트 부분의 기울기는 위의 소스에서 조절이 가능합니다.

드래그앤드롭 으로 크기조정, 확장, 회원이 가능한 JavaScript 라이브러리 Moveable 드래그 이동, 사이즈 조절, 회전, 각 조절, 핀치 터치를 이용한 회전 및 사이즈조절 선택, 클립마스크, 라운드조절 등 다양한 기능이 제공됩니다. 사용자 정의 설정을 통해 각 기능별 사용여부도 조절 가능합니다. 웹을 통해 편집하는 플랫폼에서는 아주 유용하게 사용이 될꺼 같네요.

터치 및 마우스 호버효과로 만드는 가벼운 무료 오픈 소스 JavaScript 라이브러리 Atropos JavaScript, React 및 Vue.js에서 사용 가능하며 경량화된 소스입니다. 여러가지 변수를 통해 사용자 정의 설정 사용이 가능합니다. 회전 반경, 그림자 효과 관련 등 다양한 사용자 정의 설정이 가능합니다.

L o a d i n g . css로만 구현된 텍스트형 로딩중 표시입니다. html 소스입니다. css 소스입니다. 글자별로 에니메이션에 딜레이를 줘서 작동하고 있습니다.

기본 선택상자(셀렉트박스) 를 조금 더 이용하기 편한 UI로 변경해주는 jquery 플러그인입니다. 다운로드 받은 파일의 압축을 해제한뒤, demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 위와 같은 기본 선택상자를 오른쪽의 그림 처럼 선택가능한 옵션들을 펼쳐서 화면에 보여주고, 이미 선택한 옵션을 표시해주고, 선택 가능한 옵션들 에서 검색어가 포함된 옵션을 검색할수 있습니다. 여러개의 옵션을 선택할 수 있는 선택상자에서도 사용할 수 있습니다. 사용법은 아래와 같습니다.

타이포 그래피에 있어 필요한 요소들 글꼴 font 굵기 weight 색상 Color 행간 line height 자간 letter spacing 정렬 alignment 서체 등을 예시와 함께 정리되어 있습니다. 다지인에 도움이 되시길 바랍니다!

JavaScript 를 이용하여 Top 버튼을 클릭하면 부드럽게 Top 으로 스크롤 되는 소스 입니다. 적용방법은 아래와 같습니다. 1. CSS 를 추가 합니다. 2. JavaScript 를 호출 합니다. 3. 세부적인 설정 항목은 아래와 같습니다. 설정 항목에서 normal, Iinear 사용해 봤을 때 스크롤이 길지 않다면 Iinear 조금 더 보기 편하고 페이지가 많이 길 경우 normal 로 설정하는게 좋은 듯 합니다.

JavaScript 로 테이블을 생성합니다. 그리고 테이블의 해더를 클릭하면 정렬(소팅) 할 수 있는 소스코드 입니다. 만드는 방법은 아래와 같습니다. 1. Table 을 생성하고 고유한 아이디를 지정하세요. 단, Table 요소에서 반드시 샘플과 같은 양식으로 맞춰야 하고 th, tbody 는 필수 입니다. 2. th 요소에 CSS 스타일을 정의 합니다. 3. js/script.js 를 호출 합니다. 제일 마지막에 호출해야 합니다. Table 에 출력되는 데이터 편집은 js/script.js 에서 할 수 있습니다. 형식에 맞춰서 편집 혹은 추가하시면 됩니다.

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 creditCardNumberCheck.js 파일을 호출합니다. 2. 카드 번호 입력 폼을 생성합니다. 3. 입력된 카드 번호 입력 폼을 선택자로 하여 플러그인을 호출하면 true 또는 false 값을 얻을 수 있습니다. - 작동 예제