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

CSS

• 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
• overflow 때문에 shadow가 가려질 때

  CSS 2023. 2. 11. 22:04

  개인적으로 작업하다가 사용해본 방법.. 전 후

  Read More
• will-change 사용하기

  CSS 2023. 2. 4. 21:33

  그래픽카드를 이용해서 애니매이션을 가속화한다. ---> 컴퓨터에게 "나 이런 기능을 사용할꺼야 알고 있으라고" 미리 알려주는 것. 간혹 hover 등 애니매이션 기능을 사용할 때 부드럽게 연결되지 못하고 흔들리거나 삐걱이는 경험을 한 적 있을 것이다. 그럴 때 will-change 코드를 삽입해주면 컴퓨터는 그래픽카드를 이용해서 애니매이션을 가속화한다. 컴퓨터가 인지를 보다 더 빠르게 하면서 기능을 자연스럽게 보여주는 효과가 있다.

  Read More
• header 가운데 정렬Tip(좌측 아이콘 / 가운데 텍스트 / 우측 햄버거)

  CSS 2023. 1. 31. 16:51

  Settings .alt-header { padding: var(--horizontal-space); margin-bottom: 15px; display: flex; align-items: center; justify-content: center; } .alt-header__column:first-child { margin-right: auto; } .alt-header__column:last-child { margin-left: auto; }

  Read More
• :not 사용법(올바르게 해석하기)

  CSS 2023. 1. 7. 21:11

  해석 :not 뒤에 오는 것을 제외한 not 앞에 오는 요소들에 해당 기능을 적용하고 싶어요. 헷갈릴 수 있는 잘못된 해석 :not 뒤에 오는것에 해당 요소를 제거하고 싶어요. -> X

  Read More