계박사의 코딩교실

html table 에서 CSS로 아래와같이 표현을 하려고하였지만 굉장히 힘들었습니다.

그래서 결국 이미지로 만들어서(아시는 디자이너분께 도움을 받았습니다. ㅋㅋ)

아래와 같이 image 태그에 넣어서 해결했습니다.

Bootstrap 의 Button CSS 입니다.

CSS 몇개의 추가로 버튼을 디자인 할 수 있습니다.

<a> , <input> , <button> 해당 태그에 버튼 CSS를 사용 할 수 있습니다.

색상도 기본 제공되는 class 로 바꿀 수 있습니다.

사이즈도 class 를 추가해주면 원하는 크기로 바꿀 수 있습니다.

버튼도 다양하게 변경이 가능하며 자세한 예제는 아래의 URL에서 확인이 가능합니다.

http://getbootstrap.com/css/#buttons

Bootstrap 에서 제공하는 Table CSS 입니다.

데이터 리스트를 보통 테이블 태그를 이용하여 구성을 할 때 디자인적으로 깔끔하게 class 를 추가하여 바꿀 수 있습니다.

보통 일반적인 html 코드로 table 을 구성하면 이러한 화면으로 보입니다. 기본 html 코드입니다.

하지만 테이블에 몇개의 class 만 넣어주어도 디자인이 이쁘게 바뀝니다.

class 에 넣은 값이 몇개 없지만 처음 테이블과 다르게 변한 것을 볼 수 있습니다.

테이블 class 속성에 stripe, hover, border 등 몇개만 주었을 뿐인데 느낌이 확 다릅니다.

자세한 예제는 아래의 URL에서 확인 하시면 됩니다.

http://getbootstrap.com/css/#tables

Bootstrap 에서 제공하는 Grid System (그리드 시스템) 활용 방법입니다.

그리드를 가지고 반응형 화면을 구성 가능합니다. 

화면을 가로 12개의 사이즈로 나누어 화면 해상도에 따라서 자동으로 맞추어 줍니다.

프로그램 개발자 입장에서 간략히 어떻게 작동되는지 알아두면 간단하게 추가나 수정이 가능합니다.

간단하게 기본 Grid 를 그려봤습니다.

소스를 웹화면에서 보면 이렇게 나옵니다.

총 12개의 칸을 가지고 숫자값을 가지고 나누어서 쓸 수 있습니다.

또한 화면 해상도의 변화에 따라 Grid 위치가 자동적으로 바뀌게 됩니다.

스마트폰, PC, 태블릿 등 각각의 화면에 맞추어 자동으로 바뀌기 때문에 반응형 웹으로 구성하기 좋습니다.

다양한 Grid System 의 옵션들입니다.

다양한 class 옵션들로 화면 구성이 가능합니다.

Offset 옵션으로 중간에 빈칸을 만들 수도 있습니다.

사이즈를4 주었지만 offset 4의 값을 주면서 중간에 4 사이즈 만큼 빈칸이 생기게 됩니다.

이번에 소개하려는 UI Framework 는 Bootstrap 입니다.

HTML, CSS, Javascript 로 이루어진 정형화되어있는 Web UI Framework 입니다.

Boostrap 같은 오픈 소스가 필요한 이유는 여러 개발자가 동시에 각각 맡은 화면을 개발 할 때 좋습니다.

혼자서 개발할 때는 개인의 소스 코딩 스타일이 있어서 바로바로 알아보기 쉽고 편하지만 자신이 개발한 코드가 아니면 사실 리딩이 힘듭니다.

그래서 UI Framework 를 쓰면 코딩이 규칙이 있기 때문에 유지보수나 인수인계 시에 효과적입니다.

http://getbootstrap.com/getting-started/#download

URL 로 들어가서 Boostrap을 다운로드 받아서 JS, CSS 등 import 하는 것과 똑같이 하면 됩니다.

Bootstrap 의 경우 jQuery 기반에서 작동하므로 jQuery 를 Import 한 아래쪽에 javascript를 추가해줍니다.

직접 예제를 보면서 Bootstrap 이 어떻게 작동하고 어떻게 활용되는지 직접 확인을 해보시면 금방 익히실수 있습니다.

http://getbootstrap.com/getting-started/#examples-framework

보통 개발자는 CSS 또는, Image 를 만들거나, 수정하거나 할 일이 거의 없습니다.

특히 디자이너가 없을 경우 Web 개발 시 디자인을 수정하거나 추가할 경우 난감할 경우들이 있죠.

그래서 보통  jQuery UI 으로 많이 사용한다. jQuery UI도 좋지만 좀더 폭 넓게 다양한 UI 적 요소가 필요할 경우가 있습니다.

그래서 저같은 경우에는 UI Framework 를 주로 사용합니다.

UI Framework 같은경우 가장 큰 장점은 전체적인 UI 부분을 대부분 제공한다고 보면됩니다.

아이콘부터 시작해서 전체적인 화면의 틀을 제공합니다.. 

그래서 화면이 디자이너가 만든 것처럼 괜찮습니다.

저의 경우에는 이번 프로젝트에 예전에 써먹어봐야지 하던 Bootstrap을 사용했습니다.

Bootstrap 의 경우 대략적으로 샘플만 몇개봐도 디자인이 이쁩니다.

특히 개발자 입장에서 Bootstrap 사용하기가 참 편한게 Grid 라는 시스템이 너무 좋습니다.

Grid System 을 간략히 설명하자면 총 12개의 칸으로 나누어 class 로 칸을 나누어 쓰는 시스템입니다.

이게 편한 이유가 사용자 등록 화면이라던지 조회 화면의 입력 부분들을 나누기가 정말 편합니다.

Boostrap 에는 이러한 기능들 말고도 다양한 기능들이 많이 있습니다.

http://getbootstrap.com/ 직접 들어가서 한번 예제만 간단히 보면 쉽게 이해하실수 있습니다.

Bootstrap을 완벽히 잘 알지는 못하지만 이러한 Bootstrap을 가지고 만든 UI Framework 가 바로 AdminLTE 입니다.

Bootstrap + DataTables + DatePicker 등등 여러가지 플러그인을 조합해서 하나의 커다란 툴을 만들었습니다.

특히 이번에 소개하는 AdminLTE의 경우 이름처럼 관리자 화면에 맞게 그래프라던지 화면 구조가 참 잘되어 있습니다.

직접 들어가서 확인해 보시죠. https://almsaeedstudio.com/preview

처음에는 모르는 상태에서 이 툴을 사용하려고 하면 복잡하게 느껴질 것입니다.

하지만 조금만 건들여보고 테스트해보고 익혀둔다면 디자이너가 없는 프로젝트나 개인 프로젝트에서 충분히 좋은 UI Framework 가 될 것입니다.

로그인 화면부터 메뉴구성, 화면 구성 등 대부분이 다 구현되있어 정말 바로 개발해도 됩니다.

그리고 가장 중요한 오픈 소스이니 걱정하지 말고 쓰면 됩니다!!