기본 콘텐츠로 건너뛰기

Bootstrap 사용법


매번 테스트 하나 할때마다
화면 만드는거 때문에 귀찮았는데,
간단한 테스트 화면 만들기에는 딱인듯.
css 랑 js만 있어서 쓰기도 편하고 ㅎ
html5의 app cache하고 같이쓰면 앞으로 좀 더 유행하지 할 것 같은 느낌은 개인적은 느낌. ㅎㅎㅎ

css하고 js라 사실 간단하다.
http://twitter.github.com/bootstrap/index.html 여기서 원본 보시고, ㅎ
영어 읽기 귀찮으면 이거 계속 보는거고 ^^;;

2. Grid system
이게 사실 핵심인거 같은데, div 사이즈 조절하기가 겁나 편해졌다.


이미지
<div class="container">
   <div class="row">
     <div class="span3"/> <!-- 왼쪽 사이드메뉴 영역 -->
     <div class="span9">  <!-- 오른쪽 바디 -->
        <div class="span2"/> <!-- 폼1-->
        <div class="span2"/> <!-- 폼2-->
        <div class="span2"/> <!-- 폼3-->
        <div class="span2"/> <!-- 폼4-->
     </div>
   </div>
 </div>
일반적으로 container를 가장 상위에 쓰는데 이놈은 span12사이즈로 정해져있다.
그래서 이놈을 3과 9로 구분한 다음에
남은 9안에다가 폼 4개를 넣어야 되서
각 2사이즈씩 넣어줬다.
1이 남았는데,
바디 오른쪽에 네번째 폼이 다른 부분보다 여백이 좀 더 많은데,
바로 그부분이다.

3. 화면 기본 요소 (table, form, button..)
화면에서 가장 빈번하게 사용되는 요소들이다.
부트스트랩에서는 이부분도 꽤나 신경을 써줬다.
일단 기본적으로 디자인은 적용되어있고,
사이즈 조절은 grid system을 적용하여 유연하게 사용할 수 있다.
btnspan
버튼의 경우 7가지 색이 기본적으로 제공된다. 따로 디자인입힌 버튼만 아니라면  이정도면 충분하지 않나 싶다. ㅎ
btncolor
요런 것들 때문에 기본적으로 요소들 위치만 잘잡고 사이즈만 적당히 조절하면 간단한 화면은 이쁘게 나올 수 있다.
4.  Component(navbar, modal)
기본요소들 말고도 화면을 좀더 풍성 하게 해줄 만한것들이 이것저것 많다.
쓰는 방법은  css 추가하고 해당 js 추가 하면 된다.
간단하다. ㅎ
그래서 오히려 여기서 설명하는것보다
가서 한번 훑어보는게 훨 좋을 것 같아
마무리는 여기서 하시는는 걸로. ㅎ

5. Bootstrap 관련 사이트 
 무료 테마 : http://bootswatch.com/
 흔하지 않은 아이콘 모음 : http://aristeides.com/elusive-iconfont/index.html

태그

라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

메일서버가 스팸으로 취급받을때

