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

[ 1주차 기본/심화 과제 ] : assign3 - 웨비들의 냠냠 🍰 창업🏠 (Yeonsinsa 👗👖👚) #1

Merged
merged 9 commits into from
Apr 13, 2023
Merged

[ 1주차 기본/심화 과제 ] : assign3 - 웨비들의 냠냠 🍰 창업🏠 (Yeonsinsa 👗👖👚) #1

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4839fe8
init: 초기 설정
Yeonseo-Jo Apr 3, 2023
b9a527a
feat: 화면 구조 잡기
Yeonseo-Jo Apr 4, 2023
ec6aa38
feat: 카드 요소 추가
Yeonseo-Jo Apr 4, 2023
69c3500
feat: 기본 과제 구현 완성
Yeonseo-Jo Apr 5, 2023
f332b92
feat: 심화 과제 구현 완성
Yeonseo-Jo Apr 5, 2023
40202e6
fix: 최종 수정(안쓰는 클래스 제거, title 수정
Yeonseo-Jo Apr 5, 2023
0a67bbe
rfc: 폴더 구조 수정 및 이미지 크기 조정
Yeonseo-Jo Apr 5, 2023
f0003a8
fix: 이미지 크기 수정
Yeonseo-Jo Apr 5, 2023
a1e9ad7
fix: 태그 넘치면 통으로 안보이게 처리
Yeonseo-Jo Apr 6, 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
10 changes: 9 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,16 @@
<body>
<header class="header">
<h1 class="header__title">YEONSINSA</h1>
<nav class="header__nav">
<nav>
<button class="header__button"><i class="fa-solid fa-bars"></i></button>
<section class="header__menu">
<article class="header__list">
<h2 class="header__sublist-title">메뉴</h2>
<br />
Copy link
Member

Choose a reason for hiding this comment

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

image

참 이게 접근성에 br태그가 적절하지 않아서...! 나같은 경우에 padding 이나 margin 으로 조절하는것가타!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

헉 그렇구나 ,,! br 사용은 최대한 지양해야겠당

<a class="header__sublist" href="#">새 위시 추가</a>
<a class="header__sublist" href="#">찜 목록</a>
</article>
</section>
</nav>
</header>

Expand Down
87 changes: 87 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,50 @@ h3 {
background-color: black;
}

.header__menu {
display: none;
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: 13rem;
background-color: #dddddd;
color: black;
z-index: 10;
}

.header__button:hover + .header__menu,
.header__menu:hover {
display: block;
}

.header__list {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 2rem 1rem;
}

.header__sublist-title,
.header__sublist {
margin-bottom: 1.5rem;
font-size: 2rem;
font-weight: 700;
text-decoration: none;
color: black;
}

.header__sublist {
text-decoration: underline 0.1rem;
text-underline-position: under;
}

.header__sublist:hover {
text-decoration: underline dotted 0.1rem;
text-underline-position: under;
color: grey;
}

main {
display: flex;
padding: 6rem 1.5rem 0 1.5rem;
Expand Down Expand Up @@ -77,13 +121,51 @@ main {
border-radius: 1rem;
}

.nav__category:hover {
background-color: #dddddd;
color: grey;
cursor: pointer;
}

/* card section */
.cards {
display: grid;
grid-template-columns: repeat(6, 1fr);
width: 100%;
padding: 0 1.5rem;
}

@media screen and (max-width: 1500px) {
.cards {
grid-template-columns: repeat(5, 1fr);
}
}

@media screen and (max-width: 1280px) {
.cards {
grid-template-columns: repeat(4, 1fr);
}
}

@media screen and (max-width: 1024px) {
.cards {
grid-template-columns: repeat(3, 1fr);
}
}

@media screen and (max-width: 780px) {
.cards {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 670px) {
.cards {
grid-template-columns: repeat(1, 1fr);
place-items: center;
}
}

.cards__card {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -117,3 +199,8 @@ main {
background-color: white;
color: red;
}

.cards__button:hover {
color: #dddddd;
cursor: pointer;
}