diff --git a/src/images/logo.svg b/src/images/logo.svg index 2843814..bd18adc 100644 --- a/src/images/logo.svg +++ b/src/images/logo.svg @@ -1,6 +1,17 @@ - - - - - BODA LAB + + + + + + + + + + + + + + + + diff --git a/src/index.html b/src/index.html index ac998f8..15d64bf 100644 --- a/src/index.html +++ b/src/index.html @@ -1,433 +1,665 @@ - + - - - - BODA LAB - Creative Development Company - - - - - - - - -
-
- -
- - -
+ -
- - -
- -
-

Creative Development Company

-

THE BODA LAB

-
- -
- - -
-
-
-

ABOUT US

-

- The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한
- 다양한 기술적 노하우로 완성된 경험을 제공합니다.
- 우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에
- 강한 영향력을 전달합니다. -

+
+ +
+ -
- 스케치하는 손 -

Creative Development Company BODA.Lab

+
+

Creative Development Company

+

THE BODA LAB

-
-
- - -
-
-

HISTORY

-
-
- 2024 -
-
    -
  • 12.01신한은행 슈퍼소울 운영 계약
    • -
  • 09.01한화금융통합 서비스 구축 계약
    • -
  • 05.30신한은행 슈퍼소울 구축 계약
    • -
  • 05.01롯데 렌터카 오토리스 구축 계약
    • -
-
-
- 2023 -
-
    -
  • 12.01신한은행 슈퍼소울 운영 계약
    • -
  • 11.01한화금융 라이프 플러스 아카데미 구축 계약
    • -
  • 10.01대교 차세대 구축 계약
    • -
  • 09.01한화금융통합 서비스 구축 계약
    • -
  • 05.30신한은행 슈퍼소울 구축 계약
    • -
  • 05.01롯데 렌터카 오토리스 구축 계약
    • -
-
-
- 2022 -
-
    -
  • 11.01한화금융 서비스앱 플러스 리뉴얼 2차 계약
    • -
  • 09.01한화금융 서비스앱 플러스 리뉴얼 1차 계약
    • -
  • 08.01밀레 쇼핑몰 리뉴얼 구축 계약
    • -
  • 07.01오뚜기 쇼핑몰 리뉴얼 구축 계약
    • -
  • 05.01캐나다구스 코리아 쇼핑몰 구축 계약
    • -
-
-
- 2021 -
-
    -
  • 11.22롯데 렌터카 차세대 구축 계약
    • -
  • 11.01LSN MALL 구축 계약
    • -
  • 7.29(주)보다랩 설립
    • -
  • 5.15현대홈쇼핑 리뉴얼 구축 계약
    • -
  • 01.11KONA I 헬스케어 구축 계약
    • -
  • 01.11유아이팩토리 설립
    • -
-
-
-
-
-
- - - -
-
-
- - -
-
-

BODA Lab Co., Ltd.

-

- accurately identifies customer needs to
- achieve the best completeness and satisfaction.
- We are working on a project with talented
- people with high technology. -

- -
-
+
- -
-
-
-
- Perspective -

클라이언트의 고유한 가치를 발견하고
차별화된 디지털 경험을 설계합니다.

+ +
+
+
+

ABOUT US

+

+ The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한
+ 다양한 기술적 노하우로 완성된 경험을 제공합니다.
+ 우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에 강한 영향력을 전달합니다. +

-
- Uniqueness +
+ 스케치하는 손
+
+
+ Creative Development Company BODA.Lab + Creative Development Company BODA.Lab + Creative Development Company BODA.Lab + Creative Development Company BODA.Lab +
+
-
-
- Expertise -
-
- Expertise -

10년 이상의 기술 노하우를 기반으로
최적의 솔루션을 제공합니다.

-
-
-
-
- Satisfaction -

고객의 만족을 최우선 가치로 삼아
완성도 높은 결과물을 만듭니다.

-
-
- Satisfaction -
-
-
-
+
- -
-
-

PROJECT

-
-
-
신한유니버설앱 구축
-
-

신한유니버설앱 구축

2023.12
-

신한은행

-
vuescsstypescriptnuxt.js
+ +
+
+

HISTORY

+
+
+ 2024 +
+
    +
  • + 12.01 + 신한은행 슈퍼소울 운영 계약 +
    • +
  • + 09.01 + 한화금융통합 서비스 구축 계약 +
    • +
  • + 05.30 + 신한은행 슈퍼소울 구축 계약 +
    • +
  • + 05.01 + 롯데 렌터카 오토리스 구축 계약 +
    • +
-
-
-
SK그룹 공식앱 내부 모바일
-
-

