diff --git a/src/assets/Logo.svg b/src/assets/Logo.svg index 1a93753..3b2bf95 100644 --- a/src/assets/Logo.svg +++ b/src/assets/Logo.svg @@ -1,10 +1,9 @@ - - - + + - + - + diff --git a/src/components/common/header/index.tsx b/src/components/common/header/index.tsx index ff13bb8..7fad426 100644 --- a/src/components/common/header/index.tsx +++ b/src/components/common/header/index.tsx @@ -23,12 +23,17 @@ export const Header = () => { return ( <> - -
+ + + Xquare Infra + +
소개 고객 지원 -
- + + + + @@ -37,7 +42,7 @@ export const Header = () => { const Wrapper = styled.div<{ scroll: number }>` position: fixed; - transition: 0.2s linear; + transition: 0.25s linear; top: 0; left: 0; width: 100%; @@ -49,10 +54,21 @@ const Wrapper = styled.div<{ scroll: number }>` color: ${({ scroll }) => (scroll === 0 ? 'white' : scroll >= 408 ? 'rgba(0,0,0,0)' : 'black')}; background-color: ${({ scroll }) => (scroll === 0 ? 'rgba(0,0,0,0)' : scroll >= 408 ? 'rgba(0,0,0,0)' : 'white')}; z-index: 999; - > div { - width: 254px; - display: flex; - justify-content: space-between; +`; + +const Center = styled.div` + width: 254px; + display: flex; + justify-content: space-between; +`; + +const Side = styled.div` + width: 300px; + display: flex; + align-items: center; + font-size: 30px; + > span { + margin-left: 14px; } `; @@ -61,4 +77,5 @@ const Button = styled.div` height: 52px; border-radius: 8px; border: 2px white solid; + justify-self: end; `;