투케이2K

[타이틀] 구 분 : Framework / 프레임워크 ​ 제 목 : [프레임워크] [Web] 부트스트랩 (Bootstrap) ​ 사용되는 곳 : HTML, CSS, JS [설 명] ​ 1. 부트스트랩 이란 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 HTML, CSS, JS 프레임워크입니다 ​ ​ 2. 부트스트랩 은 웹 프론트 개발에서 반응형 HTML 구조 설정 , CSS 디자인을 편하게 개발할 수 있습니다 ​ ​ 3. 부트스트랩 은 기기나 뷰포트 크기가 증가함에 적절하게 확대되는 반응형, 모바일 우선 유동 그리드 시스템입니다 [참고 사이트] ​ http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평..

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [그림 설명] ​ ​ ​ C:\Users\tk\VueProject\test-project> npm install bootstrap --save ​ ​ [부트스트랩 5.0 참고 사이트] ​ https://getbootstrap.kr/docs/5.0/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr [main.js - 소스코드] ​ // [main.js 설명] // 1. 애플리케이션 진입점으로 Vue 초기화, 폴더 , 전역, 컴포넌트 , 라이브러..

[참고 사이트] ​ [사이트 주소] ​ https://ssimplay.tistory.com/350 [Bootstrap] 부트스트랩을 이용해 아이콘을 불러와보자 안녕하세요. 플입니다. 오늘은 아이콘을 불러와볼게요. 1. 위치 확인 뭘 해볼 거냐면요 하단에 이런 식으로 sns 바로가기 아이콘 같은 게 있는걸 많이 보셨을 거예요. 오늘은 여기 인스타그램이 ssimplay.tistory.com

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ 사용자 회원가입 ID Password 영문과 숫자를 조합해서 비밀번호를 입력해주세요 Email @ 주소까지 모두 입력해주세요 ex : test123@test.com 개인 정보 동의 With supporting text below as a natural lead-in to additional content. 회원 가입 [결과 출력] ​ [요약 설명] ​ 1. Forms : 컨트롤 요소(control element)를 그룹 지어 양식 레이아웃을 만들 수 있습니다 2. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/components/forms/

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Button with data-target Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Dropdown button Action Another action Something else here [결과 출력] ​ [요약 설명] ​ ​

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Card Header and footer Special title With supporting text below as a natural lead-in to additional content. 자세히 보기 Special title With supporting text below as a natural lead-in to additional content. 자세히 보기 Special title With supporting text below as a natural lead-in to additional content. 자세히 보기 [결과 출력] ​ [요약 설명] ​ 1. card : ..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Left Middle Right Top Middle Bottom [결과 출력] ​ [요약 설명] ​ 1. btn-group : Bootstrap에서 그룹 버튼을 만들 수 있습니다, 기본 가로 2. btn-group-vertical : 세로 방향으로 그룹 버튼을 생성합니다 3. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/components/button-group/

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Link Button Large button Large button Small button Small button Block level button Block level button [결과 출력] ​ [요약 설명] ​ 1. btn : Bootstrap의 사용자 정의 버튼 스타일을 사용할 수 있습니다 2. btn-크기 : 버튼 크기를 지정할 수 있습니다 3. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Well done! Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. Whenever you need to, be sure to use margin utilities to keep things nice and tidy. Well done! Aww yeah, you successfully read t..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ 번호 이름 나이 [결과 출력] ​ [요약 설명] ​ 1. table : 테이블 속성을 설정합니다 2. thead-dark : 테이블 헤더 속성을 설정합니다 3. dyn_tbody : 동적으로 테이블 데이터를 생성합니다 (자바스크립트 확인 필요) 4. Pagination : 쪽수 매기기 의미로 여러 페이지에 걸쳐 있음을 나타냅니다 5. justify-content : 페이징 레이아웃을 중앙 정렬을 실시합니다 6. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/content/typography/ Typography Documentation and..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Display 1 Display 2 Display 3 Display 4 [결과 출력] ​ [요약 설명] ​ 1. display : 제목을 표시 할 때 자주 사용힙니다 2. display 속성 값에 따라서 크기를 설정할 수 있습니다 3. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/content/typography/ Typography Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more...

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [설 명] ​ [m, p 의 의미 - 마진, 패딩] - m : Margin을 의미 - p : Padding을 의미 [t , b , l , r ,x , y 의 의미 - 위치 설정] - t : top을 의미 - b : bottom을 의미 - l : left을 의미 - r : right을 의미 - x : x축 -> left , right을 의미 - y : y축 -> top , bottom을 의미 [0, 1, 2, 3, 4, 5, auto 의 의미 - px, rem] - 0 : 0 - 1 : .25rem( font-size가 16px이면, 4px) 크기 - 2 : .5rem( font-size가 16px이면..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ 좌측정렬 중앙정렬 우측정렬 양쪽정렬 일반 Lowercased Uppercased Capitalized text-primary text-secondary text-success text-danger text-warning text-info text-light text-dark text-white h1. Bootstrap heading h2. Bootstrap heading h3. Bootstrap heading h4. Bootstrap heading h5. Bootstrap heading h6. Bootstrap heading [결과 출력] ​ [요약 설명] ​ 1. p-속성 : p ..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ col-md-4 col-md-8 col-sm-3 col-sm-3 col-sm-3 col-sm-3 col-md-4 col-md-8 col-sm-3 col-sm-3 col-sm-3 col-sm-3 [결과 출력] ​ [요약 설명] ​ 1. 컨테이너는 CSS에서 배운것 처럼 화면구성요소들을 묶기 위한 틀 입니다 2. 컨테이너는 보통 태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일합니다 3. container : 반응형으로 동작하며 고정폭을 가지고 있습니다 (자동 마진 크기를 가지고 있습니다) 4. container-fluid : viewport 전체 폭을 모두 차지하는 컨테이너 박..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ col-md-4 col-md-8 col-sm-3 col-sm-3 col-sm-3 col-sm-3 col-md-4 col-md-8 col-sm-3 col-sm-3 col-sm-3 col-sm-3 [결과 출력] ​ ​ [요약 설명] ​ 1. 컨테이너는 CSS에서 배운것 처럼 화면구성요소들을 묶기 위한 틀 입니다 2. 컨테이너는 보통 태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일합니다 3. container : 반응형으로 동작하며 고정폭을 가지고 있습니다 (자동 마진 크기를 가지고 있습니다) 4. container-fluid : viewport 전체 폭을 모두 차지하는 컨테이너..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ .col .col .col .col-sm-3 .col-sm-3 .col-sm-3 .col-sm-3 col col col col [결과 출력] ​ [요약 설명] ​ 1. 컨테이너는 CSS에서 배운것 처럼 화면구성요소들을 묶기 위한 틀 입니다 2. 컨테이너는 보통 태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일합니다 3. container : 반응형으로 동작하며 고정폭을 가지고 있습니다 (자동 마진 크기를 가지고 있습니다) 4. container-fluid : viewport 전체 폭을 모두 차지하는 컨테이너 박스입니다 5. 부트스트랩의 그리드는 flexbox(Flexible ..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ New Item 3 Link1 Link2 Link3 [결과 출력] ​ [요약 설명] ​ 1. 컴포넌트는 부트스트랩에서 정의한 UI 요소로 버튼, 경고창, 네비게이션바 와 같이 화면 구성에 필요한 요소들을 정의해둔 클래스 집합입니다 2. BS 컴포넌트는 적절한 태그와 클래스의 조합으로 이루어져 있습니다 3. badge : 스마트폰 아이콘에 숫자 뱃지 모양을 설정합니다 4. Navbar : 여러 컴포넌트를 묶어 구성한 네비게이션 바 컴포넌트입니다 [컴포넌트 종류] ​

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ No shadow Small shadow Regular shadow Larger shadow [결과 출력] ​ [요약 설명] ​ 1. shadow : 그림자 효과를 부여하는 클래스로 입체감있는 박스 컨테이너를 만들때 효과적입니다 2. 기본적으로 shadow-* 형식으로 크기와 함께 사용하게 됩니다 3. margin, padding 은 각각 m , p 를 선언해서 사용합니다 4. sides : 상하좌우를 지정하며, 비워둘경우 4방향 모두를 지정합니다 (top(t),bottom(b), left(l), right(r), x, y) 5. size : 0~5, auto 를 사용하며, 3을 기..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ pt-4 p-5 m-5, pb-5 [결과 출력] ​ [요약 설명] ​ 1. spacing : 박스모델에 필요한 margin, padding 을 지정하기 위한 유틸리티 클래스 입니다 2. margin, padding 은 각각 m , p 를 선언해서 사용합니다 3. sides : 상하좌우를 지정하며, 비워둘경우 4방향 모두를 지정합니다 (top(t),bottom(b), left(l), right(r), x, y) 4. size : 0~5, auto 를 사용하며, 3을 기준으로 부트스트랩의 기본 설정값의 0.25, 0.5, 1.5, 3 배율을 크기를 가지게 됩니다 (rem) 5. rem ..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Width 25% Width 50% Width 75% Width 100% Width auto [결과 출력] ​ [요약 설명] ​ 1. w-25 : 가로 크기 25% 를 의미합니다 (자동 크기 부여) 2. p-3 : p는 패딩의미이며, 크기는 0, 1, 2, 3, 4, 5, auto 가 있습니다 3. bg-info : 백그라운드 속성을 지정합니다