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

전체 글

• github 새로운 저장소 vscode와 연결하기

  카테고리 없음 2023. 10. 16. 14:09

  뿌야!

  Read More
• git repository 삭제 하고 새로운 저장소 만들기

  카테고리 없음 2023. 10. 16. 14:02

  $ rm -rf .git $ git init

  Read More
• scss 설치법

  카테고리 없음 2023. 4. 26. 19:54

  1. 먼저 node.js와 npm의 설치 유무를 확인합니다 node -v npm -v 둘 다 버전이 나온다면 설치가 되어있는 겁니다. 2. import하고있는 모든 module들을 다운로드 합니다 npm i 위 명령어를 터미널에 입력하면 import from 으로 작성된 모든 module들을 npm이 자동으로 인식해 다운로드 해줍니다. 하지만 devDependencies에 들어있는 module들은 npm이 자동으로 설치해 주지 않으므로 "gulp": "^4.0.2", "gulp-sass": "^4.1.0", "node-sass": "^6.0.0" 위의 세가지는 직접 다운로드 해주셔야 합니다 npm i gulp gulp-sass node-sass --save-dev 위 명령어로 세 개의 module들을 설..

  Read More
• scss 설치하기

  CSS 2023. 4. 26. 19:53

  https://nykim.work/97 [아무튼 Sass] 1. 시작하기 - Sass 개념, 컴파일러 설치 프롤로그 "CSS 인생은 전처리기를 도입하기 전과 후로 나뉜다" ......이런 말은 없지만, Sass를 배우면 CSS 작성이 짱짱 편해집니다. 신입 퍼블리셔부터 스타일시트 관리를 하는 개발자까지, Sass에 대 nykim.work 여기 블로그 보고 한 방에 됨

  Read More
• youtube 영상 넣을 때 css 참고

  CSS 2023. 3. 28. 21:42

  유튜브 영상의 비율은 보통 16:9 를 사용한다. 위에 item에서 padding-top: 50%는 부모 width를 기준으로 50%만 높이가 적용된다. 부모 width가 100이라면 자식은 50% 적용된 height: 50을 가지게 되는것. * 위에 css는 부모 width가 100px 이고 자식에 heigh:0, padding-top: 56.25%(16:9를 구현하기 위한) 를 적용한 모습

  Read More
• position:fixed, position:absolute를 사용하는데 width:auto 인 경우

  CSS 2023. 3. 23. 14:25

  position:fixed, position:absolute를 사용하는데 width:auto 인 경우 화면의 가로가 최소한으로 줄어들려고 하는 특징이 있음 해결하려면 width:auto가 아닌 width: 100%를 사용하면 됨.

  Read More
• position absolute로 가운데 정렬하기

  CSS 2023. 3. 21. 21:17

  * 상, 하 기준 가운데 맞추고 싶다면 height: 100px; top:0; bottom:0; margin: auto 0; * 좌, 우 기준 가운데 맞추고 싶다면 width: 100px; left:0; right:0; margin: 0 auto; 1. position:absolute; 2. 부모에는 position: relative가 존재해야함 3. 크기가px 분명히 명시되어야 정렬 가능

  Read More
• 구글 아이콘 사용하기(google icon cdn + 링크)

  카테고리 없음 2023. 3. 20. 21:59

  cdn : 사이트로 이동 : https://fonts.google.com/icons?selected=Material+Icons:logout:&icon.query=arrow Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com

  Read More