기초적인 마크업

+import styled from "styled-components";
 import Header from "./components/Header";
+import Image from "./components/Image";
 
 function App() {
   return (
-    <div className="App">
+    <Container>
       <Header />
-    </div>
+      <Image />
+    </Container>
   );
 }
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 export default App;

 import styled from "styled-components";
 
 const Header = () => {
-  return <Container></Container>;
+  return <Container>Gif Generator</Container>;
 };
 
 const Container = styled.div`
   width: 100%;
-  height: 4rem;
+  padding: 1.5rem;
   background-color: white;
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
+  text-align: center;
+  font-size: 1.6rem;
+  font-weight: 500;
+  font-style: italic;
 `;
 
 export default Header;

+import styled from "styled-components";
+
+const Image = () => {
+  return (
+    <Container>
+      <ImgBox />
+      <Menu />
+    </Container>
+  );
+};
+
+const Menu = () => {
+  return (
+    <div style={{ width: "15rem", marginLeft: "2rem" }}>
+      <Box />
+      <Box />
+      <Box />
+      <Box />
+    </div>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+const ImgBox = styled.div`
+  width: 40rem;
+  height: 30rem;
+  background-color: white;
+  box-shadow: ${({ theme }) => theme.boxShadow.normal};
+  border-radius: 2rem;
+  margin-top: 2rem;
+`;
+
+const Box = styled.div`
+  width: 100%;
+  height: 10rem;
+  margin-top: 2rem;
+  border-radius: 1rem;
+  background-color: white;
+  box-shadow: ${({ theme }) => theme.boxShadow.normal};
+`;
+
+export default Image;