본문 바로가기

분류 전체보기751

[bootstrap] 부트스트랩 – 이미지 슬라이딩 [캐러젤(Carousel)] 부트스트랩의 캐러젤은 이미지 슬라이드 기능을 하는 플러그인입니다. 슬라이드 애니메이션을 위해 CSS3의 규칙을 사용하므로 IE9 버전 이하에서는 애니메이션 효과가 없습니다. 가장 바깥쪽의 div에는 id를 추가합니다. 이 아이디는 .carousel-indicators 내부에 있는 li 태그와 슬라이드 내비게이션 버튼의 타겟이 됩니다. 따라서 여러 개의 캐러젤을 만들려면 이 아이디를 다르게 해야 합니다. 스타일과 슬라이드를 위해 .carousel, .slide 선택자가 추가돼 있습니다. 자바스크리브로 작동하므로 data-ride=”carousel”이 있어야 합니다. ol 태그의 캐러젤 인디케이터는 슬라이더 하단의 불릿으로 클릭하면 해당 순서의 슬라이드가 나타나는 내비게이션 역할도 합니다. data-slid.. 2016. 2. 8.
[bootstrap] 부트스트랩 – 간단한 콜랩스(Collapse) 어코디언이나 내비게이션에 같은 구성요소를 만들 수 있습니다. 우선 간단한 콜랩스를 만들어 보겠습니다. button 태그에 data-toggle=”collapse”가 포함돼 있고 타겟으로 demo가 있으며 이것은 콘텐츠 영역에 있는 div의 id와 일치합니다. .in을 제거하면 처음으로 닫힌 상태가 됩니다. 버튼뿐만 아니라 a 태그를 사용할수도 있습니다. Simple collapsible Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ulla.. 2016. 2. 8.
[bootstrap] 부트스트랩 – 여러 개의 콜랩스(Collapse) 여러 개의 콜랩스가 서로 연동되게 만들려면 구성요소의 패널을 사용하며 가장 바깥쪽의 div에 .panel-group 선택자와 id를 추가합니다. 이 아이디(accordion)는 .panel-heading에 있는 a 태그의 data-parent 속성 값과 연결되며 이 링크를 클릭하면 패널의 콘텐츠가 닫히거나 열리고, 닫힌 곳을 클릭하면 이미 열린 곳은 닫히는 토글 기능이 기본으로 돼 있습니다. 다시 각 a 태그에 있는 href 속성 값은 콘텐츠 영역에 있는 id와 연결됩니다. 콘텐츠 영역의 개폐는 자바스크립트를 사용하므로 data-toggle=”collapse” 속성이 포함돼 있습니다. 콘텐츠 영역의 클래스 선택자로 .collapse가 있는데 .in이 포함되면 열린 상태가 됩니다. 여기서는 첫번째 콘텐츠 .. 2016. 2. 8.
[bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 클릭해서 버튼명 변경하기 data 속성을 data-complete-text=”Complete!”으로 변경하는 소스입니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 라디오 버튼 부트스트랩으로 라디오버튼을 버튼처럼 만들 수 있습니다. 라디오를 그룹으로 만들고 .btn-group 선택자가 있는 div에 data-toggle=”buttons” 속성을 추가합니다. 처음부터 눌린 상태로 만들려면 label에 .active 선택자를 추가하고 input에 checked 속성을 추가합니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 체크박스 버튼 부트스트랩으로 체크박스를 버튼처럼 만들 수 있습니다. 체크박스를 그룹으로 만들고 .btn-group 선택자가 있는 div에 data-toggle=”buttons” 속성을 추가합니다. 처음부터 눌린 상태로 만들려면 label에 .active 선택자를 추가하고 input에 checked 속성을 추가합니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 싱글 토글 버튼 버튼의 누름 상태와 해제 상태, 두 가지의 상태를 만들 수 있습니다. 자바스크립트로 작동하므로 data-toggle=”button” 속성을 포함시킵니다. 처음부터 미리 눌러진 상태를 만들려면 .active 선택자를 추가하고 aria-pressed=”true”로 변경합니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 버튼 상태 제어하기 버튼을 클릭하면 “Loading…”이라는 메시지가 버튼에 나타납니다. 데이터 속성으로 data-loading-text=”Loading…”을 추가하고 크로스 브라우저 호환성을 위해 autocomplete=”off” 속성을 추가합니다. Loading state 자바스크립트는 다음과 같은 형태로 사용합니다. 주석 부분에 실제 작업이 이뤄지는 코드가 들어가고 종료되면 리셋됩니다.$(‘#myButton’).on(‘click’, function () { var $btn = $(this).button(‘loading‘); // business logic… $btn.button(‘reset‘); }); 여기서는 테스트를 위해 다음의 코드를 사용합니다. 클릭하면 로딩 텍스트가 나타나고 3초가 지나면 원래의 버튼 텍스트가.. 2016. 2. 8.
[bootstrap] 부트스트랩 – 알림메시지(Alert message) data-dismiss=”alert” 속성을 사용하면 자바스크립트를 추가할 필요는 없으며 메서드는 .alert(“close”); 하나만 있습니다. 그리고, 이벤트는 두 가지가 있습니다.$(“.alert”).on(“close.bs.alert”, function() { alert(“이벤트 실행됨”); }); close.bs.alert : 알림 메시지 박스가 닫히기 전에 이벤트가 실행됩니다.close.bs.alert : 알림 메시지 박스가 닫힌 후에 이벤트가 실행됩니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 팝오버(Popover) 팝오버는 툴팁과 비슷한 기능을 하지만 좀더 큰 규모로 팝업창에 가깝습니다. 따라서 툴팁의 사용법과 같고 주로 버튼이나 메뉴의 상세한 추가 설명에 사용됩니다. 콘텐츠가 전혀 없으면 아무것도 나타나지 않습니다. 팝오버는 제목 부분과 콘텐츠 부분으로 나뉘며 제목은 title, 콘텐츠는 data-content 속성에 입력한 내용이 출력됩니다. 둘 중 어느 하나만 입력해도 해당 내용만 나타납니다. 자바스크립트로 작동되므로 data-toggle=”popover”가 반드시 필요합니다. 위치는 data-placement 속성에 입력되는 등 대부분이 툴팁과 같지만 팝오버는 마우스를 오버했을 때 나타나는 것이 기본입니다. Popover on left 자바스크립트로 다음과 같이 활성화합니다.$(“[data-toggle=’p.. 2016. 2. 8.
[쿼리문/오라클] 토드(Toad)에서 바로 실행가능한 변수선언 쿼리문 변수를 선언해서 쿼리를 실행해야 할 경우가 있는데요. 반복적인 작업을 완료하고 select를 한다던지... 여러가지 경우가 있을 텐데요. DECLARE 변수선언 BEGIN 실행구문 END; 이런식으로 DECLARE BEGIN ~ END 구문으로 프로그래밍을 하여 결과를 확인할 수 있습니다. 아래 샘플을 참고하시면 됩니다. DECLARE V_NUM INTEGER := 0; V_TARGET_DATE DATE; BEGIN LOOP V_TARGET_DATE := SYSDATE - V_NUM; DELETE FROM USE_STATUS_DAY WHERE CREATE_DATE >= TO_DATE(TO_CHAR(SYSDATE - V_NUM, 'YYYYMMDD')) AND CREATE_DATE < TO_DATE(TO_C.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 툴팁(Tooltips), 말풍선 툴팁은 링크에 마우스를 올리면 메시지가 나오는 말풍선을 말합니다. 기본적으로 모든 웹브라우저에서 태그에 title 속성을 적용하면 마우스 오른쪽 아래에 말풍선이 나타나지만 부트스트랩은 보다 세련된 말풍선 효과를 나타낼 수 있습니다. 툴팁은 예외적으로 자바스크립트로 활성화해야 하며 data-toggle=”tooltip” 속성도 포함해야 합니다. 타겟팅을 위해 선택자를 지정해야 하는데 모든 툴팁에는 이 데이터 속성이 있어서 이를 대상으로 선택자를 정합니다. 툴팁으로 나타날 문구는 title 속성이나 data-original-title 속성에 값으로 지정합니다.you probably 자바스크립트는 다음과 같이 설정합니다.$(“[data-toggle=’tooltip’]“).tooltip(); 툴팁의 위치는 da.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 탭(Tabs)에 이벤트 기능 추가 data 속성을 사용할 때 탭 목록의 각 a 태그에 data-toggle=”tab”을 추가했습니다. 자바스크립트를 사용할 때도 모든 a 태그에 대해서 .tab(‘show’) 메서드를 사용합니다. e.preventDefault();는 클릭했을 때 상단으로 이동하는 것을 방지합니다.$(“#myTab a”).click(function(e) { e.preventDefault(); $(this).tab(“show”); }); 특정 탭을 활성화하기 위해 .active 선택자를 사용합니다. 하지만, 이를 무시하고 다른 탭을 활성화하고 콘텐츠를 나타나게 하려면 자바스크립트를 사용합니다. 아래와 같이 여러가지 선택자를 사용할 수 있습니다.$(“#myTab a[href=’#profile’]”).tab(“show“); //.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 스크롤스파이(Scrollspy) 웹페이지에서 스크롤할 때 같은 페이지에 있는 콘텐츠의 내용과 연결된 메뉴를 표시하는 기능입니다. 또한, 해당 메뉴를 클릭하면 콘텐츠로 이동합니다. 메뉴 부분은 냅바(navbar)를 사용해야 하며 우선 메뉴바에 아이디 선택자(예, navbar-example)를 만들고 콘텐츠 영역에서 이 아이디를 데이터 타겟으로 정합니다. 콘텐츠 영역에는 data-spy=”scroll”을 추가하고 각 메뉴의 태그에 링크를 만드는데 이 아이디를 콘텐츠 영역의 아이디와 일치시킵니다. data-offset은 스크롤할 때 상단으로부터의 거리이며 제대로 설정하지 않으면 콘텐츠가 상단에 있더라도 메뉴가 하이라이트 되지 않습니다. 설정하지 않으면 기본은 10픽셀입니다. 메뉴바를 고정(fixed)으로 사용할 때는 오프셋이 작동하지 않습니.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 드롭다운(dropdown) 다른 플러그인처럼 data- 속성과 자바스크립트로 구현할 수 있으며 모바일 기기에서는 드롭다운을 열면 메뉴 이외의 영역을 탭해도 드롭다운이 닫히게 .doropdown-backdrop 클래스가 추가됩니다. 따라서, 하나의 드롭다운이 열린 상태에서 다른 드롭다운을 열려면 우선 빈 곳을 탭 한 후에 해야 하며 data-toggle=”dropdown” 속성은 반드시 포함해야 합니다. Dropdown … button 태그가 아닌 a 태그를 사용할 때는 링크를 표시하기 위해 href=”#”를 사용하지 않고 data-target=”#”과 사이트 도메인을 href에 추가합니다. Dropdown trigger … 자바스크립트를 이용해 드롭다운을 활성화 하려면 다음과 같은 형태로 사용합니다.$(“.dropdown-togg.. 2016. 2. 5.

티스토리툴바