SK그룹 공식앱 내부 모바일

2023.12
-

SK그룹

-
vuehtml5css3
+
+ 2023 +
+
    +
  • + 12.01 + 신한은행 슈퍼소울 운영 계약 +
    • +
  • + 11.01 + 한화금융 라이프 플러스 아카데미 구축 계약 +
    • +
  • + 10.01 + 대교 차세대 구축 계약 +
    • +
  • + 09.01 + 한화금융통합 서비스 구축 계약 +
    • +
  • + 05.30 + 신한은행 슈퍼소울 구축 계약 +
    • +
  • + 05.01 + 롯데 렌터카 오토리스 구축 계약 +
    • +
-
-
-
PNS네트웍스 디지털 플랫폼 구축
-
-

PNS네트웍스 디지털 플랫폼 구축

2023.04
-

PNS 네트웍스

-
reactscsstypescript
+
+ 2022 +
+
    +
  • + 11.01 + 한화금융 서비스앱 플러스 리뉴얼 2차 계약 +
    • +
  • + 09.01 + 한화금융 서비스앱 플러스 리뉴얼 1차 계약 +
    • +
  • + 08.01 + 밀레 쇼핑몰 리뉴얼 구축 계약 +
    • +
  • + 07.01 + 오뚜기 쇼핑몰 리뉴얼 구축 계약 +
    • +
  • + 05.01 + 캐나다구스 코리아 쇼핑몰 구축 계약 +
    • +
-
-
-
롯데렌터카 차세대
-
-

롯데렌터카 차세대

2022.05
-

롯데

-
vuecss3
-
-
-
-
오뚜기 쇼핑몰 구축
-
-

오뚜기 쇼핑몰 구축

2022.07
-

오뚜기

-
vuehtml5css3typescript
-
-
-
-
캐나다구스 구축
-
-

캐나다구스 구축

2022.05
-

캐나다구스 코리아

-
html5css3typescript
-
-
-
-
한옥홈페이지 서버 이관
-
-

한옥홈페이지 서버 이관

2022.11
-

더한옥

-
vuehtml5css3typescriptaws
-
-
-
-
그린카 차세대
-
-

그린카 차세대

2022.11
-

그린카

-
html5css3typescriptaosios
-
-
-
-
-
-

프로스펙스 구축

2021.01
-

(주)LS네트웍스

-
reactscsstypescript
-
-
-
-
-
-

중소기업창업

2021.11
-

중소벤처기업부

-
html5css3typescript
-
-
-
-
-
-

한화 GAsk 구축 프로젝트

2021.11
-

한화

-
html5css3typescriptjava
-
-
-
-
-
-

(주)국민은행_KB국민은행
리브 Reboot One 구축, 프론트개발

2021.10
-

국민은행

-
vuehtml5css3typescript
-
-
-
-
-
-

코나아이 PC

2021.01
-

코나아이

-
html5css3
-
-
-
-
- + VIEW MORE -
-
-
- - -
-
-

EXPERTISE

-

The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하며,
거쳐간 모든 곳에서 지속적인 성장이 이루어질 수 있도록 함께합니다.

-
    -
  • - 01 -

    UX Consulting

    -

    UX 컨설팅

    -
    • -
  • - 02 -

    Plarform Building

    -

    플랫폼 구축

    -
    • -
  • - 03 -

    Mobile App & Web

    -

    앱 & 웹 개발

    -
    • -
  • - 04 -

    Service Management

    -

    서비스 운영

    -
    • -
-
-
- - -
-
-
-

Welcome!
BODA LAB

-
-

Head Office

-
-
-
Address
-
서울특별시 금천구 가산디지털2로 169-16,
907호 (가산하우스디퍼스타)
-
-
-
e-mail
-
bodalab@bodalab.com
-
-
-
tel
-
010-1234-5678
-
-
-
fax
-
010-1234-5678
-
-
-
-
-
-
-
-
- -
-
- -
-
-
- - -
-
- - -
- -
- -
-
- -
-
-
-
- - -
- - -
+
+
+ + + +
+
+
- - + -
+ +
+
+
+
+ Perspective +

+ 클라이언트의 고유한 가치를 발견하고 +
+ 차별화된 디지털 경험을 설계합니다. +

+
+
+ Uniqueness +
+
+
+
+ Expertise +
+
+ Expertise +

+ 10년 이상의 기술 노하우를 기반으로 +
+ 최적의 솔루션을 제공합니다. +

+
+
+
+
+ Satisfaction +

+ 고객의 만족을 최우선 가치로 삼아 +
+ 완성도 높은 결과물을 만듭니다. +

