개인코딩개발공장

먼저 @keyFrames를 만들어줘야한다. @keyframes change-color { from { background-color: red; } to { background-color: blue; border-radius: 50%; } } change-color이란 이름의 애니메이션이다. .box1 { animation-name: change-color; animation-duration: 1s; animation-iteration-count: infinite; } 그리고 적용하고 싶은 html css에 저shape라는 애니메이션을 적용하면된다. 무한하게 1초동안 change color 애니메이션이 반복되는걸 볼수있다. @keyframes change-color { from { background-co..

먼저 html ## transform 사용하기 # 이동을 해보자 .box { width: 100px; height: 100px; background-color: red; margin: 10px; transform: translateX(50px); } - translateX(값) 이건 x축으로 얼만큼 이동하겠는가 - translateY(값) 이건 y축으로 얼만큼 이동하겠는가 -translate(값1,값2) 이건 xy각각 얼만큼 이동하겠는가 # 크기를 조절해보자 .box { width: 100px; height: 100px; background-color: red; margin: 10px; transform: scaleX(2); } - scaleX(값) 값배만큼 X축으로 늘리자~ - scaleY(값) 값배만..

이미지 용량이 크다. 그렇다고 정적인 이미지를 없애기도 그렇다. 하지만 화면에 잡히지도 않는 이미지가 다운이 된다면? 그만큼 호스팅시 클라이언트에게 전송되는 이미지데이터가 든다는 것이고, 따라서 낭비다. # 예시 이 코드는 총 이미지 세개가 carousel형식으로 보여지게 되는 부트스트랩 태그다. 처음 carousel에 이미지경로1의 이미지가 보여지게 된다. 그다음 이미지2, 이미지3이 뜬다. 다음버튼은 그냥 보기 편하게 안썼지만 다음 버튼을 누르면 이 이미지들이 버튼을 누를때마다 슬라이드로 보여진다. 근데 네트워크탭을통해 확인하면 이 carousel이 화면에 보여지는 순간, 이미지1,2,3이 전부 다운받아진다. 이미지 하나의 용량이 100mb라고 할때 화면에는 이미지1만 보이는데 carousel이 켜진..

#우선순위 css를 수정하면서 미디어쿼리가 적용이 안되는 경우를 보았다. 이런경우엔 css우선순위 문제가 있을경우이다. 개발자도구에서 적용안되는 태그를 클릭해서 우선순위로 적용된걸 볼 수 있다. # 예시 / 해결방법 .class_b{ .class_a { font-size : 1em; } } 이런 클래스에 적용한 속성이 있는데, @media (max_width : 400px){ .class_a { font-size : 0.7em; } } 이렇게 모바일 환경에따라 class_a의 폰트사이즈를 적용하려고 할때, 미디어 쿼리가 적용이 안된다면? 원 css파일처럼 class_b로 감싸주면 된다. @media (max_width : 400px){ .class_b{ .class_a { font-size : 0.7em..

position relative는 원래 있어야 하는자리에서 적용 기본값은 static임 absolute 는 부모태그 박스안에서 움직임. fiexed : 웹페이지 기준에서 움직임 sticky 는 원래있던자리에있는데 스크롤 내리면 그자리 고정됨. 이건 꼭 top bottom 정해줘야함

너무 오랜만이라 다시 적음 justify-content 가로 정렬 보통 스페이스 비트윈 자주씀. align-items 세로정렬.. 센터나 flex-end나 등등 flex-direction 방향설정하는거.. column으로 바꿀때씀. row는 기본설정 align-self 는 상위요소에 flex로지정이되어야 적용됨. flex-wrap 요소가 꽉차면 다음줄로 넘겨줌 flex-flow 는 flex-direction 과 wrap같이쓸수있는거. align-content 는 세로 간격정렬.. align-items 에 space머시기 안됨

## 스위트 얼러트 https://sweetalert2.github.io/ SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 예쁘게 alert띄워주는거.. ## 섬머노트 https://summernote.org/ 글쓰기 ui ## 아이콘 부트스트랩은 폰트어썸을 쓰고있음. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles..

https://getbootstrap.com/docs/5.2/content/typography/ https://getbootstrap.com/docs/5.2/content/images/ Typography Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more. getbootstrap.com https://getbootstrap.com/docs/5.2/content/tables/ Typography Documentation and examples for Bootstrap typography, including global settings, heading..

https://getbootstrap.com/docs/5.2/layout/grid/ 헤더에~ 바디태그 하단에 # 기본 구조 1 2 3 먼저 컨테이너로 감싸고 그다음 로우, 다음에 컬럼이 들어감. ## 그리드 시스템 # 컬럼 비율 컬럼 총 합은 12이고 화면 배열을 여기서 정한다. 예제코드는 4, 4, 4로 나눴지만 1,5,6이렇게 해도되고.. 걍 12가 한 로우가 되는거임. 12를 넘어가면 다음 로우로 설정됨. 이렇게 12를 넘기면 이런식으로.. # 컬럼 크기 비율 md로 설정하면 768px이하일때는 재배열이 된다. 768은 보통 모바일 기준. 보통 sm md lg를 가장 많이 씀. #off-set-md-4 offset-md-4를 주게되면 현재태그 앞에 블럭에 4개짜리 빈블럭을 넣는 개념임.(요기 좀 헷..