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
73 changes: 37 additions & 36 deletions week1/assign3(myShop)/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,11 @@ <h3>ETC</h3>
<header>
<h2>WishList 1</h2>
</header>
<div>
<p class="cards__tag">#디젤피카부</p>
<p class="cards__tag">#태그길게길게넘치나안넘치나테스트</p>
</div>
<ul class="cards__tagwrapper">
<li class="cards__tag">#디젤피카부</li>
<!-- 넘치는 태그는 안보이게 처리-->
<li class="cards__tag">#태그길게길게넘치나안넘치나테스트</li>
Comment on lines +65 to +68
Copy link
Member

Choose a reason for hiding this comment

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

요거 ::before content사용하면 #없앨수이써용 ㅎㅎ

Copy link
Contributor Author

Choose a reason for hiding this comment

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

오 그런 방법이 있었구나! 이번 주 과제 하면서 고쳐볼겡 고마오 🫶🏻

</ul>
<img class="cards__img" src="./img/disel.jpg" alt="디젤 반팔티" />
Copy link

Choose a reason for hiding this comment

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

img alt 작성할 때 html에서는 하이픈(-)을 띄어쓰기로 인식하니까 띄어쓰기 대신에 하이픈 사용해주는게 웹 접근성을 고려했을 때 더 좋은 방법이라고 하네요!!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

오 그렇구낭 !! 바로 수정해야겠다 고마어

<button class="cards__button">
<i class="fa-solid fa-heart"></i>
Expand All @@ -77,10 +78,10 @@ <h2>WishList 1</h2>
<header>
<h2>WishList 2</h2>
</header>
<div class="cards__tags">
<p class="cards__tag">#가젤볼드핑크글로우</p>
<p class="cards__tag">#사고싶은데 못구하는거</p>
</div>
<ul class="cards__tagwrapper">
Copy link

Choose a reason for hiding this comment

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

tag를 div로만 생각했는데 li태그가 훨씬 맞겠네요!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

마자 나도 span으로 했다가 li로 고쳤었어 !!

<li class="cards__tag">#가젤볼드핑크글로우</li>
<li class="cards__tag">#사고싶은데못구하는거</li>
</ul>
<img class="cards__img" src="./img/addidas.jpg" alt="아디다스 신발" />
<button class="cards__button">
<i class="fa-solid fa-heart"></i>
Expand All @@ -92,10 +93,10 @@ <h2>WishList 2</h2>
<header>
<h2>WishList 3</h2>
</header>
<div>
<p class="cards__tag">#마뗑킴가방</p>
<p class="cards__tag">#실내화주머니</p>
</div>
<ul class="cards__tagwrapper">
<li class="cards__tag">#마뗑킴가방</li>
<li class="cards__tag">#실내화주머니</li>
</ul>
<img class="cards__img" src="./img/matinkim.jpg" alt="마뗑킴 가방" />
<button class="cards__button">
<i class="fa-solid fa-heart"></i>
Expand All @@ -107,10 +108,10 @@ <h2>WishList 3</h2>
<header>
<h2>WishList 4</h2>
</header>
<div>
<p class="cards__tag">#카시나덩크</p>
<p class="cards__tag">#리셀가넘비싸요</p>
</div>
<ul class="cards__tagwrapper">
<li class="cards__tag">#카시나</li>
<li class="cards__tag">#덩크</li>
</ul>
<img class="cards__img" src="./img/kasina.jpg" alt="카시나 신발" />
<button class="cards__button">
<i class="fa-solid fa-heart"></i>
Expand All @@ -122,10 +123,10 @@ <h2>WishList 4</h2>
<header>
<h2>WishList 5</h2>
</header>
<div>
<p class="cards__tag">#aeae모자</p>
<p class="cards__tag">#재입고해주세요</p>
</div>
<ul class="cards__tagwrapper">
<li class="cards__tag">#aeae모자</li>
<li class="cards__tag">#재입고해주세요</li>
</ul>
<img class="cards__img" src="./img/aeae.jpg" alt="aeae 모자" />
<button class="cards__button">
<i class="fa-solid fa-heart"></i>
Expand All @@ -137,10 +138,10 @@ <h2>WishList 5</h2>
<header>
<h2>WishList 6</h2>
</header>
<div>
<p class="cards__tag">#덩크남고래</p>
<p class="cards__tag">#범고래는질려요</p>
</div>
<ul class="cards__tagwrapper">
<li class="cards__tag">#덩크남고래</li>
<li class="cards__tag">#범고래는질려요</li>
</ul>
<img class="cards__img" src="./img/nike.jpg" alt="나이키 덩크" />
<button class="cards__button">
<i class="fa-solid fa-heart"></i>
Expand All @@ -152,10 +153,10 @@ <h2>WishList 6</h2>
<header>
<h2>WishList 7</h2>
</header>
<div>
<p class="cards__tag">#베아니트탑</p>
<p class="cards__tag">#비비안웨스트우드🫶🏻</p>
</div>
<ul class="cards__tagwrapper">
<li class="cards__tag">#베아니트탑</li>
<li class="cards__tag">#비비안웨스트우드🫶🏻</li>
</ul>
<img
class="cards__img"
src="./img/vivien.jpg"
Expand All @@ -171,10 +172,10 @@ <h2>WishList 7</h2>
<header>
<h2>WishList 8</h2>
</header>
<div>
<p class="cards__tag">#킨재스퍼락</p>
<p class="cards__tag">#예쁘지만안어울릴듯</p>
</div>
<ul class="cards__tagwrapper">
<li class="cards__tag">#킨재스퍼락</li>
<li class="cards__tag">#예쁘지만안어울릴듯</li>
</ul>
<img class="cards__img" src="./img/keen.jpg" alt="킨 신발" />
<button class="cards__button">
<i class="fa-solid fa-heart"></i>
Expand All @@ -186,10 +187,10 @@ <h2>WishList 8</h2>
<header>
<h2>WishList 9</h2>
</header>
<div>
<p class="cards__tag">#포터탱커가방</p>
<p class="cards__tag">#일본에서사올걸</p>
</div>
<ul class="cards__tagwrapper">
<li class="cards__tag">#포터탱커가방</li>
<li class="cards__tag">#일본에서사올걸</li>
</ul>
<img class="cards__img" src="./img/poter.jpg" alt="포터 가방" />
<button class="cards__button">
<i class="fa-solid fa-heart"></i>
Expand Down
18 changes: 15 additions & 3 deletions week1/assign3(myShop)/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,11 +181,23 @@ main {
margin-bottom: 0.7rem;
}

.cards__tagwrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
overflow: hidden;
word-break: keep-all;
Copy link
Member

Choose a reason for hiding this comment

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

꺄웅!! 넘 야무진데?!

width: 9rem;
height: 0.7rem;
margin: 0.5rem 0;
}

.cards__tag {
display: inline-block;
font-size: 0.7rem;
width: 9rem;
white-space: nowrap;
overflow: hidden;
margin: 0 0.2rem;
width: fit-content;
text-align: center;
}

Expand Down