제인초의 개발 일기 제인초의 개발 일기

CSS

• 화살표 만들기

  CSS 2022. 11. 28. 16:34

  content: ‘’; display: inline-block; width: 12px; height: 12px; border: solid 1px transparent; border-right-color: #fff; border-bottom-color: #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);

  Read More
• text-overflow 글자 자르기

  CSS 2022. 11. 25. 11:43

  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

  Read More
• picture와 source 태그

  CSS 2022. 11. 25. 11:37

  이렇게 picture와 source 태그를 사용하고 css에서 auto로 주면 자동으로 1023 사이즈 줄어들 때 맞춰서 작아진 이미지로 변환해줌

  Read More
• 팝업 띄워져 있을 때 뒤에 스크롤 멈추기

  CSS 2022. 11. 25. 11:27

  html, body{ height: 100%; overflow: auto; }

  Read More
• accordion-button

  CSS 2022. 11. 25. 10:55

  .accordion-button { position: relative; display: flex; align-items: center; width: 100%; padding: 1rem 1.25rem; font-size: 1rem; color: #000000; ——> css. 파일에서 얘 복사해서 _000.scss 파일에 넣은 후 수정하면 됨 text-align: left; background-color: #fff; border: 0; border-radius: 0; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, ..

  Read More
• card grid

  CSS 2022. 11. 25. 10:55

  .item-grid{ margin: 0 auto; width: 316px; height: 100vh; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px 18px; align-content: start; .item{ border: 1px solid darkgrey; height: 100px; } }

  Read More
• Bootstarp5 + SASS 환경설정

  CSS 2022. 11. 24. 18:34

  https://www.youtube.com/watch?v=iJKCj8uAHz8 https://www.youtube.com/watch?v=WlOBV00NldU [gulp dev] gulp dev 가 안되서(오류) 컴파일 명령어를 따로 사용했었음. package.json "scripts": { "compile:sass": "sass --watch scss:src/assets/css" }, -> 터미널 : npm run compile:sass

  Read More
• position: fixed는 뷰포트를 기준으로 요소를 배치

  CSS 2022. 11. 23. 14:33

  부모 요소가 아닌 브라우저의 전체화면(viewport)을 기준으로 요소를 배치 할 수 있다.

  Read More