+
+
+ Satisfaction +
+
+
+
- + +
+
+

PROJECT

+
+
+
+ 신한유니버설앱 구축 +
+
+
+

신한유니버설앱 구축

+ 2023.12 +
+

신한은행

+
+ vue + scss + typescript + nuxt.js +
+
+
+
+
+ SK그룹 공식앱 내부 모바일 +
+
+
+

SK그룹 공식앱 내부 모바일

+ 2023.12 +
+

SK그룹

+
+ vue + html5 + css3 +
+
+
+
+
+ PNS네트웍스 디지털 플랫폼 구축 +
+
+
+

PNS네트웍스 디지털 플랫폼 구축

+ 2023.04 +
+

PNS 네트웍스

+
+ react + scss + typescript +
+
+
+
+
+ 롯데렌터카 차세대 +
+
+
+

롯데렌터카 차세대

+ 2022.05 +
+

롯데

+
+ vue + css3 +
+
+
+
+
+ 오뚜기 쇼핑몰 구축 +
+
+
+

오뚜기 쇼핑몰 구축

+ 2022.07 +
+

오뚜기

+
+ vue + html5 + css3 + typescript +
+
+
+
+
+ 캐나다구스 구축 +
+
+
+

캐나다구스 구축

+ 2022.05 +
+

캐나다구스 코리아

+
+ html5 + css3 + typescript +
+
+
+
+
+ 한옥홈페이지 서버 이관 +
+
+
+

한옥홈페이지 서버 이관

+ 2022.11 +
+

더한옥

+
+ vue + html5 + css3 + typescript + aws +
+
+
+
+
+ 그린카 차세대 +
+
+
+

그린카 차세대

+ 2022.11 +
+

그린카

+
+ html5 + css3 + typescript + aos + ios +
+
+
+
+
+
+
+

프로스펙스 구축

+ 2021.01 +
+

(주)LS네트웍스

+
+ react + scss + typescript +
+
+
+
+
+
+
+

중소기업창업

+ 2021.11 +
+

중소벤처기업부

+
+ html5 + css3 + typescript +
+
+
+
+
+
+
+

한화 GAsk 구축 프로젝트

+ 2021.11 +
+

한화

+
+ html5 + css3 + typescript + java +
+
+
+
+
+
+
+

+ (주)국민은행_KB국민은행 +
+ 리브 Reboot One 구축, 프론트개발 +

+ 2021.10 +
+

국민은행

+
+ vue + html5 + css3 + typescript +
+
+
+
+
+
+
+

코나아이 PC

+ 2021.01 +
+

코나아이

+
+ html5 + css3 +
+
+
+
+
+ + VIEW MORE +
+
+
+ + +
+
+

EXPERTISE

+

+ The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하며, +
+ 거쳐간 모든 곳에서 지속적인 성장이 이루어질 수 있도록 함께합니다. +

+ +
+
+ + +
+
+
+

+ Welcome! +
+ BODA LAB +

+
+

Head Office

