CSS3 [React] CSS module로 스타일링하기 리액트에서 css module을 이용해서 컴포넌트 별로 스타일을 지정해 줄 수 있다. 1. MainNavigation.module.css 파일 만들기 먼저 css를 적용하고 싶은 컴포넌트 주변에 컴포넌트와 이름이 같고. module.css를 확장자로 가지는 파일을 만든다. //MainNavigation.module.css .header { width: 100%; height: 5rem; display: flex; align-items: center; justify-content: space-between; background-color: #77002e; padding: 0 10%; } .logo { font-size: 2rem; color: white; font-weight: bold; } .header.. 2022. 7. 25. [CSS] CSS 변환_ Transform, perspective, backface-visibility CSS 변환 1. Transform AB 함수를 띄어쓰기로 구분해서 여러가지 효과를 줄 수 있음 transform : 변환함수1 변환함수2 변환함수3 ...; 사용할 수 있는 함수의 종류 trnasform : 원근법 이동 크기 회전 기울임; 1-1. 2D 변환 함수 transform: translate(x,y) 이동(x축, y축) px transform: translateX(x) 이동(x축) px transform: translateY(y) 이동(y축) px transform: scale(x,y) 크기(x축, y축) px transform: rotate(degree) 회전(각도) deg ex)transform: rotate(45deg) transform: skewX(x) 기울임(x축) deg ex) tr.. 2022. 4. 7. [CSS] Flex(플렉스) _ 정렬 플렉스(정렬) container요소와 items요소으로 나뉨! 1. container 1-1. display container 설정해주기. display: flex; 블록 요소와 같이 Flex Container 정의 display: inline-flex; 인라인 요소와 같이 Flex Container 정의 1-2.flex-direction flex-direction 수평 정렬 flex-direction : row; 행이 축 (좌->우) flex-direction: row-reverse; 행이 축 (우 -> 좌 ) 수직 정렬 관련된 cloumn, cloumn-reverse가 있지만 원래 block 요소는 수직으로 정렬 되기 때문에 잘 안씀. 행은 수평/ 열은 수직 시작점과 끝점, 주축(main-axis)과.. 2022. 4. 6. 이전 1 다음