설치한 메일서버를 통해 발송되는 메일이 스팸으로 들어가는 경우가 더러 있다. 이게 한번 들어가기는 쉬운데, 빠져나오기는 드럽게 힘든것 같다... 본인의 경우에는 우선 국내서비스에는 별 무리 없이 들어간다. (naver,daum 등) 그런데 해외메일 그중 Gmail, Hotmail 에는 에누리없이 스팸으로 간주되고 있었다. Gmail같은 경우에는 그래도 스팸함으로 발송은 제대로 되는반면에 Hotmail같은경우에는 아예 수신자체가 안되는 경우도 더러있다.. ㅡ,.ㅡ; 제일 좋은 방법은 Gmail,Hotmail에 전화걸어서 우리 메일서버 IP white Ip로 등록해달라!!! 하면 좋지만, 얘네들은 걸어봤자 자동응답기고, 문의채널은 구글 그룹스 게시판이 전부다.. 본론으로 들어가서. 해외 메일이 차단될 경우 내 매일서버ip가 스팸ip로 등록되 버린 경우일 수 있다. (본인처럼. ㅎ) 이것부터 조회 해보고 싶으면 RBL(real-time blocking List) 체크를 해야 하는데, RBL체크 해주는 사이트는 꽤 많이 있고, 그중 좀 깔끔해 보이는곳 하나 소개. http://www.anti-abuse.org/ 메일서버ip 입력하고 조회해보면 쭈루룩 리스트가 나온다. 그 중 빨간불이 들어온 부분이 메일 서버가 스팸서버가 된 각종 이유들이다.ㅋ 본인의 경우 CBL 때문에 걸렸는데, 내용은 아래와 같다. This IP address is HELO'ing as  "localhost.localdomain"  which violates the relevant standards (specifically: RFC5321). 메일서버 도메인에 별다른 작업을 안해놓아서 "localhost.localdomain" 으로 설정되어있었다. 만약 CBL만 바로 테스트 해보고 싶으면 http://cbl.abusea...
댓글 4개
자세한 내용 보기

[javascript] 특정시간에만 함수 실행

특정시간에만 팝업을 띄우려면?? 특정시간에만 로그인을 막으려면?? 특정시간에만 할일은 의외로 참 많다. 방법? 딱히 없다. 현재시간 구해서 시작시간, 종료시간 사이에 있을때 시작하는 수밖엔. if ((현재시간 > 시작시간) && (현재시간 < 종료시간)){ .. 팝업노출(); 공사페이지 리다이렉트(); 기타등등(); .. } 자바스크립트로 작성하면 다음과 같다. var startdate = "2014012008" ; var enddate = "2014012418" ; var now = new Date (); //현재시간 year = now. getFullYear (); //현재시간 중 4자리 연도 month = now. getMonth () + 1 ; //현재시간 중 달. 달은 0부터 시작하기 때문에 +1 if ((month + "" ). length < 2 ){ month = "0" + month; //달의 숫자가 1자리면 앞에 0을 붙임. } date = now. getDate (); //현재 시간 중 날짜. if ((date + "" ). length < 2 ){ date = "0" + date; } hour = now. getHours (); //현재 시간 중 시간. if ((hour + "" ). length < 2 ){ hour = "0" + hour; } today = year + "" + month + "" + date + "" + hour; //오늘 날짜 완성. / / 시간비교 i...
댓글 6개
자세한 내용 보기

(java) 크롬에서 쿠키 삭제 안되는 경우

  java에서 쿠키 삭제하는 방법은 똑같은 이름의 쿠키를 만들고 업데이트 하는 방식이다.  이때 maxAge를 '0' 으로 설정한다.  그래서 아래처럼 코딩한결과  크롬을 제외한 나머지 브라우저에서는 전부 쿠키가 삭제가 되었으나 크롬만 삭제가 되지 않았다.  문제의코드 Cookie cookie = new Cookie(name , null ) ; cookie.setHttpOnly( false ) ; cookie.setMaxAge( 0 ) ; cookie.setPath( "/" ) ; cookie.setDomain( "test.co.kr" ) ; 결론만 얘기하면  Secure 설정을 ture로 추가해서 해결했다.  https, ssl 기반에서만 주고받을 수 있게된다.  public void setSecure ( boolean flag) { secure = flag ; } /** * Returns <code> true </code> if the browser is sending cookies only over a * secure protocol, or <code> false </code> if the browser can send cookies * using any protocol. * * @return <code> true </code> if the browser uses a secure protocol; * otherwise, <code> true </code> * @see #setSecure */ 원인은 이사이트의 쿠키설정중 samesite가 'none' 으로 설정되어있었다.  samesite가 none인 경우에는 반드시 secure 옵션을 같이 넣어줘야 크롬에서 정상동작한다. (chrome 80 버전 업데이트 이슈) 웹서버에서 변경하고 싶으면 nginx.c...
댓글 쓰기
자세한 내용 보기