안녕하세요 개발로짜입니다 ^^
이번포스팅은 DB 조건문을 주었을 경우 사용하는 CASE 문인대요
제목에서 아시다시피 주로사용하는 Oracle 이나 MySQL, MS-SQL 모두 적용 가능한 다중 조건문입니다.
일반 개발에서 사용하는
switch 문이나 if문과 비슷하다고 보시면 되실거예요
오라클과 MySQL에는 참 또는 거짓을 기술할수 있는...
쉽게말해서 if else 문이 별도로 존재하는데
요건 다음 포스팅때 작성하도록 하겠습니다.
그럼 우선적으로 사용 구문법부터 보시겠습니다.
CASE WHEN 조건 THEN '대체값' WHEN 조건 THEN '대체값' ELSE 'WHEN 조건에 해당안될경우의 기본값' END
사용문법은 위와같습니다.
말씀드린 switch 문이랑 if 문이랑 비슷하죠?
그럼 어짜피 모든 DBMS에 적용가능한 문법이니
아무거나 정해서 CASE문을 적용해보도록 하겠습니다.
우선 저는 MySQL DB로 적용해볼까 합니다.
아무 테이블에 존재하는 데이터를 변경해보도록 하겠습니다.
저같은 경우 member 테이블의 데이터들을 조회한 결과
상단처럼 member_name 컬럼에 중복값이 들어가 있습니다.
'이순신','홍길동'
한글을 조건절에 들어가는것은 좋지 않습니다만
샘플삼아 작성하는것이므로 ...
member 테이블의 member_name의 결과값이 '이순신'이면 '중복1' , '홍길동'이면 '중복2', 그외에는 '중복아님' 출력
위 조건으로 실행쿼리를 작성해보도록 하겠습니다.
SELECT member_name, CASE WHEN member_name = '이순신' THEN '중복1' WHEN member_name = '홍길동' THEN '중복2' ELSE '중복아님' END AS result FROM member
위와같이 정상적으로 CASE문이 사용하여 결과값이 나왔습니다!!!
MySQL이 아니여도 MS-SQL 또는 오라클에서도 구문을 동일 하게 사용할 수 있답니다~
by 개발로짜
MySQL과 MSSQL의 시퀀스생성 및 초기화 하는방법에 대해서 알아보도록 하자 (0) | 2014.10.14 |
---|---|
MySQL- GROUP_CONCAT 함수로 세로로 출력된 결과를 하나의 컬럼에 가로로 출력하기 (0) | 2014.10.13 |
쿼리의 조건문 사용시 oracle에는 decode가있고 mysql에는 if가 있다 (0) | 2014.10.09 |
DBMS별 기존테이블 SELECT해서 새 테이블에 INSERT하여 데이터 일괄처리하기(oracle,mssql,mysql) (4) | 2014.10.08 |
DBMS 별로 (oracle,mysql,mssql) 널값 처리하기 (0) | 2014.10.07 |
안녕하세요 개발로짜입니다 ^^
이번 부트스트랩 강좌 주제는 버튼 컴포넌트 생성 하는 내용을 다루어 보고자 합니다
부트스트랩의 컴포넌트들은 단순히 태그에 미리 정해져있는 클래스들만 추가 하면
깔끔한 화면으로 출력이 되는것이 참 마음에 듭니다.
이번 시간에는 버튼 컴포넌트들을 다루어 보도록 해보겠습니다.
버튼을 만들기 위해서는 기본적으로 button태그를 구현합니다.
<button>일반버튼</button>
한번 실행해보도록 하겠습니다.
여기서 class들을 추가해주면 되는데 버튼 UI를 적용하기위해서는 기본적은 "btn" 클래스와
추가적으로 지정된 색상 및 사이즈 버튼을 클래스를 표현하는
"btn-xx" 옵션을 추가 해주시면 되겠습니다.
다음 샘플 코드를 먼저 작성해보겠습니다.
코드전 연동법에 관련해서는 다음포스팅을 참고해주세요
2014/10/08 - [웹개발강좌/부트스트랩] - 부트스트랩 1장 - 부트스트랩 연동하기
<button class="btn btn-default">DEFAULT</button> <button class="btn btn-primary">BLUE</button> <button class="btn btn-success">GREEN</button> <button class="btn btn-info">SKY</button> <button class="btn btn-warning">YELLO</button> <button class="btn btn-danger">RED</button> <br/> <button class="btn btn-default btn-lg">LARGE DEFAULT</button> <button class="btn btn-default btn-sm">SMALL DEFAULT</button> <button class="btn btn-default btn-xs">VERY SMALL DEFAULT</button>
실행화면을 먼저 보시겠습니다.
위에보니 확실히 깔끔한 버튼이 생성되었네요 ㅎ
깔끔한 버튼UI를 만들기 위해서는 다음과 같습니다.
1. 부트스트랩 기본버튼 : class="btn btn-default"
2. 파랑색버튼 : class="btn btn-primary"
3. 녹색버튼 : class="btn btn-success"
4. 하늘색버튼 : class="btn btn-info"
5. 노란버튼 : class="btn btn-warning"
6. 빨간버튼 : class="btn btn-danger"
※ 사이즈에 대한 코드는 default 버튼에 적용을 하였으나 색상별 적용도 가능합니다.
사이즈 적용을 하기 위해서는 버튼 컴포넌트를 색상별 클래스로 적용 후 다음 클래스를 적용하시면 되겠습니다.
1. default 사이즈에는 별도의 클래스가 필요없습니다.
2. 큰사이즈 경우에는 "btn-lg" 클래스 추가
3. 작은사이즈 경우에는 "btn-sm" 클래스 추가
4. 제일작은 사이즈 경우에는 "btn-xs" 클래스 추가
위처럼 정리를 해볼수가 있겠습니다 ^^
by 개발로짜
부트스트랩 6장 - 스크롤스파이 기능을 이용하여 메뉴포커스 변경해보기 (0) | 2014.10.22 |
---|---|
부트스트랩 5장 - 부트스트랩의 모달창(기본 + ajax) 알아보기 (7) | 2014.10.16 |
부트스트랩 4장 - 부트스트랩을 이용하여 드롭다운 메뉴 생성하기 (2) | 2014.10.14 |
부트스트랩 3장 - 다양한 버튼 컴포넌트를 만들어보자 (그룹버튼 편) (0) | 2014.10.09 |
부트스트랩 1장 - 부트스트랩 연동하기 (3) | 2014.10.08 |
부트스트랩 강좌를 주제로 포스팅을 진행하도록 하겠습니다.
부트스트랩의 강점은 자주 사용되는 컴포넌트들에 대한 지원이 많다는 것이며
단점으로는 IE9이하 버전에서는 기능지원에 제한이 있습니다.
그러므로 익스플로러보다는 그외 브라우저 (크롬,사파리 등등..) 에서 실행해주시길 바랍니다.
원래는 부트스트랩 파일들을 다운로드 받아서 진행을 해야 겠지만 개발환경이 틀리다보니
부트스트랩도 jQuery강좌와 동일하게 CDN 설정을 통해서 강의를 진행하도록 하겠습니다
(부트스트랩 CDN) CSS, JS 파일들을 INCLUDE 해주도록 합니다.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
보통 코드를 작성할때 <head></head> 태그 사이에 많이 include를 하는데
빠른 화면을 위해 JS파일들은 </body> 태그 상단에 위치하게끔
권고를 하고 있는거 같습니다.
예제삼아 작성하는 부분이므로 로딩속도를 고려를 하지 않고
저는 <head></head> 태그 사이에 모든 CSS,JS파일들을 include하겠습니다.
※ 추가로 인지하고 있어야 할 부분이 부트스트랩 + jQuery와 같이 사용을 해야 한다는점 알고계세요~
단순 컴포넌트들은 태그마다 클래스 추가만 하면 되지만 기능실행을 위해서는 jquery가 필수라는 점!!
오늘은 간단하게 연동법만 확인하는 시간이므로
다음 코드를 작성해보도록 하겠습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body> <!-- 상단 네비게이션 바 --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <!-- 브라우저가 좁아졋을때 나오는 버튼(클릭시 메뉴출력) --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">부트스트랩 테스트</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">홈으로</a></li> <li><a href="#about">부트스트랩이란</a></li> <li><a href="#contact">문의하기</a></li> </ul> </div> </div> </div> <div class="container"> <div style="margin-top: 100px;"> <h1>부트스트랩 기본 템플릿입니다</h1> <p class="lead">여러분은 부트스트랩을 이용하여 다양한 기능을 구현할수 있습니다.</p> </div> </div> </body> </html>
위와같은 코드 작성 완료 후 실행을 해보도록 하겠습니다.
결과 정상적으로 부트스트랩이 연동된것을 확인하였습니다.
부트스트랩은 IE지원이 미약해서 그렇지만 정말 깔끔한거 같네요 ㅎㅎ
다음장부터는 컴포넌트 구현을 하나씩 해보도록 하겠습니다!!
by 개발로짜
부트스트랩 6장 - 스크롤스파이 기능을 이용하여 메뉴포커스 변경해보기 (0) | 2014.10.22 |
---|---|
부트스트랩 5장 - 부트스트랩의 모달창(기본 + ajax) 알아보기 (7) | 2014.10.16 |
부트스트랩 4장 - 부트스트랩을 이용하여 드롭다운 메뉴 생성하기 (2) | 2014.10.14 |
부트스트랩 3장 - 다양한 버튼 컴포넌트를 만들어보자 (그룹버튼 편) (0) | 2014.10.09 |
부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편) (0) | 2014.10.08 |