Winsome Design Studio

Toggle navigation Bootstrap theme Home About Contact Dropdown Action Another action Something else here Nav header Separated link One more separated link title box1 box1 box1 ★ css ★ /* 추가 변경스타일 - 참고 */ .navbar { margin-bottom: 0; /* 기본 마진20px설정됨 */ } /* 네비바 색상변경 */ .navbar-default { background-color: aquamarine; background-image: none; /* 색상변경시 필수 적용 후 아래 색상적용 */ } /* 네비안 글자색 변경 */ .navbar-defa..

♥ 코딩(Coding)/부트스트랩(Bootstrap) 2021. 11. 10. 01:19

Home Profile Messages Settings 01. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 02. Lorem Ipsum is simply dummy text of the printing and typesetting industr..

♥ 코딩(Coding)/부트스트랩(Bootstrap) 2021. 11. 9. 23:21

Home 회사소개 CEO인사말 점프트론 큰 콘텐트나 내용을 메인에서 보여줄 때 사용, 최대너비 또한 적용가능 moer title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ..

♥ 코딩(Coding)/부트스트랩(Bootstrap) 2021. 11. 9. 21:57

float:left float:right center-block : block요소auto처리 show : 나타나게 (display:block) hidden : 사라지게 (display:none) 글자 정렬 왼쪽 글자 정렬 중간 글자 정렬 오른쪽 소문자표현 - 영문 (Lorem Ipsum is simply dummy text of the printing and typesetting industry) 대문자표현 - 영문 (Lorem Ipsum is simply dummy text of the printing and typesetting industry) 앞철자대문자표현 - 영문 (Lorem Ipsum is simply dummy text of the printing and typesetting industr..

♥ 코딩(Coding)/부트스트랩(Bootstrap) 2021. 11. 9. 19:38

navbar-default : 밝은톤 / navbar-inverse : 어두운톤 **반응형 부분** **반응형 햄버거 전환 소스 안 버튼 추가** Toggle navigation **// 반응형 햄버거 전환 소스 안 버튼 추가** logo **//반응형부분** **반응형과 연동될 메뉴 부분** **navbar-right : 오른쪽정렬 / navbar-left : 왼쪽정렬** menu1 menu2 **드롭다운 일반메뉴형** menu3 Action Another action Something else here Separated link One more separated link **//드롭다운 일반메뉴형** **폼,버튼그룹** Submit **//폼,버튼그룹** **//반응형과 연동될 메뉴부분**

♥ 코딩(Coding)/부트스트랩(Bootstrap) 2021. 11. 8. 23:52

▶ 기본 네비게이션 구조선택자 >> .nav ▶ 네비의 전체적인 사이즈를 잡는 역할 >> .navbar ▶ 네비의 전체적인 기본 색상 및 그라데이션 역할 >> .navbar-defult * 내용과 함께 전환되는 tab 형태의 메뉴 * Messages * 내용과 함께 전환되는 버튼탭형 메뉴 * * 전체 부모폭에 맞춰 자식 박스의 넓은 디자인 메뉴 * menu1 menu2 menu3 Action Another action Something else here Separated link One more separated link

♥ 코딩(Coding)/부트스트랩(Bootstrap) 2021. 11. 8. 23:13

▶ 부트스트랩 (= 프레임워크) / 반응형 : 웹사이트를 쉽게 만들 수 있게 도와주는 html, css, js가 내포된 프레임워크로 하나의 css로 모바일, 태블릿, 데스크탑까지 다양한 기능을 제공하고 있으며 쉽게 웹사이트를 제작 및 유지할 수 있게 도와준다. 사용방법 / 기본제공되어지는 css, js 등의 외부파일들을 필수로 연결! = 링크를 이용하거나 해당하는 파일을 다운받아서 연결해주어 사용 가능함 구조와 그리드 시스템! ▶ 그리드 시스탬( 12 ) : 레이아웃을 만들기 위한 규격으로 단을 나눈어 레이아웃을 조금 더 쉽게 짜기 위한 형태 반응형을 더 쉽게 짜기 위해 사용! 12단의 그리드 내에서 셀이 분배되어짐 ▶ 그리드의 법칙 - 컬럼은 12개 내에서 존재해야함 12개이상의 컹엄이 생성 될 경우 ..

♥ 코딩(Coding)/부트스트랩(Bootstrap) 2021. 11. 8. 20:58

부트스트랩은 그리드 시스템을 이용하여 레이아웃을 잡습니다. 그리드(=격자)는 총12열로 구성되어 있으며, 웹사이트의 레이아웃에 따라 구성을 변경해 줄 수 있습니다. 그리드 시스템 = 부트스트랩의 핵심 레이아웃 시스템 그리드 시스템은 클래스 선택자를 기반으로 화면의 레이아웃을 잡아주는 역할을 합니다, 각각의 클래스 선택자에 따라 화면이 나뉘는 것을 볼 수 있습니다. 화면해상도가 변경될 때마다 레이아웃은 그에 맞게 변경되게 되어 있습니다. ※ 그리드 옵셥 : 기기별 해상도에 따른 클래스 접두사 ※ 1. 모바일폰 (

♥ 코딩(Coding)/부트스트랩(Bootstrap) 2021. 11. 8. 19:13