Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat] 헤더 상단 고정 및 z-index 수정 #127

Merged
merged 3 commits into from
Nov 21, 2023
Merged

[Feat] 헤더 상단 고정 및 z-index 수정 #127

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f934e2b
:lipstick: 헤더 상단 고정 및 z-index 수정
LEEJW1953 Nov 21, 2023
28e9042
:lipstick: 헤더 position fixed로 변경
LEEJW1953 Nov 21, 2023
25b9eab
:lipstick: 헤더에 가려지는 부분 처리를 위한 스타일 추가
LEEJW1953 Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/frontend/src/components/commons/Header/index.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,14 @@ import { style } from '@vanilla-extract/css';
import { vars, fontStyle } from '@/styles';

export const container = style({
position: 'sticky',
Copy link
Collaborator

@js43o js43o Nov 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3: 'fixed' 대신 'sticky'를 쓰신 이유가 궁금합니다!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음 생각해보니 fixed를 사용하면 html 높이 속성을 바꿀 필요가 없을 수도 있겠네요 수정하겠습니다!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 지금 minHeight, 100vh 써보는데도 똑같은 현상이 일어나서요..😂 좋습니다!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

28e9042
수정하였습니다

top: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: vars.color.grayscaleWhite,
borderBottom: `1px solid ${vars.color.grayscale100}`,
zIndex: '999',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p3; 뭔가 zIndex도 관리하고 싶다는 생각이 드네요.. 찾아보았는데 변수로 관리하는 솔루션도 있네요! (아마 sass?)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 이런 규칙? 도 있군요

});

export const header = style({
Expand Down
Loading