공부 기록일지📚

🚗 background-image :요소의 배경 이미지를 한 개, 혹은 여러 개 지정한다. background-image의 속성값을 여러개 지정할 경우, 가장 상단에 있는 코드가 이미지의 최상단으로 올라오며 코드가 아래있다면 백그라운드 쪽으로 붙는다. 나중에 선언된 코드가 배경으로 깔린다고 생각하면 된다. 그라데이션도 지정도 가능하다. linear-gradient(방향, 시작 색상, 종료 색상) 방향같은 경우는 생략이 가능한데, 기본값은 아래에서 위로 그라데이션이 형성된다. 그라데이션은 linear-gradient 외에도 radial-gradient(원형 그라데이션) , conic-gradient(콘형 그라데이션) 가 있다. .color-container { background-image: url('이미..

기본적으로 CSS는 부모 요소의 속성은 자식 요소에게 상속됩니다. 하지만, css 속성을 적용하다보면 어떤 상속되지 않는 경우도 있는데 이는 CSS 속성 중에서도 "상속이 되는 속성"이 있고 "상속되지 않는 속성"이 따로 있기 때문입니다. 대표적인 상속되는 속성 & 상속되지 않는 속성 상속되는 속성 상속되지 않는 속성 color padding font-family margin font-size 등등 border 등등 부모 요소의 속성값 말고 다른 값을 적용하고 싶다면 css 코드를 부모 요소의 코드보다 아래에 적어주면 됩니다. -> cascading이라는 룰이 존재하여 css 적용의 우선순위를 결정해주기 때문입니다. 간단히 말하면 가장 최근에(위에서부터 아래로 쓴다고 했을 때, 맨 아래 존재하는 코드)작..

선택자(selector) 1.전체 선택자 * { property: value } 2.그룹 선택자 수의 제한이 없다. 아래 예시에서는 두 클래스에게 같은 속성을 부여한다는 소리 .class1, .class2 { property: value } 3.가상 클래스 선택자 : 실제로 html요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다. 선택자:가상 클래스 { property: value } 3-1.가상 클래스 선택자 예시🚗 :first-child (형제 요소 중 첫번째만 선택) e.g. p:first-child 라고 지정해서 css 를 먹였는데 적용이 안되는 경우 -> 형제요소 중 첫번째 p태그를 지칭하는 것으로 만일 1번째 형제 요소가 p태그가 아니라 다른 태그라면 css가 당연히 적..

package.json 과 package-lock.json package.json은 뭔가요? - 기본적으로 package.json은 문서입니다. 개발자가 배포한 패키지에 대해, 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서 -> 프로젝트의 개발만을 위한 목적인지, 패키지를 배포하기 위한 목적인지에 따라 용도가 갈릴 수 있다. 자신의 프로젝트가 의존하는 패키지의 리스트 자신의 프로젝트의 버전을 명시 다른 환경에서도 빌드를 재생 가능하게 만들어, 다른 개발자가 쉽게 사용할 수 있도록 한다. 확장자로 알 수 있듯, json파일로 속성-값의 쌍으로 이루어져 있으며 npm에서는 이 속성을 field라고 표현합니다. "name"과 "version"은 반드시 있어야 하는 fields 이며 이 필드가 누락되면 ..

png, jpeg 등의 파일 외 svg파일을 사용하면 이미지가 깨지지않고 용량이 적으며 출력이 빠르다. 또한, 수정과 애니메이션이 가능하다는 장점이 있다. 0. 가장 베이직한 방법 기본적으로는 img의 src로 svg를 넣어줄 수 있다. import Reservation from 'assets/icon-24-reservation.svg' 1. svg 파일을 react component처럼 사용하는 방법 svg 파일 주소를 복사한다. src 폴더(보통 src > assets > images)에 svg 확장자명의 파일(e.g. MySvg.svg)을 만들어 추가한다. something.svg 파일에 복사한 주소를 붙여넣는다. svg 파일을 component로 불러온다. (이때 { ReactComponent a..