Bootstrap 4, 글자 스타일 지정하기

개요 Bootstrap 4를 이용하면 단순 클래스 지정 만으로 문자열에 대한 다양한 스타일링이 가능하다. 이번 글에서는 문자열 스타일링을 간단히 정리한다. 사용 기술 Bootstrap: 함께 제공되는 Card 컴포넌트를 사용하여 HTML 코드 만으로 위젯, 대시보드를 제작할 수 있다. jQuery: Bootstrap을 구동하기 위해 선행 사용이 필수이다. 소스 코드 h6 h5 h4 h3 h2 h1 display-4 display-3 display-2 display-1 display-4 font-weifht-bold display-4 font-italic display-4 font-left display-4 font-center display-4 font-right display-4 text-primary..
SW 개발/웹 2018. 8. 28. 10:42
Bootstrap 4, 카드로 위젯, 대시보드 제작하기

개요 일반적으로 어드민 대시보드는 1개 이상의 위젯의 조합으로 만들어진다. Bootstrap 4의 카드 개념을 활용하면 이러한 반응형으로 작동하는 위젯과 그 묶음인 대시보드를 손쉽게 제작할 수 있다. 사용 기술 Bootstrap: 함께 제공되는 Card 컴포넌트를 사용하여 HTML 코드 만으로 위젯, 대시보드를 제작할 수 있다. jQuery: Bootstrap을 구동하기 위해 선행 사용이 필수이다. 출력 결과 카드 헤더 카드 타이틀 카드 텍스트 카드 헤더 카드 타이틀 카드 텍스트 카드 헤더 카드 타이틀 카드 텍스트 카드 헤더 카드 타이틀 카드 텍스트 카드 헤더 카드 타이틀 카드 텍스트 카드 헤더 카드 타이틀 카드 텍스트 소스 코드 > 카드 헤더 카드 타이틀 카드 텍스트 카드 헤더 카드 타이틀 카드 텍스트..
SW 개발/웹 2018. 8. 27. 16:36
Bootstrap 4, 순위 그래프 출력하기

개요 HTML 기술을 사용하여 순위 그래프를 출력할 수 있다. 사용 기술 Handsontable: 액셀과 유사한 느낌을 주는 JavaScript 스프레드시트 라이브러리이다. 2차원 테이블 형식의 데이터를 표현하기 위한 자유도가 높아 순위 출력에 사용하기 적합하다. Bootstrap: 함께 제공되는 Progress 컴포넌트를 사용하여 HTML 코드 만으로 순위 그래프를 출력할 수 있다. jQuery Slim: Bootstrap을 구동하기 위해 선행 사용이 필수이다. 소스 코드 대한민국 도시 인구 순위 출력 결과 대한민국 도시 인구 순위
SW 개발/웹 2018. 7. 16. 15:16
AJAX 요청에 대한 CORS 허용하기

Origin이란? Origin은 아래와 같이 protocol, host, port 3개 부분으로 구성된다. http://www.jsonobject.com:8080/ # protocol: http # host: www.jsonobject.com # port: 8080 2개의 Origin을 비교시 3개 부분 중 단 1개만 일치하지 않아도 서로 다른 Origin이 된다. 즉, http, https의 차이, 80, 8080의 차이만 나도 서로 다른 Origin이 된다. 브라우저에서 현재 페이지의 Origin 알아내기 브라우저에서 현재 페이지의 정확한 Origin을 알고자 한다면 JavaScript에서 아래 명령을 실행한다. # IE를 제외한 모든 브라우저 window.location.origin # IE win..
SW 개발/웹 2016. 7. 25. 03:47
1 2 3