outsourcing
/
bodalab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 검수 about

This commit is contained in:
이희원 2026-06-28 18:02:19 +09:00
parent 7924041e84
commit 9b197626ab
10 changed files with 162 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/index.html
View File

@ -116,10 +116,7 @@
<div class="history__yearGroup isOpen"> <div class="history__yearGroup isOpen">
<button class="history__yearToggle" aria-expanded="true" aria-controls="history2025"> <button class="history__yearToggle" aria-expanded="true" aria-controls="history2025">
<span class="history__year">2025</span> <span class="history__year">2025</span>
<span class="icon" aria-hidden="true"></span> <div class="history__listItem">
</button>
<ul class="history__list" id="history2025">
<li class="history__listItem">
<div class="main"> <div class="main">
<h3 class="title">한국전자기술연구원 대쉬보드 구축</h3> <h3 class="title">한국전자기술연구원 대쉬보드 구축</h3>
<p class="sub"> <p class="sub">
@ -128,7 +125,10 @@
</p> </p>
</div> </div>
<span class="date">25.12 - 26.02</span> <span class="date">25.12 - 26.02</span>
</li> </div>
<span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2025">
<li class="history__listItem"> <li class="history__listItem">
<div class="main"> <div class="main">
<h3 class="title">현대차 판매시스템 구축</h3> <h3 class="title">현대차 판매시스템 구축</h3>
@ -219,63 +219,59 @@
<div class="history__yearGroup"> <div class="history__yearGroup">
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2024"> <button class="history__yearToggle" aria-expanded="false" aria-controls="history2024">
<span class="history__year">2024</span> <span class="history__year">2024</span>
<span class="icon" aria-hidden="true"></span> <div class="history__listItem">
</button>
<ul class="history__list" id="history2024" hidden>
<li class="history__listItem">
<div class="main"> <div class="main">
<h3 class="title">우리은행 로보어드바이저 구축 <span class="badge">Finance</span></h3> <h3 class="title">우리은행 로보어드바이저 구축 <span class="badge">Finance</span></h3>
<p class="sub">React, Typescript, Recoil</p> <p class="sub">React, Typescript, Recoil</p>
</div> </div>
<span class="date">24.11 - 25.07</span> <span class="date">24.11 - 25.07</span>
</li> </div>
</ul> <span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2024" hidden></ul>
</div> </div>
<div class="history__yearGroup"> <div class="history__yearGroup">
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2023"> <button class="history__yearToggle" aria-expanded="false" aria-controls="history2023">
<span class="history__year">2023</span> <span class="history__year">2023</span>
<span class="icon" aria-hidden="true"></span> <div class="history__listItem">
</button>
<ul class="history__list" id="history2023" hidden>
<li class="history__listItem">
<div class="main"> <div class="main">
<h3 class="title">신한은행 슈퍼SOL 운영 계약 <span class="badge">Finance</span></h3> <h3 class="title">신한은행 슈퍼SOL 운영 계약 <span class="badge">Finance</span></h3>
<p class="sub">Vue</p> <p class="sub">Vue</p>
</div> </div>
<span class="date">23.12</span> <span class="date">23.12</span>
</li> </div>
</ul> <span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2023" hidden></ul>
</div> </div>
<div class="history__yearGroup"> <div class="history__yearGroup">
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2022"> <button class="history__yearToggle" aria-expanded="false" aria-controls="history2022">
<span class="history__year">2022</span> <span class="history__year">2022</span>
<span class="icon" aria-hidden="true"></span> <div class="history__listItem">
</button>
<ul class="history__list" id="history2022" hidden>
<li class="history__listItem">
<div class="main"> <div class="main">
<h3 class="title">한화금융 서비스앱 플러스 리뉴얼 2차 계약 <span class="badge">Finance</span></h3> <h3 class="title">한화금융 서비스앱 플러스 리뉴얼 2차 계약 <span class="badge">Finance</span></h3>
</div> </div>
<span class="date">22.11</span> <span class="date">22.11</span>
</li> </div>
</ul> <span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2022" hidden></ul>
</div> </div>
<div class="history__yearGroup"> <div class="history__yearGroup">
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2021"> <button class="history__yearToggle" aria-expanded="false" aria-controls="history2021">
<span class="history__year">2021</span> <span class="history__year">2021</span>
<span class="icon" aria-hidden="true"></span> <div class="history__listItem">
</button>
<ul class="history__list" id="history2021" hidden>
<li class="history__listItem">
<div class="main"> <div class="main">
<h3 class="title">롯데 렌터카 차세대 구축 계약</h3> <h3 class="title">롯데 렌터카 차세대 구축 계약</h3>
</div> </div>
<span class="date">21.11</span> <span class="date">21.11</span>
</li> </div>
</ul> <span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2021" hidden></ul>
</div> </div>
</div> </div>
</section> </section>

