refactor: routing 로직 변경 및 parcel 적용

rjc1704 · Jun 4, 2023 · 0bf8f3a · 0bf8f3a
1 parent e0547b3
commit 0bf8f3a
Show file tree

Hide file tree

Showing 12 changed files with 3,278 additions and 107 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
-.sass-cache/
-*.css.map
-*.sass.map
-*.scss.map
+.parcel-cache/
+dist/
+node_modules/
+.vscode/
diff --git a/css/styles.css b/css/styles.css
@@ -1,13 +1,23 @@
-html,
+* {
+  margin: 0;
+  padding: 0;
+}
+
 body {
+  box-sizing: border-box;
   font-family: sans-serif;
-  margin: 0;
   height: 100%;
+  display: flex;
+}
+h1 {
+  margin-bottom: 2rem;
+}
+h2 {
+  margin-bottom: 2rem;
 }
-
 p {
-  margin-block-start: 0;
   text-indent: 1rem;
+  margin-bottom: 2rem;
 }
 
 hr {
@@ -18,37 +28,27 @@ hr {
   margin: 1.5rem 0 1rem 0;
 }
 
-#container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-
-#root {
-  flex-grow: 1;
-}
-
 .sidebar {
   display: flex;
   flex-direction: column;
   padding: 1rem;
-
   border-right: 1px solid lightgray;
 }
 
 .sidebar > a {
   margin: 0.5rem 0;
 }
 
+#root {
+  padding-top: 2rem;
+  flex-grow: 1;
+}
+
 .page-container {
   display: flex;
   flex-direction: column;
-
-  padding: 0 1rem;
-}
-
-.align-center {
   align-items: center;
+  padding: 0 1rem;
 }
 
 .socials-container {

diff --git a/index.html b/index.html
@@ -6,19 +6,16 @@
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="css/styles.css" />
     <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />
+    <script src="src/main.js" type="module"></script>
 </head>
 
 <body>
-    <div id="container">
-        <nav id="main-nav" class="sidebar">
-            <a href="/" onclick="route(event)">Home</a>
-            <a href="#about" onclick="route(event)">About</a>
-            <a href="#lorem" onclick="route(event)">Lorem</a>
-        </nav>
-        <div id="root"></div>
-    </div>
-
-    <script type="module" src="src/router.js"></script>
+    <nav class="sidebar">
+        <a href="#/">Home</a>
+        <a href="#/about">About</a>
+        <a href="#/lorem">Lorem</a>
+    </nav>
+    <div id="root"></div>
 </body>
 
 </html>