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

fix: 폰트 내재화, 일부 마크업 변경

This commit is contained in:
이희원 2026-06-20 01:37:55 +09:00
parent 78a09f4890
commit 723932f4ad
10 changed files with 105 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/font/DMSerifDisplay/DMSerifDisplay-Italic-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
src/font/DMSerifDisplay/DMSerifDisplay-Italic-latin.woff2 Normal file
View File

Binary file not shown.

BIN
src/font/SUIT/SUIT-Variable.woff2 Normal file
View File

Binary file not shown.

5
src/index.html
View File

@ -269,6 +269,7 @@
<!-- 04. BODA INTRO -->
<section id="boda-intro" class="bodaIntro">
<div class="bodaIntro__content">
<h2 class="bodaIntro__title">BODA Lab Co., Ltd.</h2>
<p class="bodaIntro__desc">
accurately identifies customer needs to<br class="breakLine" />
@ -276,8 +277,10 @@
We are working on a project with talented<br class="breakLine" />
people with high technology.
</p>
<a href="#vision" class="scrollDown scrollDownSm" aria-label="아래로 스크롤"><img src="images/icon-scroll-down.svg" alt="" /></a>
</div>
<a href="#vision" class="scrollDown scrollDownSm" aria-label="아래로 스크롤"><img src="images/icon-scroll-down.svg" alt="" /></a>
</section>
<!-- 05. VISION -->

29
src/scss/base/_font.scss
View File

@ -1,2 +1,27 @@
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&display=swap");
@font-face {
font-family: "SUIT Variable";
src: url("/font/SUIT/SUIT-Variable.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* latin-ext */
@font-face {
font-family: "DM Serif Display";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/font/DMSerifDisplay/DMSerifDisplay-Italic-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "DM Serif Display";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/font/DMSerifDisplay/DMSerifDisplay-Italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

@ -15,7 +15,7 @@ html {
}
body {
font-family: $font-sans;
font-family: $기본글꼴;
background-color: $color-bg;
color: $color-white;
overflow-x: hidden;
@ -45,55 +45,3 @@ address {
section {
position: relative;
}
.sectionTitle {
font-family: $font-sans;
font-size: clamp(28px, 3vw, 40px);
font-weight: 600;
letter-spacing: 0.02em;
color: $color-white;
line-height: 1;
}
.sectionTitleDark {
color: $color-dark;
}
.scrollDown {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s;
&:hover {
opacity: 0.6;
}
img {
width: 100%;
height: 100%;
object-fit: unset;
}
}
.scrollDownSm {
position: relative;
bottom: auto;
left: auto;
transform: none;
margin-top: 40px;
}
@include mo {
.scrollDown {
width: 52px;
height: 52px;
bottom: 24px;
}
}

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

@ -7,7 +7,7 @@ $color-white: #ffffff;
$color-dark: #0d0d0d;
$color-gray: #999;
$font-sans: "SUIT Variable", "SUIT", sans-serif;
$기본글꼴: "SUIT Variable", "SUIT", sans-serif;
$font-serif: "DM Serif Display", serif;
$gnb-height: 80px;

55
src/scss/index.scss
View File

@ -1,3 +1,6 @@
@use "base/variable" as *;
@use "base/mixin" as *;
// Base
@use "base/font";
@use "base/reset";
@ -8,3 +11,55 @@
@use "page/about";
@use "page/projects";
@use "page/contact";
.sectionTitle {
font-family: $기본글꼴;
font-size: clamp(28px, 3vw, 40px);
font-weight: 600;
letter-spacing: 0.02em;
color: $color-white;
line-height: 1;
}
.sectionTitleDark {
color: $color-dark;
}
.scrollDown {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s;
&:hover {
opacity: 0.6;
}
img {
width: 100%;
height: 100%;
object-fit: unset;
}
}
.scrollDownSm {
position: relative;
bottom: auto;
left: auto;
transform: none;
margin-top: 40px;
}
@include mo {
.scrollDown {
width: 52px;
height: 52px;
bottom: 24px;
}
}

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

@ -172,33 +172,35 @@
// Boda Intro
.bodaIntro {
height: 100vh;
position: relative;
padding: 120px 0 210px;
background: $color-bg;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
.scrollDown {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
}
.bodaIntro__content {
display: flex;
flex-direction: column;
align-items: center;
}
text-align: center;
.bodaIntro__title {
font-size: clamp(20px, 2vw, 28px);
font-size: clamp(20px, 3vw, 56px);
line-height: 1.5;
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: 32px;
}
.bodaIntro__desc {
font-size: clamp(14px, 1.3vw, 18px);
font-weight: 300;
line-height: 1.8;
color: rgba($color-white, 0.8);
text-align: center;
color: rgba($color-white, 0.3);
}
// Vision

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

@ -97,7 +97,7 @@
.contact__greetingBrand {
display: block;
font-size: clamp(16px, 1.5vw, 22px);
font-family: $font-sans;
font-family: $기본글꼴;
font-style: normal;
font-weight: 900;
letter-spacing: 0.15em;
@ -188,7 +188,7 @@
color: $color-white;
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 400;
font-family: $font-sans;
font-family: $기본글꼴;
text-align: left;
transition: opacity 0.2s;
@ -244,7 +244,7 @@
background: rgba($color-white, 0.04);
border: 1px solid rgba($color-white, 0.1);
color: $color-white;
font-family: $font-sans;
font-family: $기본글꼴;
font-size: 14px;
font-weight: 300;
padding: 14px 16px;
@ -322,7 +322,7 @@
border: none;
border-radius: 100px;
color: $color-dark;
font-family: $font-sans;
font-family: $기본글꼴;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;