스타일 적용 방법
코딩 매커니즘
목적에 따른 효율성
코드를 더 쉽게 알아 볼 수 있도록 작성 - 가독성
반복을 최소화 할 것 - 프로그램 속도, 데이터 용량
전역변수
- 공통적으로 사용하는 것을 전역으로 관리함
( 공통적 : 사이트 전체, 여러개의 페이지, 하나의 페이지, 여러개의 모듈 )
nextjs 스타일 적용하기
- 각 페이지에서 styled jsx 적용하기
- 글로벌스타일 지정하기
- styled jsx 적용된 component 만들기
- 모듈파일에서 스타일 불러오기
<스타일 적용된 컴포넌트> 공유
- 컴포넌트간 간격 스타일링 불가능
<동일한 스타일> 공유, 컴포넌트에 적용
<global-styled-jsx> 컴포넌트에 글로벌 적용
<styled-jsx> 컴포넌트에 한정 적용
암호 입력칸
- type password
암호 보이기 버튼
1. onClick -> 암호 입력 type default
2. 입력 value -> 새로운 div
버튼 위에 마우스 올리면 흐려짐 - opacity
mutation 실행중에 버튼 loading으로 변경
입력전에 버튼 비활성화
반응형