4
src/scss/base/_reset.scss
View File

@ -16,8 +16,8 @@ html {
body { body {
font-family: $기본글꼴; font-family: $기본글꼴;
background-color: $color-bg; background-color: #0d0d0d;
color: $color-white; color: #ffffff;
overflow-x: hidden; overflow-x: hidden;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

11
src/scss/base/_variable.scss
View File

@ -1,16 +1,5 @@
$color-bg: #0d0d0d;
$color-bg-light: #e5e5e5;
$color-cyan: #00f0ff;
$color-purple: #8f00ff;
$color-blue: #7796ff;
$color-badge-blue: #0071f2;
$color-white: #ffffff;
$color-dark: #0d0d0d;
$color-gray: #999;
$기본글꼴: "SUIT Variable", "SUIT", sans-serif; $기본글꼴: "SUIT Variable", "SUIT", sans-serif;
$gnb-height: 60px;
$gnb-height-mo: 60px; $gnb-height-mo: 60px;
$bp-mo: 768px; $bp-mo: 768px;

8
src/scss/index.scss
View File

@ -15,15 +15,15 @@
.sectionTitle { .sectionTitle {
font-family: $기본글꼴; font-family: $기본글꼴;
font-size: clamp(28px, 3vw, 40px); font-size: clamp(28px, 3vw, 48px);
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: $color-white; color: #ffffff;
line-height: 1; line-height: 0.8;
} }
.sectionTitleDark { .sectionTitleDark {
color: $color-dark; color: #0d0d0d;
} }
.scrollDown { .scrollDown {

124
src/scss/page/_about.scss
View File

@ -5,7 +5,7 @@
.about { .about {
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
background: $color-bg; background: #0d0d0d;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -30,20 +30,17 @@
} }
.about__head { .about__head {
display: flex;
flex-direction: column;
gap: clamp(30px, 3.1vw, 60px);
.sectionTitle { .sectionTitle {
margin: 0; margin: 0 0 57px;
} }
} }
.about__desc { .about__desc {
margin: 0 0 70px;
font-size: clamp(13px, 1.1vw, 16px); font-size: clamp(13px, 1.1vw, 16px);
font-weight: 300; font-weight: 300;
line-height: 1.8; line-height: 150%;
color: $color-white; color: #ffffff;
opacity: 0.9; opacity: 0.9;
} }
@ -58,14 +55,14 @@
font-size: clamp(60px, 7.6vw, 146px); font-size: clamp(60px, 7.6vw, 146px);
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
color: $color-white; color: #ffffff;
} }
.about__quoteText { .about__quoteText {
font-size: clamp(22px, 2.4vw, 46px); font-size: clamp(22px, 2.4vw, 46px);
font-weight: 100; font-weight: 100;
line-height: 1.2; line-height: 1.2;
color: $color-white; color: #ffffff;
} }
.about__expertiseList { .about__expertiseList {
@ -84,7 +81,7 @@
.num { .num {
font-size: clamp(14px, 0.85vw, 16px); font-size: clamp(14px, 0.85vw, 16px);
font-weight: 800; font-weight: 800;
color: $color-blue; color: #7796ff;
} }
.name { .name {
@ -92,24 +89,20 @@
font-weight: 800; font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
line-height: 1.2; line-height: 1.2;
color: $color-white; color: #ffffff;
} }
.text { .text {
font-size: clamp(12px, 0.75vw, 14px); font-size: clamp(12px, 0.75vw, 14px);
font-weight: 300; font-weight: 300;
color: $color-white; color: #ffffff;
} }
} }
// History // History
// 좌측 사진은 Figma 디자인 기준 섹션 좌/상/하 끝까지 풀블리드, 텍스트만 일반 패딩을 따름
$history-photo-w: clamp(220px, 26vw, 500px);
$history-gap: clamp(40px, 6.25vw, 120px);
.history { .history {
position: relative; position: relative;
background: $color-bg-light; background: #fff;
padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px) clamp(60px, 6.25vw, 120px) 0; padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px) clamp(60px, 6.25vw, 120px) 0;
} }
@ -118,52 +111,65 @@ $history-gap: clamp(40px, 6.25vw, 120px);
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: $history-photo-w; width: clamp(220px, 34vw, 500px);
overflow: hidden;
background: $color-dark;
.img { .img {
position: sticky;
top: 0;
width: 100%; width: 100%;
height: 100%;
object-fit: cover; object-fit: cover;
} }
} }
.history__title { .history__title {
position: absolute; position: sticky;
top: clamp(60px, 6.25vw, 120px); top: 180px;
left: clamp(24px, 6.25vw, 120px); margin-left: clamp(24px, 6vw, 120px);
z-index: 1; z-index: 1;
color: $color-white; color: #ffffff;
} }
.history__timeline { .history__timeline {
margin-left: calc(#{$history-photo-w} + #{$history-gap}); margin-left: clamp(220px, 34vw, 500px);
} }
.history__yearGroup { .history__yearGroup {
border-top: 1px solid rgba($color-dark, 0.15); border-top: 1px solid #000;
&:last-child { &:last-child {
border-bottom: 1px solid rgba($color-dark, 0.15); border-bottom: 1px solid #000;
} }
} }
.history__yearToggle { .history__yearToggle {
position: relative;
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: space-between; gap: 24px;
width: 100%; width: 100%;
padding: clamp(16px, 1.8vw, 24px) 0; padding: 30px 100px 30px 0;
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
text-align: left;
.history__year {
flex-shrink: 0;
width: 80px;
}
.history__listItem {
flex: 1;
}
.icon { .icon {
position: relative; position: absolute;
top: 50%;
right: 0;
width: 28px; width: 28px;
height: 28px; height: 28px;
border: 1px solid $color-dark; transform: translateY(-50%);
border: 1px solid #0d0d0d;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
@ -175,7 +181,7 @@ $history-gap: clamp(40px, 6.25vw, 120px);
left: 50%; left: 50%;
width: 10px; width: 10px;
height: 1px; height: 1px;
background: $color-dark; background: #0d0d0d;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
@ -191,28 +197,30 @@ $history-gap: clamp(40px, 6.25vw, 120px);
} }
.history__year { .history__year {
font-size: clamp(28px, 2.5vw, 40px); font-size: clamp(24px, 2vw, 32px);
font-weight: 100; font-weight: 500;
color: $color-dark; color: #0d0d0d;
line-height: 1; line-height: 1;
} }
.history__list { .history__list {
margin-top: -14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px;
margin-left: 104px;
margin-right: 100px;
&[hidden] {
display: none;
}
} }
.history__listItem { .history__listItem {
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 24px; gap: 24px;
padding: clamp(12px, 1.2vw, 16px) 0;
border-top: 1px solid rgba($color-dark, 0.08);
&:first-child {
border-top: none;
}
.main { .main {
display: flex; display: flex;
@ -223,25 +231,25 @@ $history-gap: clamp(40px, 6.25vw, 120px);
.title { .title {
font-size: clamp(14px, 1vw, 16px); font-size: clamp(14px, 1vw, 16px);
font-weight: 400; font-weight: 400;
color: $color-dark; color: #0d0d0d;
} }
.badge { .badge {
display: inline-block; display: inline-block;
margin-left: 6px; vertical-align: top;
margin-left: 5px;
padding: 2px 8px; padding: 2px 8px;
font-size: 10px; font-size: 10px;
font-weight: 700; font-weight: 700;
color: $color-badge-blue; color: #0071f2;
border: 1px solid $color-badge-blue; border: 1px solid #0071f2;
border-radius: 4px; border-radius: 4px;
vertical-align: middle; vertical-align: middle;
} }
.sub { .sub {
font-size: clamp(11px, 0.8vw, 13px); font-size: 14px;
font-weight: 300; color: #7b7b7b;
color: rgba($color-dark, 0.55);
line-height: 1.6; line-height: 1.6;
} }
@ -249,7 +257,7 @@ $history-gap: clamp(40px, 6.25vw, 120px);
flex-shrink: 0; flex-shrink: 0;
font-size: clamp(12px, 0.85vw, 14px); font-size: clamp(12px, 0.85vw, 14px);
font-weight: 400; font-weight: 400;
color: rgba($color-dark, 0.65); color: rgba(13, 13, 13, 0.65);
white-space: nowrap; white-space: nowrap;
} }
} }
@ -283,7 +291,7 @@ $history-gap: clamp(40px, 6.25vw, 120px);
.history__title { .history__title {
position: static; position: static;
margin-bottom: 32px; margin-bottom: 32px;
color: $color-dark; color: #0d0d0d;
} }
.history__photo { .history__photo {
@ -294,6 +302,14 @@ $history-gap: clamp(40px, 6.25vw, 120px);
margin-left: 0; margin-left: 0;
} }
.history__yearToggle {
flex-wrap: wrap;
}
.history__list {
margin-left: 0;
}
.history__listItem { .history__listItem {
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;

58
src/scss/page/_contact.scss
View File

@ -4,10 +4,10 @@
// Contact // Contact
// 이 섹션만 Figma 디자인이 라이트 테마(흰 배경/검은 텍스트)임 — 다른 섹션과 색상 반전 // 이 섹션만 Figma 디자인이 라이트 테마(흰 배경/검은 텍스트)임 — 다른 섹션과 색상 반전
.contact { .contact {
background: $color-white; background: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-top: 1px solid rgba($color-dark, 0.08); border-top: 1px solid rgba(13, 13, 13, 0.08);
} }
.contact__inner { .contact__inner {
@ -22,7 +22,7 @@
font-size: clamp(28px, 3vw, 40px); font-size: clamp(28px, 3vw, 40px);
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: $color-dark; color: #0d0d0d;
line-height: 1; line-height: 1;
} }
@ -31,7 +31,7 @@
margin-bottom: 48px; margin-bottom: 48px;
font-size: 15px; font-size: 15px;
font-weight: 300; font-weight: 300;
color: rgba($color-dark, 0.6); color: rgba(13, 13, 13, 0.6);
} }
.contact__label { .contact__label {
@ -39,7 +39,7 @@
font-weight: 600; font-weight: 600;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
color: rgba($color-dark, 0.5); color: rgba(13, 13, 13, 0.5);
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -59,14 +59,14 @@
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: $color-blue; color: #7796ff;
} }
.contact__infoValue { .contact__infoValue {
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
line-height: 1.7; line-height: 1.7;
color: rgba($color-dark, 0.85); color: rgba(13, 13, 13, 0.85);
} }
.contact__infoLink { .contact__infoLink {
@ -83,11 +83,11 @@
max-width: 1200px; max-width: 1200px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
border-top: 1px solid rgba($color-dark, 0.08); border-top: 1px solid rgba(13, 13, 13, 0.08);
} }
.contactAccordion__item { .contactAccordion__item {
border-bottom: 1px solid rgba($color-dark, 0.08); border-bottom: 1px solid rgba(13, 13, 13, 0.08);
} }
.contactAccordion__header { .contactAccordion__header {
@ -98,9 +98,9 @@
padding: 28px 48px; padding: 28px 48px;
background: none; background: none;
border: none; border: none;
border-bottom: 1px solid rgba($color-dark, 0.08); border-bottom: 1px solid rgba(13, 13, 13, 0.08);
cursor: pointer; cursor: pointer;
color: $color-dark; color: #0d0d0d;
font-size: clamp(16px, 1.4vw, 20px); font-size: clamp(16px, 1.4vw, 20px);
font-weight: 400; font-weight: 400;
font-family: $기본글꼴; font-family: $기본글꼴;
@ -163,9 +163,9 @@
.contactForm__input, .contactForm__input,
.contactForm__textarea { .contactForm__textarea {
width: 100%; width: 100%;
background: $color-white; background: #ffffff;
border: 1px solid rgba($color-dark, 0.2); border: 1px solid rgba(13, 13, 13, 0.2);
color: $color-dark; color: #0d0d0d;
font-family: $기본글꼴; font-family: $기본글꼴;
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
@ -174,10 +174,10 @@
transition: border-color 0.2s; transition: border-color 0.2s;
&::placeholder { &::placeholder {
color: rgba($color-dark, 0.35); color: rgba(13, 13, 13, 0.35);
} }
&:focus { &:focus {
border-color: rgba($color-dark, 0.4); border-color: rgba(13, 13, 13, 0.4);
} }
} }
@ -198,7 +198,7 @@
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
font-weight: 300; font-weight: 300;
color: rgba($color-dark, 0.6); color: rgba(13, 13, 13, 0.6);
} }
.contactForm__checkboxInput { .contactForm__checkboxInput {
@ -206,8 +206,8 @@
} }
.contactForm__checkboxInput:checked + .contactForm__checkboxBox { .contactForm__checkboxInput:checked + .contactForm__checkboxBox {
background: $color-blue; background: #7796ff;
border-color: $color-blue; border-color: #7796ff;
} }
.contactForm__checkboxInput:checked + .contactForm__checkboxBox::after { .contactForm__checkboxInput:checked + .contactForm__checkboxBox::after {
@ -215,15 +215,15 @@
display: block; display: block;
width: 10px; width: 10px;
height: 6px; height: 6px;
border-left: 1.5px solid $color-white; border-left: 1.5px solid #ffffff;
border-bottom: 1.5px solid $color-white; border-bottom: 1.5px solid #ffffff;
transform: rotate(-45deg) translateY(-2px); transform: rotate(-45deg) translateY(-2px);
} }
.contactForm__checkboxBox { .contactForm__checkboxBox {
width: 18px; width: 18px;
height: 18px; height: 18px;
border: 1px solid rgba($color-dark, 0.3); border: 1px solid rgba(13, 13, 13, 0.3);
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
@ -241,10 +241,10 @@
.btnSend { .btnSend {
padding: 12px 48px; padding: 12px 48px;
background: $color-blue; background: #7796ff;
border: none; border: none;
border-radius: 100px; border-radius: 100px;
color: $color-white; color: #ffffff;
font-family: $기본글꼴; font-family: $기본글꼴;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
@ -270,18 +270,18 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 10px 20px; padding: 10px 20px;
border: 1px solid rgba($color-dark, 0.25); border: 1px solid rgba(13, 13, 13, 0.25);
border-radius: 100px; border-radius: 100px;
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
color: $color-dark; color: #0d0d0d;
transition: transition:
border-color 0.2s, border-color 0.2s,
color 0.2s; color 0.2s;
&:hover { &:hover {
border-color: $color-blue; border-color: #7796ff;
color: $color-blue; color: #7796ff;
} }
} }
@ -330,7 +330,7 @@
transition: color 0.2s; transition: color 0.2s;
&:hover { &:hover {
color: $color-dark; color: #0d0d0d;
} }
} }

21
src/scss/page/_gnb.scss
View File

@ -1,4 +1,3 @@
@use "../base/variable" as *;
@use "../base/mixin" as *; @use "../base/mixin" as *;
// GNB // GNB
@ -11,7 +10,7 @@
transition: background 0.4s; transition: background 0.4s;
&.isScrolled { &.isScrolled {
// background: rgba($color-bg, 0.92); // background: rgba(13, 13, 13, 0.92);
// backdrop-filter: blur(12px); // backdrop-filter: blur(12px);
} }
} }
@ -20,7 +19,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 80px clamp(24px, 5.2vw, 100px); padding: 80px clamp(24px, 5.2vw, 100px) 10px;
} }
.gnb__logo { .gnb__logo {
@ -54,16 +53,16 @@
font-size: clamp(13px, 0.85vw, 16px); font-size: clamp(13px, 0.85vw, 16px);
font-weight: 400; font-weight: 400;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-white; color: #ffffff;
transition: color 0.2s; transition: color 0.2s;
&:hover { &:hover {
color: $color-blue; color: #7796ff;
} }
} }
.gnb__navLink.isActive { .gnb__navLink.isActive {
color: $color-blue; color: #7796ff;
} }
.gnb__hamburger { .gnb__hamburger {
@ -83,7 +82,7 @@
display: block; display: block;
width: 100%; width: 100%;
height: 1px; height: 1px;
background: $color-white; background: #ffffff;
transition: transition:
transform 0.3s, transform 0.3s,
opacity 0.3s; opacity 0.3s;
@ -104,7 +103,7 @@
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 200; z-index: 200;
background: $color-bg; background: #0d0d0d;
padding: 32px 32px 40px; padding: 32px 32px 40px;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@ -134,7 +133,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
background: $color-white; background: #ffffff;
&:nth-child(1) { &:nth-child(1) {
transform: rotate(45deg); transform: rotate(45deg);
@ -157,9 +156,9 @@
font-size: clamp(28px, 8vw, 36px); font-size: clamp(28px, 8vw, 36px);
font-weight: 400; font-weight: 400;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: $color-white; color: #ffffff;
} }
.gnb__mobileNavLink.isActive { .gnb__mobileNavLink.isActive {
color: $color-blue; color: #7796ff;
} }

13
src/scss/page/_intro.scss
View File

@ -1,4 +1,3 @@
@use "../base/variable" as *;
@use "../base/mixin" as *; @use "../base/mixin" as *;
// Intro // Intro
@ -8,7 +7,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
background: $color-bg; background: #0d0d0d;
} }
.intro__bg { .intro__bg {
@ -29,9 +28,9 @@
font-size: clamp(18px, 2.6vw, 50px); font-size: clamp(18px, 2.6vw, 50px);
font-weight: 100; font-weight: 100;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: $color-white; color: #ffffff;
margin-bottom: clamp(16px, 2vw, 32px); margin-bottom: clamp(16px, 2vw, 32px);
line-height: 1.2; line-height: 0.8;
} }
.intro__title { .intro__title {
@ -39,14 +38,14 @@
font-weight: 700; font-weight: 700;
letter-spacing: 0.01em; letter-spacing: 0.01em;
text-transform: uppercase; text-transform: uppercase;
color: $color-white; color: #ffffff;
line-height: 1.2; line-height: 0.8;
} }
@include mo { @include mo {
.gnb__inner { .gnb__inner {
padding: 0 20px; padding: 0 20px;
height: $gnb-height-mo; height: 60px;
} }
.gnb__logoImg { .gnb__logoImg {

21
src/scss/page/_project.scss
View File

@ -1,8 +1,7 @@
@use "../base/variable" as *;
@use "../base/mixin" as *; @use "../base/mixin" as *;
.project { .project {
background: $color-bg; background: #0d0d0d;
padding: 100px 48px; padding: 100px 48px;
} }
@ -59,14 +58,14 @@
.project__name { .project__name {
font-size: clamp(14px, 1.1vw, 16px); font-size: clamp(14px, 1.1vw, 16px);
font-weight: 500; font-weight: 500;
color: $color-white; color: #ffffff;
line-height: 1.4; line-height: 1.4;
} }
.project__company { .project__company {
font-size: 13px; font-size: 13px;
font-weight: 300; font-weight: 300;
color: rgba($color-white, 0.5); color: rgba(255, 255, 255, 0.5);
} }
.project__stack { .project__stack {
@ -79,10 +78,10 @@
.project__tag { .project__tag {
display: inline-block; display: inline-block;
padding: 3px 10px; padding: 3px 10px;
border: 1px solid rgba($color-white, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
font-size: 11px; font-size: 11px;
font-weight: 300; font-weight: 300;
color: rgba($color-white, 0.55); color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.03em; letter-spacing: 0.03em;
} }
@ -98,21 +97,21 @@
justify-content: center; justify-content: center;
gap: 6px; gap: 6px;
padding: 14px 40px; padding: 14px 40px;
border: 1px solid rgba($color-white, 0.4); border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 100px; border-radius: 100px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: $color-white; color: #ffffff;
transition: transition:
background 0.3s, background 0.3s,
border-color 0.3s, border-color 0.3s,
color 0.3s; color 0.3s;
&:hover { &:hover {
background: $color-white; background: #ffffff;
color: $color-dark; color: #0d0d0d;
border-color: $color-white; border-color: #ffffff;
} }
} }

13
src/scss/page/_vision.scss
View File

@ -1,9 +1,8 @@
@use "../base/variable" as *;
@use "../base/mixin" as *; @use "../base/mixin" as *;
// Vision // Vision
.vision { .vision {
background: $color-bg; background: #0d0d0d;
padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px); padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
} }
@ -28,7 +27,7 @@
font-size: clamp(13px, 1.1vw, 16px); font-size: clamp(13px, 1.1vw, 16px);
font-weight: 300; font-weight: 300;
line-height: 1.8; line-height: 1.8;
color: $color-white; color: #ffffff;
opacity: 0.9; opacity: 0.9;
} }
@ -43,14 +42,14 @@
font-size: clamp(40px, 4.2vw, 80px); font-size: clamp(40px, 4.2vw, 80px);
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
color: $color-white; color: #ffffff;
} }
.text { .text {
font-size: clamp(18px, 1.9vw, 32px); font-size: clamp(18px, 1.9vw, 32px);
font-weight: 300; font-weight: 300;
line-height: 1.4; line-height: 1.4;
color: $color-white; color: #ffffff;
} }
} }
@ -71,14 +70,14 @@
font-size: clamp(28px, 3.1vw, 60px); font-size: clamp(28px, 3.1vw, 60px);
font-weight: 800; font-weight: 800;
letter-spacing: 0.01em; letter-spacing: 0.01em;
color: $color-white; color: #ffffff;
line-height: 1; line-height: 1;
} }
.desc { .desc {
font-size: clamp(12px, 0.8vw, 14px); font-size: clamp(12px, 0.8vw, 14px);
font-weight: 300; font-weight: 300;
color: rgba($color-white, 0.75); color: rgba(255, 255, 255, 0.75);
} }
} }