부트스트랩 Card

card Header , Body , Footer로 나눌 수 있다. card 를 만들어서 footer는 필요가 없어서 제거했다. 그리고 헤더와 바디를 채웠다. 하지만 문제점이 발생했다. 카드가 전체를 차지했다. 나는 0 0 0 이런식으로 한줄에 같이 있길 원한다. 그렇다면 어떻게 해야할까? 바로 로 감싸주면 되었다. 하지만 또 문제점이 발생했다. 크기를 줄이면 반응형으로 작동하지 않는다. 이를 해결하려면 어떻게 해야할까. 바로 부트스트랩 그리드 class="row"와 class="col-lg-4"를 사용하는 것이다. 하지만 이래도 오류가 또 발생하고 마는데. 데스크탑 크기가 아닐경우 이런식으로 이상한 배치가 되었다. 해결방법은 class="col-lg-4"와 class="col-md-6"를 같이 쓰는 것..

메인페이지(미완성)

부트스트랩 Examples

부트스트램 Examples에 들어가면 이미 만들어져 있는 템플릿이 많다. 잘쓰면 유용할 것 같다. https://bootsnipp.com/ HTML Snippets for Twitter Boostrap framework : Bootsnipp.com A design element gallery for web designers and web developers. Find snippets using HTML, CSS, Javascript, jQuery, and Bootstrap. bootsnipp.com 또한 사용이 가능한데 로그인을 검색해보면 다른 분들이 만든 로그인코드를 볼 수 있다.

부트스트랩 Carousel

Carousel을 사용하면 slide가 넘어가는 화면을 만들 수 있게된다. 넘어가는 속도가 너무 답답하다면 변경할 수도 있는데, 디폴트가 5초였다. 위의 사진에서 data-bs-옵션=""으로 설정을 바꾸라고 하였다. 간격을 1초로 해봐야겠다. 확실히 빠르게 바뀐다. 또한 data-bs-pause="hover" 사용하면 마우스를 올리면 멈춘다. 이제 정적으로 내가 슬라이드를 넘길 수 있도록 만들 것이다. 보라색: 버튼의 아이디와 슬라이드 박스의 아이디는 같아야한다. 붉은색: 정적슬라이드 기능을 사용하기 위해서는 false로 선언해야한다, 파란색: active는 지금 화면에 보이는 슬라이드를 나타낸다.

현상황의 문제점.

지금 문제점은 화면 크기를 줄일경우에 반응형으로 개발자들의 이름을 한 row에 하나씩 나오게는 했는데 사진크기가 맞지않는다.. 근데 이유를 잘모르겠다. 일단 공부하다 해결방법이 떠오르면 다시와서 해결해야겠다.

vsc ctrl+/

visual studio code 쓰다보면 갑자기 ctrl+/가 고장나서 불편한게 한두번이 아니다. 고치는 방법은 아마 이런 오류가 있으신 분들은 한컴 입력기로 되어있으실텐데 이것을 마이크로소프트 입력기로 변경하면된다. 단축키는 ctrl+shift 입니다.

github 복습

이번에 다른분들과 같이 공부할 기회가 생겨서 깃허브를 사용해보려고하는데 역시나 다를까 사용하는 방법을 또 까먹었다. 일단 repo를 새로 생성하고 clone reop를 해서 생성한 repo를 등록해준다. 이때 폴더위치를 잘 외워놓자. 이제 vsc로 아까 외워놨더 폴더를 열어준다. 이제 commit하고 push해주면된다.

css 배운점 + 이미지 회전

https://developer.mozilla.org/ko/docs/Web/CSS/padding padding - CSS: Cascading Style Sheets | MDN padding CSS 속성은 요소의 네 방향 안쪽 여백 영역을 설정합니다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성입니다. developer.mozilla.org 잘 안쓰다보니 또 까먹었다. 다시 복습하자. 또한 이미지를 회전 시키고 싶었다. 구글에는 없는게 없다. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate() rotate() - CSS: Cascading Style S..

티스토리 favicon 설정 (타이틀로고)

방학이라 블로그에 공부한 것을 기록한다고 블로그를 많이 사용하는데 로고가 까만색이라 거슬렸는데 이참에 바꿔버렸다. 근데 이게 좀 복잡한게 favicon은 ico라는 확장자명으로 변경해주어야하는데 https://convertico.com/#google_vignette ConvertICO.com - Convert PNG to ICO and ICO to PNG files This free online icons converter allows you to convert PNG to ICO files with ease. convertico.com 여기에 들어가서 1.크기 정해주고 2.변경할 png 파일(png만 가능하다) 업로드하고 3.클릭하면 된다. 그러면 이제 ico 파일을 만들었으니 티스토리에서 설정하는방법..

Font AweSome

https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 오랜만에 FontAwesome에 들어가서 아이콘을 좀 사용하려고 하는데.. 갑자기 이런게 뜨길래.. 조금 얼탔다. 그냥 무시하고 Kits에서 Free Icons를 눌러서 원하는 아이콘을 검색하면 되었다. 부트스트랩과 마찬가지로 Font Awesome 또한 사용하기 위해서는 CDN을 사용해야한다. 복사해서 head에 붙여넣어주자. 이런식으로 말이다. 이제 원하는 아이콘을 찾았다면 복사해서 붙여넣어주면 된다. 짜잔..