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주차 기본/심화 과제] 웨비들의 냠냠 🍰 창업🏠 #1

Merged
merged 11 commits into from
Apr 14, 2023
Merged

[1주차 기본/심화 과제] 웨비들의 냠냠 🍰 창업🏠 #1

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
544daa3
docs : 전체 태그 구조 작성
simeunseo Apr 2, 2023
fe6f7fd
init : css 세팅
simeunseo Apr 2, 2023
3569270
style : 글꼴 세팅
simeunseo Apr 2, 2023
bd18121
style : 글꼴 변경, header 완료
simeunseo Apr 2, 2023
0197280
style : nav 완료
simeunseo Apr 2, 2023
aa8c605
style : cards 및 반응형 완료
simeunseo Apr 2, 2023
815936c
style : 찜하기 버튼 오른쪽 정렬, 호버이벤트
simeunseo Apr 2, 2023
b1ad23a
style : 넘치는 해시태그 가리기, 전체적 디테일 수정
simeunseo Apr 2, 2023
188f9f3
style : 글꼴 수정, header 세로정렬
simeunseo Apr 3, 2023
4aa3a67
docs : img 태그에 alt 추가
simeunseo Apr 3, 2023
02bca98
refactor : 넘치는 해시태그 자르기
simeunseo Apr 7, 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
24 changes: 12 additions & 12 deletions week1/assign3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ <h1>은서네 마라마라탕 🥬🍄🍡</h1>
<button id="header__button"><i class="fa-solid fa-bars"></i></button>
<section id="header__menu">
<h1>메뉴</h1>
<h2>새 상품 추가</h2>
<h2>찜 목록</h2>
<h3>새 상품 추가</h3>
<h3>찜 목록</h3>
</section>
</header>
<main>
Expand Down Expand Up @@ -51,79 +51,79 @@ <h3>청경채</h3>
<img
src="https://img-cf.kurly.com/shop/data/goods/1619680685239l0.jpg"
/>
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</li>
<li class="cards__card">
Copy link

Choose a reason for hiding this comment

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

class를 지어줄 때 은서만의 규칙같은 게 있는 걸까? 언더바 두개를 쓴 이유도 특별한 규칙이 있는 건지 궁금해 !

Copy link
Member Author

@simeunseo simeunseo Apr 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

요거는 세미나에서 언급됐던 BEM 방법론을 이용한거야! https://velog.io/@fromzoo/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-BEM-%EB%B0%A9%EC%8B%9D

이렇게 하면 규칙도 생기고(협업할 때 좋쥐), 이름만으로도 구조화가 되어서 좋아 ㅎㅎ

<h3>배추</h3>
<small>#필수템 #무한흡입</small>
<img
src="https://img-cf.kurly.com/shop/data/goodsview/20200717/gv00000107986_1.jpg"
/>
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</li>
<li class="cards__card">
<h3>연근</h3>
<small>#아삭아삭 #별미</small>
<img
src="https://img-cf.kurly.com/shop/data/goodsview/20220216/gv20000280932_1.jpg"
/>
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</li>
<li class="cards__card">
<h3>흰목이버섯</h3>
<small>#필수템 #포들포들</small>
<img
src="https://img-cf.kurly.com/shop/data/goodsview/20200515/gv20000095604_1.jpg"
/>
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</li>
<li class="cards__card">
<h3>새송이버섯</h3>
<small>#무난템 #말랑말랑</small>
<img
src="https://img-cf.kurly.com/shop/data/goodsview/20200306/gv20000084569_1.jpg"
/>
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</li>
<li class="cards__card">
<h3>면두부</h3>
<small>#다이어트 #고소해</small>
<img
src="https://img-cf.kurly.com/shop/data/goodsview/20211110/gv30000241778_1.jpg"
/>
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</li>
<li class="cards__card">
<h3>유부</h3>
<small>#촉촉 #별미</small>
<img
src="https://img-cf.kurly.com/shop/data/goodsview/20190129/gv40000042637_1.jpg"
/>
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</li>
<li class="cards__card">
<h3>푸주</h3>
<small>#dobo #fuzu</small>
<img
src="https://product-image.kurly.com/product/image/c5c5f9e4-5ee3-4e2b-b36b-1aa5301d97d6.jpg"
/>
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</li>
<li class="cards__card">
<h3>치즈떡</h3>
<small>#쫄깃쫄깃 #말랑말랑</small>
<img
src="https://img-cf.kurly.com/shop/data/goods/1640659336778l0.jpg"
/>
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</li>
<li class="cards__card">
<h3>새우</h3>
<small>#무조건 #새우탕ㄱㄱ</small>
<img
src="https://img-cf.kurly.com/shop/data/goodsview/20211227/gv20000262359_1.jpg"
/>
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</li>
</ul>
</section>
Expand Down
18 changes: 16 additions & 2 deletions week1/assign3/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,11 +213,18 @@ header {
font-weight: bold;
}

#header__menu > h2 {
padding-bottom: 1rem;
#header__menu > h3 {
padding-bottom: 1.5rem;
cursor: pointer;
}

#header__menu > h3:hover {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: var(--main-color);
text-underline-offset: 0.3rem;
Comment on lines +233 to +236
Copy link
Member

Choose a reason for hiding this comment

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

진짜 디테일한데?!

}

/* nav */
main {
padding: 2rem;
Expand Down Expand Up @@ -325,3 +332,10 @@ img {
.cards__card i:hover {
color: var(--main-color);
}

.cards__card small {
width: 9rem;
white-space: nowrap;
overflow: hidden;
text-align: center;
}