Basic 정태인

index.css

@@ -1,29 +1,14 @@
-html {
-  font-size: clamp(14px, 1.2vw, 18px);
-}
-
-body {
-  margin: 0 auto;
-  width: 100%;
-}
-
-a {
-  display: inline-block;
-  text-decoration: none;
-}
-
-p {
-  margin: 0;
-}
-
-header {
+.header-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 0 auto;
+  padding: 9.5px 200px;
   max-width: 1920px;
-  width: calc(100% - clamp(100px, 20vw, 400px));
-  padding: 9.5px clamp(50px, 10vw, 200px);
+  width: calc(100% - 400px);
+  position: fixed;
+  top: 0;
+  background-color: white;
 }
 
 .logo {
@@ -33,23 +18,14 @@ header {
 
 .logo-icon {
   margin-right: 8.59px;
-  width: clamp(30px, 2vw, 40px);
-  height: clamp(30px, 2vw, 40px);
+  width: 40px;
+  height: 40px;
 }
 
-.logo-text {
-  font-size: clamp(16px, 1.5vw, 26px);
-  font-weight: 700;
-  font-family: 'ROKAF Sans';
-  line-height: 1.4;
-}
-
-button {
+.button {
   cursor: pointer;
   border: 0;
   outline: none;
-  color: #F3F4F6;
-  background-color: #3692FF;
 }
 
 button:hover {
@@ -61,20 +37,22 @@ button:active {
 }
 
 .login-button {
-  padding: clamp(8px, 1.2vw, 12px) clamp(16px, 2vw, 23px);
-  width: clamp(100px, 7vw, 128px);
-  height: clamp(40px, 3vw, 48px);
+  padding: 11px 43px;
   border-radius: 8px;
-  font-size: clamp(14px, 1.2vw, 16px);
+  font-size: 16px;
   font-weight: 600;
   line-height: 1.6;
 }
 
+.main-container {
+  padding-top: 70px;
+}
+
 .landing-section {
   display: flex;
   justify-content: center;
   align-items: end;
-  height: clamp(400px, 50vh, 540px);
+  height: 540px;
   background-color: #CFE5FF;
 }
 
@@ -87,40 +65,37 @@ button:active {
 .landing-message-container {
   display: flex;
   flex-direction: column;
-  width: clamp(280px, 20vw, 357px);
+  width: 357px;
   height: auto;
 }
 
 .section-title {
-  margin-bottom: clamp(24px, 2vw, 32px);
-  font-size: clamp(28px, 3vw, 40px);
+  margin-bottom: 32px;
+  font-size: 40px;
   font-weight: 700;
-  line-height: clamp(36px, 4vw, 56px);
-  color: #374151;
-}
-
-.explore-button-link {
-  margin-bottom: clamp(40px, 3vw, 60px);
+  line-height: 56px;
 }
 
 .explore-button {
-  padding: clamp(8px, 1.5vw, 12px) 0;
+  margin-bottom: 60px;
+  padding: 12px 0;
   width: 100%;
   border-radius: 40px;
-  font-size: clamp(16px, 2vw, 20px);
+  font-size: 20px;
   font-weight: 600;
   line-height: 1.6;
+  text-align: center;
 }
 
 .section-container {
-  margin: clamp(80px, 10vw, 138px) 0;
+  margin: 138px 0;
 }
 
 .section {
   display: flex;
   align-items: center;
   margin: 0 auto;
-  width: clamp(600px, 80vw, 988px);
+  width: 988px;
   border-radius: 12px;
   overflow: hidden;
   background-color: #FCFCFC;
@@ -132,36 +107,36 @@ button:active {
 
 .register-section img,
 .hot-item-section img {
-  width: clamp(400px, 50vw, 588px);
+  width: 588px;
 }
 
 .hot-item-message-container,
 .register-section .message-container {
-  margin-left: clamp(32px, 5vw, 64px);
+  margin-left: 64px;
 }
 
 .search-section .message-container {
-  margin-right: clamp(32px, 5vw, 64px);
+  margin-right: 64px;
   text-align: right;
 }
 
 .label {
   display: inline-block;
-  margin-bottom: clamp(8px, 1vw, 12px);
-  font-size: clamp(14px, 1.2vw, 18px);
+  margin-bottom: 12px;
+  font-size: 18px;
   font-weight: 700;
   line-height: 1.4;
-  color: #3692FF;
 }
 
 .section-message {
-  font-size: clamp(18px, 2vw, 24px);
+  font-size: 24px;
   font-weight: 500;
-  line-height: clamp(24px, 2.5vw, 32px);
+  line-height: 32px;
+  white-space: nowrap;
 }
 
 .bottom-landing-section {
-  padding-top: clamp(80px, 8vw, 138px);
+  padding-top: 138px;
   background-color: #FCFCFC;
 }
 
@@ -170,50 +145,46 @@ button:active {
 }
 
 .bottom-landing-section .section-title {
-  margin-bottom: clamp(40px, 3vw, 60px);
+  margin-bottom: 60px;
 }
 
-footer {
+.footer-nav {
   display: flex;
   justify-content: center;
-  padding-top: clamp(24px, 3vw, 32.5px);
-  height: clamp(120px, 15vh, 160px);
-  background-color: #111827;
+  height: 160px;
 }
 
 .footer-container {
   display: flex;
   justify-content: space-between;
+  margin: 0 auto;
+  padding: 32.5px 0;
   max-width: 1120px;
   width: 100%;
   height: fit-content;
 }
 
-.copy-right {
-  color: #9CA3AF;
-}
-
 .term {
   display: flex;
   gap: 30px;
-  font-size: clamp(14px, 1vw, 16px);
+  font-size: 16px;
   font-weight: 400;
   line-height: 1.4;
-  color: #E5E7EB;
 }
 
 .term a {
-  font-size: clamp(14px, 1vw, 16px);
+  font-size: 16px;
   font-weight: 400;
-  color: #E5E7EB;
 }
 
 .SNS-container {
   display: flex;
   gap: 12px;
+  margin: 0;
+  list-style: none;
 }
 
 .SNS-container img {
-  width: clamp(16px, 1.5vw, 20px);
-  height: clamp(16px, 1.5vw, 20px);
+  width: 20px;
+  height: 20px;
 }