+
+
+
Address
+
+ 서울특별시 금천구 가산디지털2로 169-16, +
+ 907호 (가산하우스디퍼스타) +
+
+
+
e-mail
+
+ bodalab@bodalab.com +
+
+
+
tel
+
010-1234-5678
+
+
+
fax
+
010-1234-5678
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+ + +
+
+ + +
+ +
+ +
+
+ +
+
+
+
+ + +
+ + +
+
+ + +
+ + diff --git a/src/js/main.js b/src/js/main.js index 2a62cbb..217fa9d 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,66 +1,64 @@ -import $ from 'jquery' +import $ from "jquery"; $(function () { - - const $gnb = $('#gnb'); - const $hamburger = $('.gnb__hamburger'); - const $mobileNav = $('.gnb__mobileNav'); - const $sections = $('section[id]'); - const $navLinks = $('.gnb__navItem'); + const $gnb = $("#gnb"); + const $hamburger = $(".gnb__hamburger"); + const $mobileNav = $(".gnb__mobileNav"); + const $sections = $("section[id]"); + const $navLinks = $(".gnb__navItem"); // GNB 스크롤 배경 - $(window).on('scroll.gnb', { passive: true }, function () { - $gnb.toggleClass('is-scrolled', $(this).scrollTop() > 40); + $(window).on("scroll.gnb", { passive: true }, function () { + $gnb.toggleClass("is-scrolled", $(this).scrollTop() > 40); updateActiveNav(); }); // 햄버거 메뉴 - $hamburger.on('click', function () { - const isOpen = $hamburger.toggleClass('is-open').hasClass('is-open'); - $hamburger.attr('aria-expanded', isOpen); - $mobileNav.toggleClass('is-open', isOpen); + $hamburger.on("click", function () { + const isOpen = $hamburger.toggleClass("is-open").hasClass("is-open"); + $hamburger.attr("aria-expanded", isOpen); + $mobileNav.toggleClass("is-open", isOpen); }); // 모바일 메뉴 링크 클릭 시 닫기 - $('.gnb__mobileNavLink').on('click', function () { - $hamburger.removeClass('is-open').attr('aria-expanded', false); - $mobileNav.removeClass('is-open'); + $(".gnb__mobileNavLink").on("click", function () { + $hamburger.removeClass("is-open").attr("aria-expanded", false); + $mobileNav.removeClass("is-open"); }); // 현재 섹션에 따라 GNB 활성화 function updateActiveNav() { - let current = ''; + let current = ""; const scrollY = $(window).scrollTop() + $(window).height() / 3; $sections.each(function () { if ($(this).offset().top <= scrollY) { - current = $(this).attr('id'); + current = $(this).attr("id"); } }); $navLinks.each(function () { - const href = $(this).find('a').attr('href').replace('#', ''); - $(this).toggleClass('is-active', href === current); + const href = $(this).find("a").attr("href").replace("#", ""); + $(this).toggleClass("is-active", href === current); }); } // Contact 아코디언 - $('.contactAccordion__header').on('click', function () { - const $item = $(this).closest('.contactAccordion__item'); - const $body = $('#' + $(this).attr('aria-controls')); - const isOpen = $item.hasClass('is-open'); + $(".contactAccordion__header").on("click", function () { + const $item = $(this).closest(".contactAccordion__item"); + const $body = $("#" + $(this).attr("aria-controls")); + const isOpen = $item.hasClass("is-open"); - $item.toggleClass('is-open', !isOpen); - $(this).attr('aria-expanded', !isOpen); + $item.toggleClass("is-open", !isOpen); + $(this).attr("aria-expanded", !isOpen); if (isOpen) { - $body.attr('hidden', ''); + $body.attr("hidden", ""); } else { - $body.removeAttr('hidden'); + $body.removeAttr("hidden"); } }); // 초기 실행 updateActiveNav(); - }); diff --git a/src/scss/base/_font.scss b/src/scss/base/_font.scss index 6496053..0fe511f 100644 --- a/src/scss/base/_font.scss +++ b/src/scss/base/_font.scss @@ -1,2 +1,2 @@ -@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'); +@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"); diff --git a/src/scss/base/_mixin.scss b/src/scss/base/_mixin.scss index c2edc09..337c0f8 100644 --- a/src/scss/base/_mixin.scss +++ b/src/scss/base/_mixin.scss @@ -1,4 +1,4 @@ -@use 'variable' as *; +@use "variable" as *; @mixin mo { @media (max-width: #{$bp-mo}) { diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss index be11da3..77eaf3a 100644 --- a/src/scss/base/_reset.scss +++ b/src/scss/base/_reset.scss @@ -1,7 +1,9 @@ -@use 'variable' as *; -@use 'mixin' as *; +@use "variable" as *; +@use "mixin" as *; -*, *::before, *::after { +*, +*::before, +*::after { box-sizing: border-box; margin: 0; padding: 0; @@ -27,18 +29,22 @@ img { object-fit: cover; } -ul, ol { list-style: none; } +ul, +ol { + list-style: none; +} a { color: inherit; text-decoration: none; } -address { font-style: normal; } +address { + font-style: normal; +} section { position: relative; - width: 100%; } .sectionTitle { @@ -66,7 +72,9 @@ section { justify-content: center; transition: opacity 0.3s; - &:hover { opacity: 0.6; } + &:hover { + opacity: 0.6; + } img { width: 100%; diff --git a/src/scss/base/_variable.scss b/src/scss/base/_variable.scss index 4d2cca9..0f91ad5 100644 --- a/src/scss/base/_variable.scss +++ b/src/scss/base/_variable.scss @@ -7,8 +7,8 @@ $color-white: #ffffff; $color-dark: #0d0d0d; $color-gray: #999; -$font-sans: 'SUIT Variable', 'SUIT', sans-serif; -$font-serif: 'DM Serif Display', serif; +$font-sans: "SUIT Variable", "SUIT", sans-serif; +$font-serif: "DM Serif Display", serif; $gnb-height: 80px; $gnb-height-mo: 60px; diff --git a/src/scss/index.scss b/src/scss/index.scss index f030099..103802a 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,9 +1,10 @@ // Base -@use 'base/font'; -@use 'base/reset'; +@use "base/font"; +@use "base/reset"; // Pages -@use 'page/home'; -@use 'page/about'; -@use 'page/projects'; -@use 'page/contact'; +@use "page/gnb"; +@use "page/intro"; +@use "page/about"; +@use "page/projects"; +@use "page/contact"; diff --git a/src/scss/page/_about.scss b/src/scss/page/_about.scss index 1e90ef9..08a4e62 100644 --- a/src/scss/page/_about.scss +++ b/src/scss/page/_about.scss @@ -1,41 +1,40 @@ -@use '../base/variable' as *; -@use '../base/mixin' as *; +@use "../base/variable" as *; +@use "../base/mixin" as *; // About .about { - height: 100vh; + height: 956px; background: $color-bg; - display: flex; align-items: stretch; } .about__inner { - display: flex; - width: 100%; + position: relative; height: 100%; } .about__text { - display: flex; - flex-direction: column; - justify-content: center; - width: 45%; - padding: $gnb-height 48px 60px; - gap: 80px; -} + padding: 120px 16.7% 60px; -.about__desc { - font-size: clamp(13px, 1.1vw, 16px); - font-weight: 300; - line-height: 1.8; - color: $color-white; - opacity: 0.9; + .sectionTitle { + margin: 0 0 70px; + } + + .desc { + padding: 0 0 0 80px; + font-size: clamp(13px, 1.1vw, 16px); + font-weight: 300; + line-height: 1.8; + color: $color-white; + opacity: 0.9; + } } .about__image { - position: relative; - width: 55%; - overflow: hidden; + position: absolute; + top: 229px; + right: 0; + width: 42%; } .about__imageThumb { @@ -47,17 +46,35 @@ .about__caption { position: absolute; - bottom: 0; + bottom: 120px; left: 0; right: 0; - padding: 20px 24px; + padding: 0; + background: linear-gradient(to top, rgba($color-bg, 0.7) 0%, transparent 100%); + overflow: hidden; +} + +.about__captionTrack { + display: flex; + width: max-content; + animation: marquee 18s linear infinite; +} + +.about__captionText { font-size: clamp(18px, 2.5vw, 36px); font-weight: 400; color: $color-white; - background: linear-gradient(to top, rgba($color-bg, 0.7) 0%, transparent 100%); white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + padding-right: 80px; +} + +@keyframes marquee { + from { + transform: translateX(0); + } + to { + transform: translateX(-25%); + } } // History @@ -266,7 +283,9 @@ flex-direction: column; } - .about__inner { flex-direction: column; } + .about__inner { + flex-direction: column; + } .about__text { width: 100%; @@ -285,29 +304,48 @@ padding: 16px; } - .breakLine { display: none; } + .breakLine { + display: none; + } - .history__top { padding: 60px 24px 40px; } + .history__top { + padding: 60px 24px 40px; + } - .history__top .sectionTitleDark { margin-bottom: 32px; } + .history__top .sectionTitleDark { + margin-bottom: 32px; + } .history__timeline { grid-template-columns: 1fr 1fr; gap: 40px 20px; } - .history__bottom { padding: 0 24px 60px; } + .history__bottom { + padding: 0 24px 60px; + } .history__images { height: 260px; margin-top: -40px; } - .history__img1 { width: 120px; height: 80px; } + .history__img1 { + width: 120px; + height: 80px; + } - .history__img2 { width: 180px; height: 200px; left: 50%; } + .history__img2 { + width: 180px; + height: 200px; + left: 50%; + } - .history__img3 { width: 130px; height: 90px; bottom: 20px; } + .history__img3 { + width: 130px; + height: 90px; + bottom: 20px; + } .bodaIntro { min-height: 100vh; diff --git a/src/scss/page/_contact.scss b/src/scss/page/_contact.scss index efb6e77..ced8684 100644 --- a/src/scss/page/_contact.scss +++ b/src/scss/page/_contact.scss @@ -1,5 +1,5 @@ -@use '../base/variable' as *; -@use '../base/mixin' as *; +@use "../base/variable" as *; +@use "../base/mixin" as *; // Expertise .expertise { @@ -32,7 +32,9 @@ padding: 40px 32px 40px 0; border-right: 1px solid rgba($color-white, 0.12); - &:last-child { border-right: none; } + &:last-child { + border-right: none; + } } .expertise__num { @@ -143,7 +145,9 @@ color: inherit; transition: opacity 0.2s; - &:hover { opacity: 0.7; } + &:hover { + opacity: 0.7; + } } .contact__right { @@ -158,7 +162,7 @@ .contact__map { width: 100%; aspect-ratio: 4 / 3; - background: #1a1a1a url('../../images/map.svg') center / cover no-repeat; + background: #1a1a1a url("../../images/map.svg") center / cover no-repeat; border: 1px solid rgba($color-white, 0.1); overflow: hidden; } @@ -188,7 +192,9 @@ text-align: left; transition: opacity 0.2s; - &:hover { opacity: 0.7; } + &:hover { + opacity: 0.7; + } } .contactAccordion__icon { @@ -208,7 +214,9 @@ max-height: 0; transition: max-height 0.4s ease; - &:not([hidden]) { max-height: 800px; } + &:not([hidden]) { + max-height: 800px; + } &[hidden] { display: block !important; @@ -243,8 +251,12 @@ outline: none; transition: border-color 0.2s; - &::placeholder { color: rgba($color-white, 0.35); } - &:focus { border-color: rgba($color-white, 0.3); } + &::placeholder { + color: rgba($color-white, 0.35); + } + &:focus { + border-color: rgba($color-white, 0.3); + } } .contactForm__textarea { @@ -276,7 +288,7 @@ } .contactForm__checkboxInput:checked + .contactForm__checkboxBox::after { - content: ''; + content: ""; display: block; width: 10px; height: 6px; @@ -293,7 +305,9 @@ display: flex; align-items: center; justify-content: center; - transition: background 0.2s, border-color 0.2s; + transition: + background 0.2s, + border-color 0.2s; } .contactForm__submit { @@ -315,7 +329,9 @@ cursor: pointer; transition: opacity 0.2s; - &:hover { opacity: 0.8; } + &:hover { + opacity: 0.8; + } } // 채용 태그 @@ -336,7 +352,9 @@ font-size: 14px; font-weight: 300; color: $color-white; - transition: border-color 0.2s, color 0.2s; + transition: + border-color 0.2s, + color 0.2s; &:hover { border-color: $color-cyan; @@ -383,7 +401,9 @@ color: rgba($color-white, 0.5); transition: color 0.2s; - &:hover { color: $color-white; } + &:hover { + color: $color-white; + } } .footer__copy { @@ -394,25 +414,35 @@ } @include mo { - .expertise { padding: 60px 24px; } + .expertise { + padding: 60px 24px; + } .expertise__desc { margin-bottom: 40px; font-size: 14px; } - .expertise__list { grid-template-columns: 1fr 1fr; } + .expertise__list { + grid-template-columns: 1fr 1fr; + } .expertise__item { padding: 28px 20px 28px 0; - &:last-child { border-right: 1px solid rgba($color-white, 0.12); } + &:last-child { + border-right: 1px solid rgba($color-white, 0.12); + } &:nth-child(2), - &:nth-child(4) { border-right: none; } + &:nth-child(4) { + border-right: none; + } &:nth-child(3), - &:nth-child(4) { border-top: 1px solid rgba($color-white, 0.12); } + &:nth-child(4) { + border-top: 1px solid rgba($color-white, 0.12); + } } .contact__inner { @@ -431,15 +461,25 @@ padding: 0 24px 60px; } - .contactAccordion__header { padding: 22px 24px; } + .contactAccordion__header { + padding: 22px 24px; + } - .contactForm { padding: 8px 24px 40px; } + .contactForm { + padding: 8px 24px 40px; + } - .contactForm__row { grid-template-columns: 1fr; } + .contactForm__row { + grid-template-columns: 1fr; + } - .careerTags { padding: 8px 24px 40px; } + .careerTags { + padding: 8px 24px 40px; + } - .footer { padding: 24px 20px; } + .footer { + padding: 24px 20px; + } .footer__inner { flex-direction: column; @@ -447,5 +487,7 @@ gap: 20px; } - .footer__contact { font-size: 12px; } + .footer__contact { + font-size: 12px; + } } diff --git a/src/scss/page/_gnb.scss b/src/scss/page/_gnb.scss new file mode 100644 index 0000000..6d901e2 --- /dev/null +++ b/src/scss/page/_gnb.scss @@ -0,0 +1,138 @@ +@use "../base/variable" as *; +@use "../base/mixin" as *; + +// GNB +.gnb { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: $gnb-height; + z-index: 100; + transition: background 0.4s; + + &.is-scrolled { + background: rgba($color-bg, 0.92); + backdrop-filter: blur(12px); + } +} + +.gnb__inner { + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; + padding: 0 48px; +} + +.gnb__logo { + display: flex; + align-items: center; +} + +.gnb__logoImg { + width: 90px; + height: auto; + object-fit: unset; +} + +.gnb__nav { + // nav block — layout only +} + +.gnb__navList { + display: flex; + align-items: center; +} + +.gnb__navItem { + // list item — no extra styles needed +} + +.gnb__navLink { + display: block; + padding: 24px 32px; + font-size: 16px; + font-weight: 400; + letter-spacing: 0.05em; + color: $color-white; + transition: color 0.2s; + + &:hover { + color: $color-cyan; + } +} + +.gnb__navItem.is-active .gnb__navLink { + color: $color-cyan; +} + +.gnb__hamburger { + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 32px; + height: 32px; + background: none; + border: none; + cursor: pointer; + padding: 0; +} + +.gnb__hamburgerLine { + display: block; + width: 100%; + height: 1px; + background: $color-white; + transition: + transform 0.3s, + opacity 0.3s; +} + +.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(1) { + transform: translateY(6px) rotate(45deg); +} +.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(2) { + opacity: 0; +} +.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(3) { + transform: translateY(-6px) rotate(-45deg); +} + +.gnb__mobileNav { + display: none; + position: absolute; + top: $gnb-height-mo; + left: 0; + width: 100%; + background: rgba($color-bg, 0.97); + backdrop-filter: blur(16px); + padding: 16px 0 24px; + transform: translateY(-100%); + opacity: 0; + transition: + transform 0.35s ease, + opacity 0.35s ease; + pointer-events: none; + + &.is-open { + transform: translateY(0); + opacity: 1; + pointer-events: auto; + } +} + +.gnb__mobileNavList { + display: flex; + flex-direction: column; +} + +.gnb__mobileNavLink { + display: block; + padding: 14px 24px; + font-size: 18px; + font-weight: 400; + letter-spacing: 0.05em; + color: $color-white; +} diff --git a/src/scss/page/_home.scss b/src/scss/page/_home.scss deleted file mode 100644 index 32d3ae8..0000000 --- a/src/scss/page/_home.scss +++ /dev/null @@ -1,231 +0,0 @@ -@use '../base/variable' as *; -@use '../base/mixin' as *; - -// GNB -.gnb { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: $gnb-height; - z-index: 100; - transition: background 0.4s; - - &.is-scrolled { - background: rgba($color-bg, 0.92); - backdrop-filter: blur(12px); - } -} - -.gnb__inner { - display: flex; - align-items: center; - justify-content: space-between; - height: 100%; - padding: 0 48px; -} - -.gnb__logo { - display: flex; - align-items: center; -} - -.gnb__logoImg { - width: 90px; - height: auto; - object-fit: unset; -} - -.gnb__nav { - // nav block — layout only -} - -.gnb__navList { - display: flex; - align-items: center; -} - -.gnb__navItem { - // list item — no extra styles needed -} - -.gnb__navLink { - display: block; - padding: 24px 32px; - font-size: 16px; - font-weight: 400; - letter-spacing: 0.05em; - color: $color-white; - transition: color 0.2s; - - &:hover { color: $color-cyan; } -} - -.gnb__navItem.is-active .gnb__navLink { - color: $color-cyan; -} - -.gnb__hamburger { - display: none; - flex-direction: column; - justify-content: center; - gap: 5px; - width: 32px; - height: 32px; - background: none; - border: none; - cursor: pointer; - padding: 0; -} - -.gnb__hamburgerLine { - display: block; - width: 100%; - height: 1px; - background: $color-white; - transition: transform 0.3s, opacity 0.3s; -} - -.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(1) { transform: translateY(6px) rotate(45deg); } -.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(2) { opacity: 0; } -.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } - -.gnb__mobileNav { - display: none; - position: absolute; - top: $gnb-height-mo; - left: 0; - width: 100%; - background: rgba($color-bg, 0.97); - backdrop-filter: blur(16px); - padding: 16px 0 24px; - transform: translateY(-100%); - opacity: 0; - transition: transform 0.35s ease, opacity 0.35s ease; - pointer-events: none; - - &.is-open { - transform: translateY(0); - opacity: 1; - pointer-events: auto; - } -} - -.gnb__mobileNavList { - display: flex; - flex-direction: column; -} - -.gnb__mobileNavLink { - display: block; - padding: 14px 24px; - font-size: 18px; - font-weight: 400; - letter-spacing: 0.05em; - color: $color-white; -} - -// Intro -.intro { - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - background: $color-bg; -} - -.intro__blobs { - position: absolute; - inset: 0; - pointer-events: none; - overflow: hidden; -} - -.blob { - position: absolute; - border-radius: 50%; - filter: blur(120px); - opacity: 0.55; -} - -.blobCyan { - width: 56vw; - height: 56vw; - background: $color-cyan; - top: -10%; - right: -10%; -} - -.blobPurple { - width: 32vw; - height: 32vw; - background: $color-purple; - top: 15%; - left: 5%; -} - -.blobBlue { - width: 24vw; - height: 24vw; - background: $color-blue; - bottom: 10%; - left: -5%; -} - -.intro__content { - position: relative; - text-align: center; - z-index: 1; -} - -.intro__sub { - font-size: clamp(16px, 2.5vw, 36px); - font-weight: 100; - letter-spacing: 0.02em; - color: $color-white; - margin-bottom: clamp(16px, 2vw, 32px); - line-height: 1.2; -} - -.intro__title { - font-size: clamp(14px, 1.5vw, 20px); - font-weight: 900; - letter-spacing: 0.2em; - text-transform: uppercase; - color: $color-white; -} - -@include mo { - .gnb__inner { - padding: 0 20px; - height: $gnb-height-mo; - } - - .gnb__nav { display: none; } - - .gnb__hamburger { display: flex; } - - .gnb__mobileNav { display: block; } - - .blobCyan { - width: 90vw; - height: 90vw; - right: -20%; - top: -5%; - } - - .blobPurple { - width: 60vw; - height: 60vw; - left: -15%; - top: 20%; - } - - .blobBlue { - width: 50vw; - height: 50vw; - left: -10%; - bottom: 5%; - } -} diff --git a/src/scss/page/_intro.scss b/src/scss/page/_intro.scss new file mode 100644 index 0000000..cf982dc --- /dev/null +++ b/src/scss/page/_intro.scss @@ -0,0 +1,113 @@ +@use "../base/variable" as *; +@use "../base/mixin" as *; + +// Intro +.intro { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + background: $color-bg; +} + +.intro__blobs { + position: absolute; + inset: 0; + pointer-events: none; + overflow: hidden; +} + +.blob { + position: absolute; + border-radius: 50%; + filter: blur(120px); + opacity: 0.55; +} + +.blobCyan { + width: 56vw; + height: 56vw; + background: $color-cyan; + top: -10%; + right: -10%; +} + +.blobPurple { + width: 32vw; + height: 32vw; + background: $color-purple; + top: 15%; + left: 5%; +} + +.blobBlue { + width: 24vw; + height: 24vw; + background: $color-blue; + bottom: 10%; + left: -5%; +} + +.intro__content { + position: relative; + text-align: center; + z-index: 1; +} + +.intro__sub { + font-size: clamp(16px, 2.5vw, 36px); + font-weight: 100; + letter-spacing: 0.02em; + color: $color-white; + margin-bottom: clamp(16px, 2vw, 32px); + line-height: 1.2; +} + +.intro__title { + font-size: clamp(14px, 1.5vw, 20px); + font-weight: 900; + letter-spacing: 0.2em; + text-transform: uppercase; + color: $color-white; +} + +@include mo { + .gnb__inner { + padding: 0 20px; + height: $gnb-height-mo; + } + + .gnb__nav { + display: none; + } + + .gnb__hamburger { + display: flex; + } + + .gnb__mobileNav { + display: block; + } + + .blobCyan { + width: 90vw; + height: 90vw; + right: -20%; + top: -5%; + } + + .blobPurple { + width: 60vw; + height: 60vw; + left: -15%; + top: 20%; + } + + .blobBlue { + width: 50vw; + height: 50vw; + left: -10%; + bottom: 5%; + } +} diff --git a/src/scss/page/_projects.scss b/src/scss/page/_projects.scss index c31f69a..5e59344 100644 --- a/src/scss/page/_projects.scss +++ b/src/scss/page/_projects.scss @@ -1,5 +1,5 @@ -@use '../base/variable' as *; -@use '../base/mixin' as *; +@use "../base/variable" as *; +@use "../base/mixin" as *; .project { background: $color-bg; @@ -119,7 +119,10 @@ font-weight: 400; letter-spacing: 0.1em; color: $color-white; - transition: background 0.3s, border-color 0.3s, color 0.3s; + transition: + background 0.3s, + border-color 0.3s, + color 0.3s; &:hover { background: $color-white; @@ -129,14 +132,20 @@ } @include mo { - .project { padding: 60px 20px; } + .project { + padding: 60px 20px; + } - .project__heading { margin-bottom: 36px; } + .project__heading { + margin-bottom: 36px; + } .project__grid { grid-template-columns: 1fr; gap: 32px; } - .project__more { margin-top: 48px; } + .project__more { + margin-top: 48px; + } }