CSS

1. CSS 적용방법과 선택자 1) CSS를 적용하는 3가지 방법 인라인 스타일 : HTML 태그마다 style 속성으로 CSS 코드를 넣어줌. 공통 속성을 재사용해서 부여할 수 없고, HTML 코드와 CSS 코드가 분리되지 않기 때문에 잘 사용하지 않음. 내부 스타일

자주 사용하는 메인 색상, 폰트 사이즈 등을 모듈화한다.형식 : 변수명 앞에 -- 꼭 붙이기모든 요소에서 사용할 수 있는 변수는 :root에 작성하고, 특정 요소에서만 사용될 수 있는 변수는 따로 지정한다.다른 CSS 파일 import 하는 방법 : @import ur

Font Awesome 웹에서 아이콘이 필요할 때 사용하는 라이브러리 장점 : svg 기반 아이콘 지원 패키지 설치 SVG 기반 아이콘 활성화 무료 제공 아이콘 패키지 설치 React 컴포넌트 형태로 사용할 수 있도록 해주는 기능 사용 방법 패키지 설치를 마치고

sass 다운받기 yarn add sass CSS 안쪽으로 들어갈수록 코드가 매우 길어짐 SCSS 안에 포함해서 쓰면 됨.

svg 파일 포맷은 웹 사이트에 2D 그래픽, 차트, 일러스트레이션을 표현하는 데 널리 사용되는 툴로, 특히 아이콘 및 로고 등에 많이 사용한다.벡터 파일이므로 확대하거나 축소해도 해상도가 저하되지 않는다.기본 SVG 파일은 많은 컬러 픽셀로 생성되는 래스터 이미지보다

💅🏽 styled-components 실수로 여러 파일에서 같은 클래스명을 이용해 클래스명이 겹치게 되면 스타일이 충돌하는 문제가 발생할 수 있다. 이러한 문제를 신경쓰지 않고 스타일을 적용시킬 수 있는 방법 중 하나가 styled-components이다. >h

https://flexboxfroggy.com/#ko justify-content : 중심축 방향으로 정렬 >flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의

📌 grid-column-start : 그리드 세로선에서 시작되는 영역을 가리킨다. grid-column-start: 3 그리드 세번째 세로선에서 시작되는 영역(그리드의 왼쪽에서 세번째 열(column) 항목)을 뜻한다. grid-column-start: -3 그