부트스트랩 버튼

부트스트랩을 사용해서 버튼을 좀 더 이쁘게 꾸며보려고합니다. 버튼 하나는 검은색 나머지 하나는 흰색으로 하고 싶네요. 하나는 검은색으로 만들고 싶어서 위 클래스를 사용했고 나머지 버튼은 outline 버튼으로 만들려고 합니다. 크기 설정을 위해서 btn-lg를 사용합니다. 1 2 3 4 5 Meet new and interesting House nearby. Download Download Colored by Color Scripter cs 이런식으로 추가해주었습니다. 점점 그럴 듯 해져갑니다.

부트스트랩 container

container fluid 와 기본형의 차이를 영상으로 말씀드릴께요. 붉은색: 기본 , 노란색: fluid 입니다. 보시는 것 처럼. fluid는 항상 100%의 배치가 유지되는 것을 보실 수 있습니다. Css Link Order 저번에도 헷갈렸는데 이번에도 헷갈렸네요. css 순서는 div class="hoho" 라는 태그가 있다고 하면. A link 에서 꾸미는 것과 B link에서 꾸민다고 하겠습니다. 코드 순서가 A->B 일 경우 B css 가 hoho에 적용이 됩니다. 이번에도 순서를 생각못해서 시간을 잡아먹었네요.. 전 후

부트스트랩 글씨체 적용

https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 우선 구글 폰트사이트에 접속하셔서 원하는 폰트를 선택해주세요. 글씨체중에서도 원하는 글자크기를 선택해서 Select this style을 눌러주세요. 저는 이미 누른상태입니다. 붉은색 부분을 클릭하시면 이런 화면이 뜨는데 import를 클릭하시고 head 부분에 붙여넣기 하시고, 글씨체를 변경해주시면 됩니다!

부트스트랩 row col 배치

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 col col col-6 col-6 col-lg-3 col-md-4 col-sm-6 col-lg-3 col-md-4 col-sm-6 col-..

부트스트랩 토글이 안 될때 해결방법

토글이 안된다.. 해결방법은........ 지금 나의 html 파일에는 js가 없기때문이였다. 토글과 같은 기능은 js와 jquery가 사용되는데 없으니 될리가 있나! 추가하니 해결완료!

CodePly , navbar

https://www.codeply.com/p www.codeply.com Codeply는 인터넷에서 바로 사용할 수 있는 IDE이다. 들어가서 최신버전의 부트스트랩을 사용해보자. 부트스트랩 공식문서를 보면, nav, ul, li 마다 class 명이 각각이라는 것을 확인 할 수 있다. 위와 같은 식으로 li 태그를 복사 붙여넣기를 했다. 수직으로 Contact, Pricing , Download가 나왔는데 나는 수평으로 되길 원한다. 수평이 가능하게 된 이유는 붉은색 class를 사용했기 때문이다. navbar-expand-lg lg는 크기가 작아질 경우에 수직으로 변경되는 반응형이다. 부트스트랩에서 지원하는 다양한 색상들 navbar dark는 글자색 (dark라서 검은색일 것 같지만, 알고보면 회색..

부트스트랩을 설치하는 방법 , CDN

BootstrapCDN을 복사하여 붙여넣습니다. https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com 그렇다면, 지금부터 CDN이 무엇인지 알아보겠습니다. CDN Content Delivery Network 예를 들어 client가 부산, server가 서울이라고 합시다. 이 경로를 통해 웹사이트에 있는 html, css, j..

채팅 앱

pug css , jquery 오류

script(src='http://code.jquery.com/jquery-latest.js') 추가하면 업성짐 html 태그 생성하는 방법 https://iot624.tistory.com/126

zoom - 닉네임

우선 닉네임을 저장하는 박스를 만들기위해 room div를 두개의 아이디를 가진 form 으로 나눈다. 그리고 버튼을 누르면 input을 아이디로 구분한다. 이벤트 리스너를 설정할때도 마찬가지 이다. 초기의 닉네임은 익명이며, 사용자가 닉네임을 저장한다면 이제 그 닉네임에 맞게 채팅 문자열이 전송된다.