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

개요 Bootstrap 4를 이용하면 단순 클래스 지정 만으로 문자열에 대한 다양한 스타일링이 가능하다. 이번 글에서는 문자열 스타일링을 간단히 정리한다. 사용 기술 Bootstrap: 함께 제공되는 Card 컴포넌트를 사용하여 HTML 코드 만으로 위젯, 대시보드를 제작할 수 있다. jQuery: Bootstrap을 구동하기 위해 선행 사용이 필수이다. 소스 코드 <!DOCTYPE html> <html lang="ko"&..
SW 개발/웹 2018.08.28 10:42
Bootstrap 4, 카드로 위젯, 대시보드 제작하기

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

개요 HTML 기술을 사용하여 순위 그래프를 출력할 수 있다. 사용 기술 Handsontable: 액셀과 유사한 느낌을 주는 JavaScript 스프레드시트 라이브러리이다. 2차원 테이블 형식의 데이터를 표현하기 위한 자유도가 높아 순위 출력에 사용하기 적합하다. Bootstrap: 함께 제공되는 Progress 컴포넌트를 사용하여 HTML 코드 만으로 순위 그래프를 출력할 수 있다. jQuery Slim: Bootstrap을 구동하기 위해 선행..
SW 개발/웹 2018.07.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의 차이만 나도 서로 다른 Ori..
SW 개발/웹 2016.07.25 03:47
HTTP GET 요청시 전달 가능한 파라메터의 최대 크기와 고려할 점은?

HTTP GET 요청시 파라메터의 최대 크기 = URI의 최대 크기 클라이언트에서 HTTP GET 요청시 파라메터는 고스란히 URI에 포함되어 브라우저를 통해 서버에 전달된다. 이러한 HTTP GET 요청 방식의 특성상 전달 가능한 파라메터의 최대 크기는 곧 브라우저에서 허용 가능한 URI의 최대 크기가 된다. 허용되는 URI의 최대 크기는 2083~6200byte로 브라우저마다 제각각이다. 따라서 HTTP GET 요청은 이 점을 고려하여..
SW 개발/웹 2014.09.03 14:30
INPUT 엘러먼트 제어하기

웹 애플리케이션의 프론트엔드 화면을 개발하다보면 가장 빈번하게 사용하는 것이 사용자로부터 검색조건이나 등록할 정보를 입력받는 input 엘러먼트이다. 가장 많이 사용되는 text 타입과 select 엘러먼트를 예로 들어 간단한 input 엘러먼트 제어 방법을 정리하였다. HTML 선언하기 <!-- 활성화된 TextBox를 선언한다. --> <input id="someText" type="text" placeholder="someTex..
SW 개발/웹 2014.08.27 14:43
Select2, AutoComplete을 지원하는 select 확장 플러그인

1% 부족한 select 엘러먼트 HTML5에서는 select 엘러먼트를 이용하여 ComboBox 컨트롤을 구현할 수 있다. 하지만 기본 엘러먼트만으로는 기대치가 높은 사용자의 까다로운 요구를 수용하기에 기능이 너무 부족하다.(사실 이 글을 작성하게 된 계기도 사용자의 자동완성 기능 구현 요구 때문이었다.^^) 이런 select 엘러먼트의 부족한 기능을 강화시켜주는 애드온 성격의 라이브러리가 많은데 이번 글에서는 많이 사용되는 Se..
SW 개발/웹 2014.08.17 15:28
Bootstrap 3 기본 뼈대 페이지 만들기

JavaScript 공부, Bootstrap과 함께 시작해보자 JavaScript를 공부하는데 있어 가장 중요한 것은 자주 많이 코드를 작성해봐야 한다는 것이다. 하지만 Hello, World! 문구 하나를 찍더라도 화면에 출력하는 방법은 천차만별인 법이다. 나는 JavaScript를 처음 공부하는 사람에게 Bootstrap을 기반으로 코드를 작성할 것을 추천한다. 마치 Java 입문시 콘솔보다는 Swing을 이용하여 Hello, World!를 화면..
SW 개발/웹 2014.08.16 04:06
Bootstrap 3, Table에 가로형 스크롤바 삽입하기

반응형이냐 고정형이냐의 고민 Bootstrap 3 환경에서 Table 엘러먼트를 구현시 반응형(responsive)으로 할 것이냐 고정형(fixed)으로 할 것이냐를 고민할 때가 많다. 대세는 반응형이라고 하지만 기업에서 구현하는 시스템의 대부분은 상당히 많은 수의 컬럼을 가진 데이터를 화면 상의 테이블에 출력해야 하는 경우가 많기 때문에 반응형으로 구현하는데 한계가 있다. 이 글에서는 Bootstrap 플랫폼에서 Table 을 반응형 또..
SW 개발/웹 2014.08.13 01:54
Bootstrap에 날개를 달아주는 리소스, 플러그인 소개

개발자들의 구세주, Bootstrap Bootstrap은 웹 프론트엔드 프레임워크이다. HTML5/CSS3/JavaScript 각 언어로 제공되는 템플릿 소스 코드를 이용하여 디자인에 관한 전문 지식 없이도 반응형 웹 기반의 미려한 사이트를 구축할 수 있어 국내외에서 광범위하게 사용되고 있다. 극단적인 경우 class 애튜리뷰트만 지정해서 초고속으로 개발해도 미려한 화면이 나온다. 훨씬 먼저 시작된 프로젝트인 jQuery UI, jQuery Mobi..
SW 개발/웹 2014.08.11 13:47
1 2