다음의 그림을 기존의 CSS 방법, CSS-IN-JS 방법으로 각 각 만들어 보세요.
CSS-IN-JS 방법
아이디, 비밀번호 글씨를 재활용하고, 아이디 비밀번호를 입력하는 박스를 재활용하기로 했다
내 코드와 결과
// css-in-js 코드
import styled from "@emotion/styled";
export const LoginContainer = styled.div`
height: 400px;
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px solid violet;
`
export const LoginName = styled.h1`
width: 100px;
margin: auto;
margin-top: 50px;
`
export const InputName = styled.span`
font-size: 20px;
display: block;
margin-left : 50px;
`
export const InputBox = styled.div`
border: 1px solid gray;
border-radius: 5px;
width: 400px;
height: 50px;
margin: auto;
margin-bottom: 20px;
`
// 리액트 컴포넌트 코드
import { LoginContainer, LoginName , InputBox,InputName } from "../../styles/01-02"
export default function Login(){
return(
<div>
<LoginContainer>
<LoginName>Login</LoginName>
<InputName>아이디</InputName>
<InputBox></InputBox>
<InputName>비밀번호</InputName>
<InputBox></InputBox>
</LoginContainer>
</div>
)
}
만들다가 발생한 에러
모범답안
// CSS 방법
function Home(){
return (
<div className={styles.wrapper}>
<h1>로그인</h1>
<label className={styles.label}>아이디</label>
<input className={styles.input} type="text" />
<label className={styles.label}>비밀번호</label>
<input className={styles.input} type="password" />
</div>
)
}
// CSS-IN-JS 방법
function Home(){
return (
<Wrapper>
<Title>로그인</Title>
<Label>아이디</Label>
<ID type="text" />
<Label>비밀번호</Label>
<Password type="password" />
</Wrapper>
)
}
728x90
'Frontend 프론트엔드' 카테고리의 다른 글
[ 7 ] 로그인 처리 과정 (0) | 2024.04.01 |
---|---|
[ 5 ] flex 속성 정리 1편 (1) | 2024.03.22 |
[ 3 ] emotion JSX 와 CSS-IN-JS (0) | 2024.03.19 |
[ 2 ] HTML 과 React의 차이점, NEXT 폴더구조의 특징 (1) | 2024.03.18 |
[ 1 ] node.js 와 npm 그리고 npx (1) | 2024.03.16 |