728x90
반응형
이제 Login을 만들겁니다. 로그인과 계정생성이 필요하기 때문에,
routes 밑으로 login.tsx와 create-account.tsx를 생성해줍니다.
사진과 같이 코딩해주고, layout에서 랜더링되는건 원치 않기에
아랫쪽에 별도로 만들어줍니다. 이후 결과를 확인해보면
layout에 묶여있지 않고 /create-account로 접속했을때 해당 tsx 파일이 랜더링 되는것을 확인할 수 있습니다.
이제 style components를 사용해서 전역 스타일을 적용해볼겁니다.
App.tsx에 GlobalStyles로 전역스타일을 설정해줄겁니다. 백틱을 사용하여 작성합니다.
reset으로 css를 초기화 해줍니다.
그 후 전체 디자인과 Body 디자인을 정의해줍니다.
이후 function에 GlobalStyles를 선언해주면 적용이 됩니다.
결과는 위 사진과 같이 나타나게 됩니다.
728x90
반응형
'Front-end > twitter_clone' 카테고리의 다른 글
[트위터 클론코딩 챌랜지] 계정 생성 및 간단한css_07 (0) | 2024.04.02 |
---|---|
[트위터 클론코딩 챌랜지] Firebase와 Loading page_06 (0) | 2024.04.02 |
[트위터 클론코딩 챌랜지] 종속성 설치 및 Router_04 (0) | 2024.03.31 |
[트위터 클론코딩 챌랜지] 폴더 정리 및 저장소 연결_03[MacOS환경] (0) | 2024.03.31 |
[트위터 클론코딩 챌랜지] Homebrew 및 환경세팅_02[MacOS환경] (0) | 2024.03.31 |