[1주차 기본/심화 과제] 웨비들의 냠냠 🍰 창업🏠 #1
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <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" /> | ||
| <title>은서네 마라마라탕</title> | ||
|
There was a problem hiding this comment. 저도 들렸습니다!! 그래서 혹시 마라탕 개업일자는 언제 인가요? 먹으러 가려구요!😊 There was a problem hiding this comment. ㅋㅌㅋㅌ 포켓몬 체육관 관장 되시는 날에 개업해보겠습니다 ... 🫢 |
||
| <script | ||
| src="https://kit.fontawesome.com/6fbcf91afd.js" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>은서네 마라마라탕 🥬🍄🍡</h1> | ||
| <button id="header__button"><i class="fa-solid fa-bars"></i></button> | ||
| <section id="header__menu"> | ||
| <h1>메뉴</h1> | ||
| <h3>새 상품 추가</h3> | ||
| <h3>찜 목록</h3> | ||
| </section> | ||
| </header> | ||
| <main> | ||
| <nav> | ||
| <h2>분류</h2> | ||
| <ul> | ||
| <li> | ||
| <input type="checkbox" /> | ||
| <h3>전체</h3> | ||
| </li> | ||
| <li> | ||
| <input type="checkbox" /> | ||
| <h3>채소</h3> | ||
| </li> | ||
| <li> | ||
| <input type="checkbox" /> | ||
| <h3>버섯</h3> | ||
| </li> | ||
| <li> | ||
| <input type="checkbox" /> | ||
| <h3>기타</h3> | ||
| </li> | ||
| </ul> | ||
|
Comment on lines
+27
to
+44
There was a problem hiding this comment. ul li 태그는 이런 식으로 적용할 수 있겠구나- 라는 깨달음을 얻고 갑니다 👍 |
||
| </nav> | ||
| <section id="cards"> | ||
|
|
||
| <ul> | ||
| <li class="cards__card"> | ||
|
There was a problem hiding this comment. 요거 li 대신에 article 로 해주면은 어떨까??? 나도 확실하진 않지만 이 카드 내용들은 웹사이트랑 독립적인 부분인 것 같아서!!! :) There was a problem hiding this comment. 오오.. 뭔가 리스트 형식인거는 ul ol로 써야지라고만 생각했는데 듣고보니 article도 맞는거같네.. 어떤것이 좋은 시맨틱 태그일까... |
||
| <h3>청경채</h3> | ||
| <small>#푸릇푸릇 #신선</small> | ||
|
|
||
| <img | ||
| alt="청경채" | ||
|
There was a problem hiding this comment. img 태그에 alt 태그 붙여주는 거 야무지게 잘 했다 ㅎㅎ 접근성 높은 코드를 위해 꼭 써주는 게 좋져!!! :) |
||
| src="https://img-cf.kurly.com/shop/data/goods/1619680685239l0.jpg" | ||
| /> | ||
| <i class="fa-solid fa-heart"></i> | ||
| </li> | ||
| <li class="cards__card"> | ||
|
There was a problem hiding this comment. class를 지어줄 때 은서만의 규칙같은 게 있는 걸까? 언더바 두개를 쓴 이유도 특별한 규칙이 있는 건지 궁금해 ! There was a problem hiding this comment. 요거는 세미나에서 언급됐던 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 | ||
| alt="배추" | ||
| src="https://img-cf.kurly.com/shop/data/goodsview/20200717/gv00000107986_1.jpg" | ||
| /> | ||
| <i class="fa-solid fa-heart"></i> | ||
| </li> | ||
| <li class="cards__card"> | ||
| <h3>연근</h3> | ||
| <small>#아삭아삭 #별미</small> | ||
| <img | ||
| alt="연근" | ||
| src="https://img-cf.kurly.com/shop/data/goodsview/20220216/gv20000280932_1.jpg" | ||
| /> | ||
| <i class="fa-solid fa-heart"></i> | ||
| </li> | ||
| <li class="cards__card"> | ||
| <h3>흰목이버섯</h3> | ||
| <small>#필수템 #포들포들</small> | ||
| <img | ||
| alt="흰목이버섯" | ||
| src="https://img-cf.kurly.com/shop/data/goodsview/20200515/gv20000095604_1.jpg" | ||
| /> | ||
| <i class="fa-solid fa-heart"></i> | ||
| </li> | ||
| <li class="cards__card"> | ||
| <h3>새송이버섯</h3> | ||
| <small>#무난템 #말랑말랑</small> | ||
| <img | ||
| alt="새송이버섯" | ||
| src="https://img-cf.kurly.com/shop/data/goodsview/20200306/gv20000084569_1.jpg" | ||
| /> | ||
| <i class="fa-solid fa-heart"></i> | ||
| </li> | ||
| <li class="cards__card"> | ||
| <h3>면두부</h3> | ||
| <small>#다이어트 #고소해</small> | ||
| <img | ||
| alt="면두부" | ||
| src="https://img-cf.kurly.com/shop/data/goodsview/20211110/gv30000241778_1.jpg" | ||
| /> | ||
| <i class="fa-solid fa-heart"></i> | ||
| </li> | ||
| <li class="cards__card"> | ||
| <h3>유부</h3> | ||
| <small>#촉촉 #별미</small> | ||
| <img | ||
| alt="유부" | ||
| src="https://img-cf.kurly.com/shop/data/goodsview/20190129/gv40000042637_1.jpg" | ||
| /> | ||
| <i class="fa-solid fa-heart"></i> | ||
| </li> | ||
| <li class="cards__card"> | ||
| <h3>푸주</h3> | ||
| <small>#dobo #fuzu</small> | ||
| <img | ||
| alt="푸주" | ||
| src="https://product-image.kurly.com/product/image/c5c5f9e4-5ee3-4e2b-b36b-1aa5301d97d6.jpg" | ||
| /> | ||
| <i class="fa-solid fa-heart"></i> | ||
| </li> | ||
| <li class="cards__card"> | ||
| <h3>치즈떡</h3> | ||
| <small>#쫄깃쫄깃 #말랑말랑</small> | ||
| <img | ||
| alt="치즈떡" | ||
| src="https://img-cf.kurly.com/shop/data/goods/1640659336778l0.jpg" | ||
| /> | ||
| <i class="fa-solid fa-heart"></i> | ||
| </li> | ||
| <li class="cards__card"> | ||
| <h3>새우</h3> | ||
| <small>#무조건 #새우탕ㄱㄱ</small> | ||
| <img | ||
| alt="새우" | ||
| src="https://img-cf.kurly.com/shop/data/goodsview/20211227/gv20000262359_1.jpg" | ||
| /> | ||
| <i class="fa-solid fa-heart"></i> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| </main> | ||
| </body> | ||
| </html> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
꼼꼼하다ㅎㅎ
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
인졍