React에서 한글 폰트를 사용하려면 필요한 세팅을 따로 해줘야된다 1) 소스파일에 fonts폴더를 설치하고 필요한 ttf파일을 임포트한다 2) CRA에서 만들어지는 index.css에 @font-face를 적용한다 3) 그리고 필요한 화면에서 fontFamily속성으로 불러내 사용하면 된다

항상 &에 pseudo구문으로 잡아준다 단, 여기에서 주의할 점은(hover얘긴아니지만) border자체가 없으면 color는 먹히지 않으니 hover에도 border 속성을 달아줘야 한다는 정도.

예시와같이 컴포넌트를 map으로 랜더링하는 경우를 생각해보자 4개의 컴포넌트가 리턴되었는데, 나는 특정 컴포넌트를 누를때만 효과를 적용하고 싶었다 따라서 dynamic한 CSS적용이기에 props를 이용한 makestyle을 사용하려고 한다 일단 className을 잡기위해 useStyles라는 makeStyles 함수 객체를 만들어 적용하였다 이름은 root로 하였다. 이 함수에 props를 넣어주면 이는 makeStyles객체로 전달된다. 내 경우에는 useState로 정의한 props를 만들었다 그리고 이 props를 makeStyles에 그대로 보내주었기에 나는 props으로 접근하여 CSS를 먹일수 있게 되었다 props에 CSS 데이터 자체가 있어도 괜찮지만, 나는 이것을 조건으로 사용하였다 ..

이렇게 생긴 컴포넌트 기준 root에서 & 선택자로 셀렉트 하면 된다

배경화면 넣는 속성 1) background-image - 입력 이미지 설정 - url(이미지) 형태로 입력 2) background-size - 가로와 세로 길이를 입력 - background-size: 10px 10px 형태로 입력 - cover속성: 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다. 얘는 이미지가 최대한 크게 보여진다는 뜻.(웹페이지 전체 배경에 사용하기 좋음) - contain속성: 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다(어플 배경에 사용하기 좋음) 3) background-repeat - 배경화면의 반복에 대한 설정 - no-repeat으로 해두면 하나만 ..

Z-index는 여러가지 컴포넌트가 겹쳐있을때 순서를 정하는 property이다 Z-index가 큰 순서대로 화면 최상단에 나타난다 예컨데, 배경화면 컴포넌트와 버튼을 겹치게하고 배경화면 컴포넌트의 z-index를 더 크게 주면, 버튼이 눌리지 않는다 배경화면이 앞서 렌더링되기 떄문이다 하지만 z-index의 Stacking Context(쌓임맥락)이 상당히 복잡해서 내 맘대로 정하기가 힘들었다 대략적으로 Stacking Context에 영향을 주는 요소를 보면 1) position 2) opacity나 transform 3) 부모요소 이렇게 세 가지 정도가 영향을 크게 끼치는 듯 한다 1)에 대해서는 z-index를 정하기 전에 항상 position을 정해주면 된다. 2)에 대해서는 해당 컴포넌트의 p..