# bootstrap
Bootstrap
Bootstrap -css 프론트엔드 프레임 워크 -미리 만들어진 다양한 디자인 요소들을 제공하여 웹 사이트를 빠르고 쉽게 개발할 수 있도록 함 사용법 보통 CDN 방식으로 css는 header 부분에, js부분은 body에 넣어서 사용 Cnd이란?: 지리적 제약 없이 빠르고 안전하게 콘텐츠를 전송할 수 있는 전송 기술 기본적인 문법 
부트스트랩이란?
1. 부트스트랩? 데이터 사이언스에서 부트스트랩(Bootstrap)은 통계적 추론을 위한 하나의 리샘플링 방법입니다. 부트스트랩은 주어진 데이터 샘플로부터 추가적인 샘플들을 생성함으로써, 통계적 추정치(예: 평균, 중앙값, 표준편차 등)의 불확실성이나 신뢰구간을 쉽게 평가할 수 있게 해줍니다. 예를 들어, 어떤 연구에서 100명의 사람들의 키를 측정했다고 하자. 이 데이터만으로는 전체 인구에 대한 키의 평균이나 분산 등을 정확하게 알기 어렵습니다. 부트스트랩은 이렇게 작은 샘플 데이터에서 더 많은 정보를 얻기 위해 사용됩니다. 부트스트랩의 기본 아이디어는 다음과 같습니다: 원래 데이터 셋에서 무작위로 데이터 포인트를 선택합니다. 이때, 같은 데이터 포인트를 여러 번 선택할 수도 있습니다. (복원 추출) 이렇게 선택된 데이터 포인트들로 새로운 '부트스트랩 샘플'을 만듭니다. 이 새로운 샘플에 대해 원하는 통계치(예: 평균, 중앙값 등)를 계산합니다. 위의 단계를 여러 번 반
230726 day77 개념 정리
스프링 검색 기능 만들기 제목, 내용, 글쓴이 ( 기존 쿼리문에 where title '%가%' or content '%나%' or writer '%김%' 이 문장을 추가하기) select * from ( select Tb.*, rownum rNum from (select * from tbl_board where title '%가%' or content '%나%' or writer '%김%' order by bno desc) Tb ) where rNum between 1 and 10; MyBatis 동적 태그들 if ex - '%월요일%' where title like '%' || #{keyword} || '%' || -> 오라클에서 쓰는 결합연산자 where bno = #{bno} </i
HTML과 CSS, 그리고 Bootstrap.
HTML (Hyper Text Markup Language) 웹사이트를 만들기 위하여 사용하는 기본적인 언어의 한 종류이다. 마크업 언어 중 하나로써, ** 태그를 이용한 다양한 요소를 사용하여 문서의 구조(뼈대) 를 만들어 준다. CSS (Cascading Style Sheets) HTML로 작성된 웹사이트를 더욱 심미성 있게(폰트스타일, 색상, 크기 등...) 해 주는 언어이다. HTML로만 작성된 문서에 CSS를 사용하여 준다면 전달하고자 하는 바를 더욱 쉽고 간편하게 디자인 할 수 있다. (HTML에서 작성한 문장 구조를 보기좋게 만들어줌.) Bootstrap 부트스트랩이란 HTML,CSS,JS 프레임워크이다. 정의된 기능(코드)들이 구축되어 있기에 활용도에 따라 쉬운 제작이 가능. 구축되어 있기때문에 빠르고 쉽게 다양한 형태로 활용 가능하다는 장점이 있는 반면, 미리 구축되어있는만큼 커스터마이징이 힘들다는 단점이 있다
CSS 덮어쓰기 잘하는 법 & 좋은코드?
CSS 덮어쓰기 3가지 방법 내가 직접 원본 CSS파일을 건드리지 못하는 경우 새로운 CSS로 덮어써야 한다.(매우 중요) > 1. 같은 클래스명이나 스타일을 하단에 작성 하나의 CSS 파일일 경우, 같은 class 명이라도 하단에 정의한 클래스 명과 스타일을 우선적으로 적용 CSS파일이 여러개 첨부되어있을 때도 유효하다. ``를 하단에 사용할 수록 하단에 작성한 것과 똑같은 효과이기 때문에 main.css와 main2.css에 같은 class명이 있더라도 main2.css에 있는 클래스명이 우선적으로 적용된다. > 2. id, style 등 우선순위를 높여 작성 **tag 그래서 class 스타일을 덮어쓰려면 id 써보고 안되면 style속성 열어보고 이렇게 수정하면
Bootstrap / Grid
Bootstrap 사용한 복붙식 개발 getbootstrap.com 에 방문하여 마음에 드는 UI 요소를 골라서 HTML 파일에 복붙하면 웹개발이 끝! 하지만 제공되는 UI 들의 디자인까지 그대로 쓰라는 건 아니고 거의 뼈대디자인 밖에 없기 때문에 CSS 파일과 class 선언으로 색상이나 레이아웃 같은걸 커스터마이징하면 빠르게 할 수 있다. >Utility Class 사용가능 Bootstrap을 설치하면 이런 class들을 이용가능. 직접 CSS 에다가 padding-bottom 기록할 필요 없이 그냥 pb-5 이렇게 주면 끝이다. (pb1~5 까지 있다.) 몇개 외워놓으면 개발 시간이 매우 빨라지니 외울 것. padding-left 는 ps-5 (start의 약
Wiznet 홈페이지
Tool illust, photoshop html/css, javascript bootstrap, fontawesome 홈페이지 v.2019 !youtube[WSEIsU6IMiE?si=m14sAzsUcW7ENvdt] 
GBCC 평점조회페이지, 메일 외 1건
GBCC는 아시아 최대 규모의 유방암 학회 중 하나로, 아시아를 선도하고 세계를 움직이는 것을 목표로 하고 있습니다. GBCC는 유방암을 효과적으로 진단하고 치료하며 궁극적으로 여성의 건강을 증진하기 위한 다과학적 전략을 마련하기 위해 각계각층의 사람들을 모으기 위해 매년 개최됩니다. Tool illust, photoshop html/css, javascript bootstrap, fontawesome, barcode.tec-it 웹페이지 Bootstrap을 이용해 반응형 레이아웃을 구현합니다. 데이터가 table에서 잘 보이도록 view에 따라 column, scroll값을 잘 조정합니다. !youtube[8qZmQdgjc5U] !youtube[ElhJgiDYl1o] 메일/
소방방재기술산업전 럭키드로우 외 3건
소방방재기술산업전은 및 방재 기술 및 산업 분야에서 열리는 전시회나 박람회로 소방 안전과 방재 기술, 장비, 제품 등을 소개하고 관련된 전문가들과 기업들 간의 지식 교류 및 비즈니스 네트워킹의 기회를 제공합니다. Tool illust, photoshop html/css, javascript bootstrap, fontawesome, barcode.tec-it 럭키드로우페이지 javascript으로 간단한 게임/룰렛을 구현합니다. !youtube[M5td36a13-8] 맞춤이미지 
CBMC 모바일 웹 페이지
CBMC는 실업인과 전문인들에게 복음을 전하여 예수그리스도가 구주이심을 증거하고 주님의 지상명령을 성취하는 국제적 사명 공동체입니다. CBMC는 크리스천 실업인(사업가)과 전문인들의 모임으로, 전세계 96개국에 조직되어 있습니다. 한국CBMC는 사단법인으로 등록되어 국내 280여개 지회, 해외 120여개 지회를 두고 있으며 7천5백여 명이 회원으로 활동하고 있습니다. Tool illust, photoshop html/css, javascript bootstrap, barcode.tec-it 모바일 웹페이지 사용자 고유코드를 barcode.tec-it를 이용해 변환후 삽입해 동적 바코드를 구현합니다. !youtube[Z7pBpNkrWys] 
AP VALVES & SH 2022 모바일 웹 페이지 메일 외 2건
AP VALVES & STRUCTURAL HEART 2022는 심장혈관연구재단(CVRF), 서울아산병원(대한민국, 서울)의 후원을 받으며 일부는 상업 후원자들의 교육 보조금으로 지원됩니다. 심장 혈관 연구 재단은 우리 프로그램에 대한 지속적인 지원을 위해 허혈성 심장 질환 임상 연구 센터에 특별한 감사를 표하고 싶습니다. Tool illust, photoshop html/css, bootstrap, fontawesome, javascript, barcode.tec-it 모바일 웹페이지 사용자 고유코드를 barcode.tec-it를 이용해 변환후 삽입해 동적 바코드를 구현합니다. !youtube[7T_Tv6M8Leo] 
Django - Bootstrap
Bootstrap 반응형웹 생성 가능 -> css 보다 더 예쁘게 만들어주는 기능을 알아보자. > 위에 link는 css > 처음 head 전에 붙혀넣기 아래 link는 java script > 마지막 body 전에 붙혀넣기 >> 순서가 크게 상관있는건 아니지만 HTML 파일 특성상, 위에서부터 읽혀 내려온다. 처음 CSS 역할: 아래 있는 것을 이쁘게 꾸며준다. (시작) 아래 Java Script 역할: 동작구현을 하게 해준다. (마지막) 인터넷
나눔초대 문자/메일 발송 시스템
나눔초대는 문자/메일/초청장 발송 시스템으로 그중 초청장은 발송될 input, checkbox, radio 등의 폼을 지정할 수 있습니다. Tool illust, photoshop html/css, javascript bootstrap, fontawesome, chartjs, swiperjs, barcode.tec-it 웹페이지 !youtube[1Mvg98Wzgs0] 
링크조인 모바일 원페이지 생성 프로그램, 홈페이지 외 2건
링크조인은 원하는 링크를 모아 한 페이지에서 볼 수 있는 원페이지 제작 툴입니다.사용자는 간단하게는 테마선택, 혹은 원하는 배경/그라데이션/폰트를 설정 할수 있고, 유튜브 비디오 링크에 맞는 표현방식을 선택하며, 각 링크에 맞는 애니메이션/오픈시간/아이콘 등을 설정할 수 있습니다. 사용자는 단 시간내에 특정 다수에게 제공하고자하는 정보 및 미디어가 담긴 페이지를 생성/공유 할 수 있습니다. Tool illust, photoshop html/css, javascript bootstrap, fontawesome, chartjs 관리자페이지 Bootstrap을 이용해 반응형 레이아웃을 구현합니다. 데이터가 table에서 잘 보이도록 view에 따라 column, scroll값을 잘 조정합니다. awesomefont를 이용하여 svg형식으로 icon color 및 사이즈를 자유롭게 조절합니다. chartjs를 이용해 데이터를 막대/선/혼합 그래프로 표현합니다. !you
하이위즈넷 실시간 모니터링 프로그램
하이위즈넷은 실시간 모니터링 프로그램으로 각 체류인원 및 방문객 상황등을 확인 할 수 있습니다. 이후 pc버전이 추가되어 리뉴얼되었습니다. Tool illust, photoshop html/css, javascript, bootstrap 웹페이지 !youtube[XMOTCBYiXXQ] !youtube[Rt7yj9VxyVo]
위즈플러스 모바일웹페이지 생성 프로그램
위즈플러스는 관리자페이지로, 간단한 정보입력과 테마 선택만으로 모바일 설문조사 페이지를 만들어냅니다. 추후 세부적인 텍스트/popup 등의 커스텀이 가능하도록 리뉴얼 됬습니다. Tool illust, photoshop html/css, javascript bootstrap, fontawesome, chartjs, barcode.tec-it 관리자페이지 데이터가 table에서 잘 보이도록 view에 따라 column, scroll값을 잘 조정합니다. chartjs를 이용해 데이터를 막대/선/혼합 그래프로 표현합니다. 사용자 고유코드를 barcode.tec-it를 이용해 변환후 삽입해 동적 바코드를 구현합니다. !youtube[IQt3zjh8C88] !youtube[O710apX_RHE] !youtube[JGCVUhtyLiA] !youtube[nhJhF44irFM] !youtube[MWLfhx7yImI] !youtube[S9eI44rdj7I] !yout
수소모빌리티+쇼 등록웹페이지, 메일 외 2건
세계 최초, 국내 최대 수소산업 전문 전시회로 국내ㆍ외 수소 산업의 선도기업(First Mover)이 한자리에 모여 수소 산업계의 기술 혁신을 리드, 새로운 정책과 의견이 교환되는 네트워크, 사업이 활성화 되는 비즈니스 전시회입니다. Tool illust, photoshop html/css, javascript bootstrap, barcode.tec-it 등록웹페이지 Bootstrap을 이용해 반응형 레이아웃을 구현합니다. 데이터가 table에서 잘 보이도록 view에 따라 column, scroll값을 잘 조정합니다. !youtube[XV_CBTZXiec] 메일/뉴스레터 사용자 고유코드를 barcode.tec-it를 이용해 변환후 삽입해 동적 바코드를 구현합니다. 
부산모터쇼 등록웹페이지, 관리자페이지 외 2건
부산국제모터쇼(Busan Internation Motor Show)는 한국의 자동차 박람회로 부산광역시가 주최하고 있으며 아시아 전시 최대 공간의 모터쇼로 1회와 2016년 모터쇼를 제외하면 100만명 이상의 관람객이 방문한 모터쇼입니다. Tool illust, photoshop html/css, javascript bootstrap, fontawesome, chartjs, swiperjs, barcode.tec-it 등록웹페이지 Bootstrap을 이용해 반응형 레이아웃을 구현합니다. 데이터가 table에서 잘 보이도록 view에 따라 column, scroll값을 잘 조정합니다. awesomefont를 이용하여 svg형식으로 icon color 및 사이즈를 자유롭게 조절합니다. !youtube[vHcE6ZTeKYc] 관리자페이지 데이터가 table에서 잘 보이도록 view에 따라 column, scroll값을 잘 조정합니다. awesomefont를
8/14 과제 제출 - AI 서비스 완성! AI 웹개발 취업캠프 [NIPA/정보통신산업진흥원]
React Bootstrap > 자기소개 페이지 만들기 with 리액트 부트스트랩 웹 프론트엔드 개발에 사용되는 오픈 소스 CSS 프레임워크입니다. 트위터에서 개발된 이 프레임워크는 웹 페이지 디자인과 레이아웃을 간편하게 구축할 수 있도록 도와주는 도구들의 집합체입니다. 부트스트랩은 미리 디자인된 스타일, 레이아웃, 그리드 시스템, 컴포넌트들을 제공하여 개발자가 웹 페이지나 웹 애플리케이션을 빠르게 구축하고 스타일링할 수 있도록 도와줍니다. 읽기 쉽고 깔끔한 코드를 위해 자체 컴포넌트를 지원하는 React-BootStrap 일단 React BootStrap은 BootStrap의 코드를 기초로 개발 되었기 때문에, BootStrap Library를 꼭 가지고 있어야 구동이 가능하다. 일반 BootStrap말고 React-BootStrap, Vue-BootStrap 같이 일반적으로 많이 사용되는 반응형 웹 프레임워크같
KES 모바일 웹페이지, 관리자페이지 외 5건
국내 최대 전자 IT 산업 대표 전시회 KOREA ELECTRONICS SHOW는 세미나, 컨퍼런스 등과 각종 이벤트를 통해 최신 정보 및 기술 습득 기회의 장으로써 주요 전시 품목으로는 △가전·스마트홈 △전자부품소재(전자부품, 반도체, 디스플레이, 센서 등) △융합신산업(XR, 3D, 웨어러블, 블록체인, 보안기기) △테크 솔루션(생산제조기술, AI, 로봇, IoT, 빅데이터, 딥러닝, 통신, 스마트 시티) 등을 만나볼 수 있습니다. Tool illust, photoshop html/css, javascript bootstrap, fontawesome, chartjs, swiperjs, barcode.tec-it 모바일 웹페이지 Bootstrap을 이용해 반응형 레이아웃을 구현합니다. 데이터가 table에서 잘 보이도록 view에 따라 column, scroll값을 잘 조정합니다. awesomefont를 이용하여 svg형식으로 icon color 및 사이즈를