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

Jump to bottom

week1 navigation header #2

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

week1 navigation header #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 15 additions & 0 deletions challenge/header-publishing/G0/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
### 신경쓴 부분
- css로만 구현해보려고 했다
Copy link
Collaborator

@peanudge peanudge Mar 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

저 이거 처음 알았어요 ㅎㅎ 저도 이렇게 할걸 그랬네요. JS 코드 안써도 되군요.

- 클래스명을 BEM 스타일로 쓰려고 했다
- semantic html로 작성하려고 했다

### 어려웠던 부분
- 모달을 닫는 걸 어떻게 해야 할지..
- BEM을 제대로 쓰고 있는건지..
- svg를 긁어오기 위해 코드를 잠깐 봤는데 내가 작성한 semantic html이랑 달라서 좀 긴가민가했다

### 후기
- 다 구현하진 못했는데, 이정도 구현 하는데만도.. 거의 2시간정도 걸려서.. 충격이었다.. 🫠
- 괜히 폰트 바꿔본다고 시간을 쓰긴 했지만.. 그래도.. 흠..

[codepen](https://codepen.io/wooooooood/pen/WNgKGzq?editors=1100)
98 changes: 98 additions & 0 deletions challenge/header-publishing/G0/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<nav>
<div class="nav__items "><img class="nav__items--logo" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="logo"></div>
<div class="nav__items nav__items--routes">
<a class="nav__items--route" href="#open-product-dropdown">
<p>Product</p><svg class="nav__icon--downarrow" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</a>
<a class="nav__items--route" href="#">Features</a>
<a class="nav__items--route" href="#">Marketplace</a>
<a class="nav__items--route" href="#">Company</a>
</div>
<button class="nav__items nav__items--login">
<p>login</p>
</button>
<!-- ui상으로 항상 센터에서 열리는 느낌이라 센터로 띄움 -->
<div id="open-product-dropdown" class="nav__product-dropdown">
<div class="nav__product-dropdown--item">
<div class="nav__product-dropdown--logo"><svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg></div>
<div class="nav__product-dropdown--textbox">
<p class="nav__product-dropdown--title">Analytics</p>
<p class="nav__product-dropdown--description">Get a better understanding of your traffic</p>
</div>
</div>
<div class="nav__product-dropdown--item">
<div class="nav__product-dropdown--logo"><svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg></div>
<div class="nav__product-dropdown--textbox">
<p class="nav__product-dropdown--title">Analytics</p>
<p class="nav__product-dropdown--description">Get a better understanding of your traffic</p>
</div>
</div>
<div class="nav__product-dropdown--item">
<div class="nav__product-dropdown--logo"><svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg></div>
<div class="nav__product-dropdown--textbox">
<p class="nav__product-dropdown--title">Analytics</p>
<p class="nav__product-dropdown--description">Get a better understanding of your traffic</p>
</div>
</div>
<div class="nav__product-dropdown--item">
<div class="nav__product-dropdown--logo"><svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg></div>
<div class="nav__product-dropdown--textbox">
<p class="nav__product-dropdown--title">Analytics</p>
<p class="nav__product-dropdown--description">Get a better understanding of your traffic</p>
</div>
</div>
</div>
<a class="nav__items nav__icon--hamburger" href="#open-sidebar">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
</svg>
</a>
<div id="open-sidebar" class="nav__sidebar">
<div class="nav__items nav__sidebar--top">
<img class="nav__items--logo" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="logo" />
<a href="#" class="nav__icon--close">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg></a>
</div>
<div class="nav__sidebar-items--routes">
<a class="nav__sidebar-items--route" href="#">Product</a>
<div class="nav__sidebar--product-subs">
<a class="nav__sidebar--product-sub" href="#">Analytics</a>
<a class="nav__sidebar--product-sub" href="#">Analytics</a>
<a class="nav__sidebar--product-sub" href="#">Analytics</a>
<a class="nav__sidebar--product-sub" href="#">Analytics</a>

</div>
<a class="nav__sidebar-items--route" href="#">Features</a>
<a class="nav__sidebar-items--route" href="#">Marketplace</a>
<a class="nav__sidebar-items--route" href="#">Company</a>
</div>
</div>
</nav>
</body>
</html>
195 changes: 195 additions & 0 deletions challenge/header-publishing/G0/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
html,
body {
margin: 0;
}

button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}

