[1주차 기본/심화/공유 과제] 쇼핑리스트, 투두리스트 #1
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,225 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="style.css"/> | ||
| <!--Google Icons - 메뉴 바 설정--> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> | ||
| <!--Google Font - 한글 글꼴 설정--> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Gaegu&display=swap" rel="stylesheet"> | ||
| <title>webbie's shop list</title> | ||
| </head> | ||
| <body class="gaegu-regular"> | ||
| <!--큰 제목 헤더 --> | ||
| <header class="big_title"> | ||
| <h1>♡</h1> | ||
| <h1>보운이의 찜리스트</h1> | ||
| <label> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </label> | ||
| </header> | ||
| <!--좌측 고정 메뉴 바--> | ||
| <nav> | ||
| <h1>찜 목록</h1> | ||
| <span> | ||
| <button><a href="#all">전체</a></button> | ||
| <button><a href="#t">상의</a></button> | ||
|
Comment on lines
+29
to
+31
There was a problem hiding this comment. 이부분은 ul, li태그 사용이 의미론 적으로 더 올바를 것 같네요! 그리고 a태그를 button태그로 감쌀필요 없이 바로 사용하시는 것이 더 올바른 html사용일것 같아요~ There was a problem hiding this comment. 오호 a태그 혼자 쓰기..메모메모.. ul, li도 시멘틱 구조를 만들기 위해...! 명심하겠습니다!! 😄 |
||
| <button><a href="#sk">하의</a></button> | ||
| <button><a href="#acc">악세서리</a></button> | ||
| </span> | ||
| </nav> | ||
| <!--메인 :: 이미지 넣는게 이렇게 수동으로 밖에 안되나ㅠ--> | ||
|
There was a problem hiding this comment. 아무래도 html css만 이용하다 보면 이미지를 정적으로 넣어둬야 할 것 같네요! |
||
| <main> | ||
| <section class="banner-container"> | ||
| <div class="banner"> | ||
| <img src="img/a1.jpg" alt="acc"/> | ||
| <img src="img/a2.jpg" alt="acc"/> | ||
| <img src="img/a3.jpg" alt="acc"/> | ||
| <img src="img/s1.jpg" alt="skirt"/> | ||
| <img src="img/s2.jpg" alt="skirt"/> | ||
| <img src="img/s3.jpg" alt="skirt"/> | ||
| <img src="img/t1.jpg" alt="T-shirt"/> | ||
| <img src="img/t2.jpg" alt="T-shirt"/> | ||
| <img src="img/t3.jpg" alt="T-shirt"/> | ||
| <img src="img/t4.jpg" alt="T-shirt"/> | ||
| <img src="img/t5.jpg" alt="T-shirt"/> | ||
| </div> | ||
|
Comment on lines
+39
to
+51
There was a problem hiding this comment. 이부분 또한 아래와 같이 코드를 변경할 수 있을 것 같아요! 또한 alt태그는 img태그가 정상적으로 작동하지 않았을 때와 스크린리더 사용자에게 도움을 줄 수 있으니 각각 img에 대한 정보를 넣어주는 것이 올바른 사용법 같습니다 ㅎㅎ There was a problem hiding this comment. 오오 맞습니다 alt태그는 사용자에게 도움을 준다... 마음에 새기기.... 🥇 |
||
| <div class="banner"> | ||
| <img src="img/a1.jpg" alt="acc"/> | ||
| <img src="img/a2.jpg" alt="acc"/> | ||
| <img src="img/a3.jpg" alt="acc"/> | ||
| <img src="img/s1.jpg" alt="skirt"/> | ||
| <img src="img/s2.jpg" alt="skirt"/> | ||
| <img src="img/s3.jpg" alt="skirt"/> | ||
| <img src="img/t1.jpg" alt="T-shirt"/> | ||
| <img src="img/t2.jpg" alt="T-shirt"/> | ||
| <img src="img/t3.jpg" alt="T-shirt"/> | ||
| <img src="img/t4.jpg" alt="T-shirt"/> | ||
| <img src="img/t5.jpg" alt="T-shirt"/> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h1 id="all">전체</h1> | ||
| <div class="container"> | ||
| <span> | ||
| <img src="img/a1.jpg" alt="acc"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>강아지 폰케이스</h3> | ||
| <h3>5,900</h3> | ||
|
Comment on lines
+71
to
+73
There was a problem hiding this comment. 내용 파트에는 영역의 제목 태그인 h3보다는 p와 같은 다른 태그를 사용하면 어떨까요?
Comment on lines
+71
to
+73
There was a problem hiding this comment. 저도 같은 생각입니다 p태그보다는 g3태그가 조금 더 의미론적으로 적절할 것 같네요! |
||
| </span> | ||
| <span> | ||
| <img src="img/a2.jpg" alt="acc"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>쪼꼬미 미니 리본핀</h3> | ||
| <h3>6,900</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/a3.jpg" alt="acc"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>행운의 네잎 클로버 지비츠</h3> | ||
| <h3>12,900</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/s1.jpg" alt="skirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>레거시 플리츠 스커트</h3> | ||
| <h3>26,040</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/s2.jpg" alt="skirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>리본 다트 밴딩 미니스커트</h3> | ||
| <h3>13,850</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/s3.jpg" alt="skirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>스위티 프릴 스커트</h3> | ||
| <h3>16,740</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/t1.jpg" alt="T-shirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>프릴 슈 블라우스</h3> | ||
| <h3>22,620</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/t2.jpg" alt="T-shirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>인디 잔꽃 원피스 세트</h3> | ||
| <h3>37,900</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/t3.jpg" alt="T-shirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>레이어드 뷔스티에 미니원피스</h3> | ||
| <h3>16,020</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/t4.jpg" alt="T-shirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>프린지 후크 트위드자켓</h3> | ||
| <h3>38,610</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/t5.jpg" alt="T-shirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>리본 오프숄더</h3> | ||
| <h3>37,640</h3> | ||
| </span> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h1 id="t">상의</h1> | ||
| <div class="container"> | ||
| <span> | ||
| <img src="img/t1.jpg" alt="T-shirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>프릴 슈 블라우스</h3> | ||
| <h3>22,620</h3> | ||
| </span> | ||
|
Comment on lines
+140
to
+145
There was a problem hiding this comment. span태그는 인라인 태그라 이렇게 컨테이너처럼 쓰려면 div태그를 사용하시는 것이 적절합니다! There was a problem hiding this comment. 오 아티클 태그를 사용하고 싶었는데 잘 모르겠어서 망설이고 있었는데.. 요런느낌에 쓰면 되는 거군요!! 감사합니다아 😄 |
||
| <span> | ||
| <img src="img/t2.jpg" alt="T-shirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>인디 잔꽃 원피스 세트</h3> | ||
| <h3>37,900</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/t3.jpg" alt="T-shirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>레이어드 뷔스티에 미니원피스</h3> | ||
| <h3>16,020</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/t4.jpg" alt="T-shirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>프린지 후크 트위드자켓</h3> | ||
| <h3>38,610</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/t5.jpg" alt="T-shirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>리본 오프숄더</h3> | ||
| <h3>37,640</h3> | ||
| </span> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h1 id="sk">하의</h1> | ||
|
There was a problem hiding this comment. 문서 전체의 제목이 아니기때문에 h2태그 등으로 위계를 낮추면 더 좋을 것 같아요~ |
||
| <div class="container"> | ||
| <span> | ||
| <img src="img/s1.jpg" alt="skirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>레거시 플리츠 스커트</h3> | ||
| <h3>26,040</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/s2.jpg" alt="skirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>리본 다트 밴딩 미니스커트</h3> | ||
| <h3>13,850</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/s3.jpg" alt="skirt"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>스위티 프릴 스커트</h3> | ||
| <h3>16,740</h3> | ||
| </span> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h1 id="acc">악세서리</h1> | ||
| <div class="container"> | ||
| <span> | ||
| <img src="img/a1.jpg" alt="acc"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>강아지 폰케이스</h3> | ||
| <h3>5,900</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/a2.jpg" alt="acc"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>쪼꼬미 미니 리본핀</h3> | ||
| <h3>6,900</h3> | ||
| </span> | ||
| <span> | ||
| <img src="img/a3.jpg" alt="acc"/> | ||
| <h3 class="heart">🤍</h3> | ||
| <h3>행운의 네잎 클로버 지비츠</h3> | ||
| <h3>12,900</h3> | ||
| </span> | ||
| </div> | ||
| </section> | ||
| </main> | ||
|
|
||
| <footer> | ||
| <h1>!여기서 재미있는 사실!</h1> | ||
|
|
||
| <h1>...이것은 실제 저의 찜목록들을 가져온 것입니다...</h1> | ||
| </footer> | ||
| </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.
https://fonts.google.com/icons
https://fontawesome.com/icons
이런 곳에 귀여운 아이콘들이 많으니 구경해 보시죠!
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.
배치로 인해 h1태그를 두번으로 나눠서 사용하신 것 같은데 아이콘을 img나 svg로 사용하시는 것이 좋을 것 같아요!
h1태그는 SEO에 가장 중요한 태그 중 하나인 데 하트가 검색엔진으로 잡히면 SEO에서 좋지 않은 결과를 보일 것 같습니다!