나만의 일기장 CSS 사용해서 만들기(실습)

index.js

import {
  Page,
  Wrapper,
  Title,
  Content,
  Text1,
  Text2,
  Text3,
  Text4,
  Subtitle,
  DiaryDate,
} from "@/styles/my_diary/mydiary";

export default function MyDiary() {
  return (
    <Page>
      <Wrapper>
        <Title>나만의 일기장</Title>
        <Content>
          나만의 일기장 입니다! <br />
          원하는 색과 사이즈로 일기장을 커스텀 해보세요.
          <br />
          <Text1> Have a Good Day.😊 </Text1>
        </Content>

        <Subtitle>📌 쭈꾸미의 일기</Subtitle>
        <Content>
          오늘은 <Text2>김치찜</Text2>을 먹었다. <Text3>🧀치즈 계란말이</Text3>
          도 같이 나오는 세트였다.
          <br />
          맛있어서 정신없이 먹다보니 배가 너무 불러서 힘들었다.
          <br />
          내일은<Text4> 과식하지 말아야겠다!!</Text4>
          <br />
        </Content>
        <DiaryDate>
          2023년 3월 8일
          <br />
          날씨 맑음☀️
        </DiaryDate>
      </Wrapper>
    </Page>
  );
}

mydiary.js

import styled from "@emotion/styled";

//박스
export const Page = styled.div`
  width: 100%;
  height: 100vh;
  background: #eeeeee;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`;

export const Wrapper = styled.div`
  width: 620px;
  padding: 35px 30px;
  background-color: white;
  border: 1px solid gray;
  border-radius: 10px;
`;

export const Content = styled.div`
  width: 100%;
  padding-top: 20px;
  padding-bottom: 25px;
`;

//글씨
export const Title = styled.div`
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 33px;
  font-weight: bold;
  padding-top: 9px;
  padding-bottom: 10px;
  background-color: orange;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

export const Subtitle = styled.div`
  width: 100%;
  background-color: #eeeeee;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
`;

export const Text1 = styled.div`
  padding-top: 10px;
  font-size: 20px;
  font-weight: bold;
  text-decoration: underline;
  color: orange;
  display: block;
`;

export const Text2 = styled.text`
  color: red;
  font-weight: bold;
`;

export const Text3 = styled.text`
  color: orange;
  font-weight: bold;
`;

export const Text4 = styled.text`
  color: blue;
  font-size: 22px;
  font-weight: bold;
  font-style: italic;
`;

export const DiaryDate = styled.p`
  color: #919191;
  font-size: 14px;
  text-align: right;
`;