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

전체 글

• 버튼 기본 , active 활성화 했을 때 상태

  CSS 2022. 11. 29. 10:18

  a.accordion-btn { position:relative; display:block; &:after { content:''; position:absolute; display:block; width:24px; height:24px; top:50%; right:20px; transform: translateY(-50%) rotate(0deg); -webkit-transition: all 0.5s ease; transition: all 0.2s ease; background:url(../../assets/images/arrow-down.svg) no-repeat center; } &.active { &:after { transform: translateY(-50%) rotate(-180deg); -we..

  Read More
• focus-within

  CSS 2022. 11. 28. 18:35

  .project-description:focus-within { border: 1px solid #ffffff; }

  Read More
• bootstrap 부트스트랩, dart-sass 다트사스 호환 오류 해결

  개발 에러 2022. 11. 28. 18:35

  두 개의 명령어로 해결 가능 #### Dart-sass 이용시 customize 된 bootstrap 이용시 오류 ( `math.div()` 과 `list.slash()` 를 변경해줌 ) ``` npm install -g sass-migrator ``` ``` sass-migrator division **/*.scss ```

  Read More
• scss 파일 분리 시 / 파일명에 _언더바는 언제 사용하는걸까?

  기타메모 2022. 11. 28. 17:57

  가장 Best는 common.scss 와 sub.scss에 다른 파일들이 @import로만 이루어져 있는것. 그게 아닌 경우에는 1. common.scss 에 -> 공통 컨테이너, 레이아웃, 공통 컴포넌트 작성하기. 2. 아코디언 같이 규모가 큰 공통 컴포넌트의 경우 따로 분리해서 common.scss 안에서 @import * 폴더안에 scss 쓰고 그걸 다른 쪽에 임포트 하게 되는 경우 파일에 _언더바 안 붙이게 되면 해당 폴더까지 생성되어 컴파일 되니 결국 의도한대로 import 경로가 맞지 않게될 가능성이 높음. ---> 임포트는 하는 파일 이름에는 _언더바 사용해서 이름 짓기

  Read More
• On npm install: Unhandled rejection Error: 오류해결방법

  개발 에러 2022. 11. 28. 17:13

  출처: https://uxicode.tistory.com/entry/On-npm-install-Unhandled-rejection-Error-EACCES-permission-denied [세줄코딩]

  Read More
• 테이블 각 행에 색을 따로 넣을 때

  CSS 2022. 11. 28. 17:12

  active라는 클래스를 가진 tr 안에 td들의 행에 색 입힌다. tr.active td { background-color: #f9f5f5; color: #ea5d5d; } 2020.03.06 16:32 2020.03.06 16:32 자동보정 실행 ‘LINUX NGS7(내부) (172.16.10.11)’ 외 7개 장비, 8개의 자동보정 실행중 3/5

  Read More
• 행의 배경색을 번갈아 넣기

  CSS 2022. 11. 28. 17:12

  tr:nth-child(2n+1) td { background-color: #f9f9f9; } tr:nth-child(2n) td { background-color: #fff; }

  Read More
• 반응형 폰트

  CSS 2022. 11. 28. 17:09

  반응형 만들 때 body에 font-size=“100%” font-wieght은 normal -webkit-text-size-adjust:100%; text-size-adjust -> 브라우저의 텍스트 크기 조절(핸드폰 화면크기에 따라서 알아서 조절) 출처: https://demun.tistory.com/2402 [demun(대문블로그)]

  Read More