a {
text-decoration: none;
color: inherit;
}

p {
padding: 0;
margin: 0;
}

/* custom */
nav {
width: 100%;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}

.nav__items {
padding: 1rem 1.5rem;
}

.nav__items--logo {
width: 2rem;
}

.nav__items--routes {
display: flex;
font-weight: 600;
}

.nav__items--route {
margin: 0 1.5rem;
display: flex;
align-items: center;
}

.nav__icon--downarrow {
width: 1.5rem;
color: gray;
margin-left: 0.25rem;
}

.nav__product-dropdown {
position: absolute;
left: 50%;
top: 4rem;
transform: translateX(-50%);
border: 1px solid #eee;
border-radius: 15px;
padding: 1rem;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
background-color: white;
visibility: hidden;
opacity: 0;
transition: all 0.5s;
}

.nav__product-dropdown:target {
top: 3.5rem;
visibility: visible;
opacity: 1;
}

.nav__product-dropdown--item {
display: flex;
align-items: center;
padding: 1rem;
}

.nav__product-dropdown--item:hover {
background-color: #f5f5f5;
border-radius: 10px;
cursor: pointer;
}

.nav__product-dropdown--title {
font-weight: 600;
}

.nav__product-dropdown--description {
font-weight: 300;
color: #888;
}

.nav__product-dropdown--logo {
width: 1.5rem;
padding: 0.5rem;
border-radius: 10px;
background-color: #f5f5f5;
margin: auto 0;
display: flex;
}

.nav__product-dropdown--item:hover .nav__product-dropdown--logo {
color: #cba;
background-color: #fff;
}

.nav__product-dropdown--logo + .nav__product-dropdown--textbox {
margin-left: 1.25rem;
}

.nav__product-dropdown--title + .nav__product-dropdown--description {
margin-top: 8px;
}

.nav__icon--hamburger {
display: none;
width: 2rem;
height: 2rem;
cursor: pointer;
margin: auto 0;
}

.nav__icon--close {
width: 2rem;
height: 2rem;
}

.nav__sidebar {
position: absolute;
top: 0;
width: 100%;
height: 100vh;
visibility: hidden;
z-index: 10;
background-color: white;
display: flex;
flex-direction: column;
}

.nav__sidebar:target {
visibility: visible;
Copy link
Collaborator

@peanudge peanudge Mar 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

visibility: hidden vs dispay:none

언제 visibility가 좋을까 궁금해서 찾아보니 visibility: hidden을 사용할 것이라면 opacity: 0 를 사용하는게 Repaint, Reflow 를 다시 발생시키안아서 더 좋을 것이라고 나오네요. visibility를 판단하신 이유가 궁금합니다 :)

개인적으로는 opacity 가 애니메이션 적용가능한 수치 값을 가지기도하니 공간을 따로 차지하지않을 경우 opacity가 좋지않을까 싶네요.

https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone

@kevin is correct in that visibility: hidden and display: none will be equally performant since they both retrigger layout, paint and composite. However, opacity: 0 is functionally equivalent to visibility: hidden and does not retrigger the layout step, so I would advise using that if you don't mind the empty space still being allocated (otherwise use display: none).

Copy link
Member Author

Choose a reason for hiding this comment

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

제가 평소에 보여지고 안보여지는 토글은 display none을 사용했었는데 알고보니 display none은 transition이 안먹히더라구요..! 그래서 구글링하다가 복붙을 하게 되었는데 이런.. 비밀이 있었군요 ㅎㅎ;

}

.nav__sidebar--top {
display: flex;
align-items: center;
justify-content: space-between;
}

.nav__sidebar-items--routes {
display: flex;
flex-direction: column;
margin: 0 1rem;
}

.nav__sidebar-items--route {
padding: 0.75rem;
border-radius: 8px;
margin: 5px 0;
font-size: 1.25rem;
}

.nav__sidebar-items--route:hover {
background-color: #f5f5f5;
}
.nav__sidebar--product-subs {
font-size: 0.9rem;
}
.nav__sidebar--product-sub {
display: block;
padding: 0.75rem 0.75rem 0.75rem 1.25rem;
border-radius: 8px;
}
.nav__sidebar--product-sub:hover {
background-color: #f5f5f5;
}
@media (max-width: 768px) {
.nav__items--routes,
.nav__items--login {
display: none;
}
.nav__icon--hamburger {
display: block;
}
}