[1주차 기본/심화/생각 과제] 웨비의 사진관 📸 , 가계부 💸 #1
Conversation
week1/assignment/가계부 💸/index.html
Outdated
| <p class="subtitle">나의 자산</p> | ||
| <b id="money">3,432,000</b> | ||
| <div id="today"> | ||
| <img src="./img/triangle-up.png" alt="위쪽화살표"/> |
| </section> | ||
| <section id="main"> | ||
| <p class="subtitle">내역 리스트</p> | ||
| <div id="date"> |
| 🍣 🍶 🧤 🍡 삿포로 여행 계획 🍣 🍶 🧤 🍡 | ||
| </header> | ||
| <section id="preview"> | ||
| <img src="./img/biei.jpg" alt="비에이"/> |
| #day3 .gallery .item:nth-child(1) { | ||
| grid-column: span 2; | ||
| grid-row: span 1; | ||
| background: no-repeat center/cover url('./img/nikka.png'); |
week1/assignment/웨비의 사진관 📸/style.css
Outdated
|
|
||
| #day3 .gallery{ | ||
| display: grid; | ||
| grid-template-columns: repeat(4, 1fr); |
| <link rel="shortcut icon" href="./img/favicon.ico"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
There was a problem hiding this comment.
파비콘 이라고 웹브라우저에서 타이틀 옆에 아이콘 이미지를 추가하는 거에요!!
| <input type="checkbox" checked="on" id="type-income" /> | ||
| <label for="type-income">수입</label> | ||
| <input type="checkbox" checked="on" id="type-spending" /> | ||
| <label for="type-spending">지출</label> |
There was a problem hiding this comment.
checkbox와 수입,지출을 label 태그를 써서
수입, 지출만 눌러도 check 되게 만드는 것 배워갑니당
week1/assignment/가계부 💸/index.html
Outdated
| <ol reversed> | ||
| <li> | ||
| <p class="tag">식비</p> | ||
| <p class="name">매운향솥</p> | ||
| <p class="price spending">27000</p> | ||
| <button class="delete">✕</button> |
There was a problem hiding this comment.
li 태그 안에 p태그를 쓰면 어째서.. 도대체.. 왜? 한줄에 다 쓰이는건지 궁금합니다.
(p태그는 block 요소라고 들었는데..?)
There was a problem hiding this comment.
li 태그에 display:flex 를 주었기 때문에 안의 요소들이 가로로 정렬되는 것입니당 😃
|
내가 봐도 이해가 쏙쏙 되는 코드라서 |
| <div class="gallery"> | ||
| <div class="left"> | ||
| <img src="./img/ryokan2.jpg" alt="료칸" /> | ||
| </div> | ||
| <div class="right"> | ||
| <img src="./img/jozankei.JPG" alt="조잔케이 온천" /> | ||
| <img src="./img/tako.JPG" alt="타코야끼" /> | ||
| <img src="./img/ramen2.jpg" alt="라멘" /> | ||
| <img src="./img/odori.jpg" alt="오도리공원" /> | ||
| </div> |
There was a problem hiding this comment.
전체에 flex에
큰 사진 1개 flex, 작은 사진 4개 flex를 나눠서 하는거 진짜 잘 배워갑니다
| <div class="gallery"> | ||
| <div class="item" title="니카상"></div> | ||
| <div class="item" title="료칸"></div> | ||
| <div class="item" title="맥주박물관"></div> | ||
| <div class="item" title="대관람차"></div> | ||
| <div class="item" title="자판기"></div> |
There was a problem hiding this comment.
위에서 썼던 class="gallery"를 가져와서
item으로 속성을 주고 같은 title을 하면 같은 사진이 넣어지는 건가요?
There was a problem hiding this comment.
아 그건 아니구 제가 이부분은 이미지를 css에서 background 이미지로 넣었는데
접근성을 높이기 위한 과정에서 background이미지로 넣은 것은 대체 텍스트를 어떻게 넣어야 하는지 찾아봤어용
https://stackoverflow.com/questions/4216035/css-background-image-alt-attribute
이 글을 참고했는데 포함된 div에 title속성을 넣는 것으로 한다고 하더라고요!
즉, 여기서 title은 div에 들어가는 이미지에 대한 대체 텍스트라고 생각해주시면 됩니다~!
There was a problem hiding this comment.
오호~! background로 넣었을 때 접근성까지 고려하다니,, 최고입니당 -! 그런데 여기서 img 태그를 이용하지 않은 이유가 있을까요?
| <img src="./img/biei.jpg" alt="비에이" /> | ||
| <img src="./img/vending.JPG" alt="자판기" /> | ||
| <img src="./img/tv-tower.png" alt="tv타워" /> | ||
| <img src="./img/nikka.png" alt="니카상" /> | ||
| <img src="./img/ryokan2.jpg" alt="료칸" /> | ||
| <img src="./img/otaru-canal.jpg" alt="오타루운하" /> | ||
| <img src="./img/ningle-terrace.jpg" alt="닝구르테라스" /> | ||
| <img src="./img/ski.jpg" alt="스키장" /> | ||
| <img src="./img/sarutama.jpg" alt="사루타마온천" /> |
| #preview img:last-child { | ||
| margin-right: 0px; | ||
| } |
There was a problem hiding this comment.
엇 안붙여도 되는데 습관인거 같아요 ㅋㅋㅋ 🥲
week1/assignment/웨비의 사진관 📸/style.css
Outdated
| .index { | ||
| position: sticky; | ||
| top: 0; | ||
| width: 1000px; | ||
| height: 60px; | ||
| margin: 10px auto; | ||
| text-align: center; | ||
| line-height: 60px; | ||
| background-color: #AAC2DD; | ||
| border-radius: 8px; | ||
| } |
There was a problem hiding this comment.
이미지에 hover 했을 때 요 부분이 가려지는데 어떻게 해결해야하나용..? 저도 똑같은 문제를 겪어서..🥺
혹시 좋은 방법 있으면 공유 해주세욤~!
There was a problem hiding this comment.
z-index 사용해서 이미지보다 위로 배치하면 됩니다 😃 생각 못했는데 반영해야겠다!!
| #day3 .gallery .item:nth-child(1) { | ||
| grid-column: span 2; | ||
| grid-row: span 1; | ||
| background: no-repeat center/cover url('./img/nikka.png'); |
| margin: auto; | ||
| padding: 10px; | ||
| background-color: #f8f8f8; | ||
| } |
There was a problem hiding this comment.
반응형 디자인으로 하려면 px단위 보다는 rem같은 단위를 사용하면 어떨까 하고 살짝쿵 제안해봅니다..
There was a problem hiding this comment.
리뷰보고 한번 찾아봤어요 😸
https://yeoninim.tistory.com/38
margin / padding는 rem으로 할 경우 의도치 않은 문제가 발생할 수도 있다고 하네요!!
미디어쿼리를 사용할 때는 정말 편하겠네용 ㅎㅎ 좋은 의견 너무 감사합니다 🖤
week1/assignment/가계부 💸/index.html
Outdated
| <label for="type-spending">지출</label> | ||
| </div> | ||
| <div id="history"> | ||
| <ol reversed> |
There was a problem hiding this comment.
<ul> 랑 고민하다가 내역에도 순서라는 의미가 있다고 생각해서 <ol>로 했어요!!
근데 다시 생각해보니 숫자를 안보여주니까 <li> 가 맞는 것 같기두,,,
| } | ||
|
|
||
| #history .tag { | ||
| flex: 1; |
| #history .income::before { | ||
| content: '+'; | ||
| } | ||
|
|
||
| #history .spending::before { | ||
| content: '-'; | ||
| } |
| <input type="checkbox" checked="on" id="type-income" /> | ||
| <label for="type-income">수입</label> | ||
| <input type="checkbox" checked="on" id="type-spending" /> |
There was a problem hiding this comment.
checked 속성은 boolean값이라서 속성을 주는 것 자체가 true를 의미해요! 그래서 요렇게만 쓰시면 된답니당!
| <input type="checkbox" checked="on" id="type-income" /> | |
| <label for="type-income">수입</label> | |
| <input type="checkbox" checked="on" id="type-spending" /> | |
| <input type="checkbox" checked id="type-income" /> | |
| <label for="type-income">수입</label> | |
| <input type="checkbox" checked id="type-spending" /> |
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| width: 100vw; | ||
| min-height: 100vh; | ||
| margin: auto; | ||
| padding: 10px; | ||
| background-color: #f8f8f8; |
There was a problem hiding this comment.
css 속성 간 개행을 해주면 좀 더 가독성에 좋을 것 같아요! 속성 나열 순서는 통일되게 이미 잘 되어 있어서 너무 보기 편하네용 최고 💌
| cursor: pointer; | ||
| } | ||
|
|
||
| #money-type input[type=checkbox]:checked+label { |
|
|
||
| #money-type input[type=checkbox]:checked+label { | ||
| margin-left: 10px; | ||
| padding: 5px 20px 5px 20px; |
There was a problem hiding this comment.
| padding: 5px 20px 5px 20px; | |
| padding: 5px 20px; |
이렇게 한 번에 가능하겠네요 !! ㅎㅎ
| button { | ||
| cursor: pointer; | ||
| } |
| #history .income::before { | ||
| content: '+'; | ||
| } | ||
|
|
||
| #history .spending::before { | ||
| content: '-'; | ||
| } |
| <ul> | ||
| <a href="#day1"> | ||
| <li>DAY 1️⃣</li> | ||
| </a> | ||
| <a href="#day2"> | ||
| <li>DAY 2️⃣</li> | ||
| </a> | ||
| <a href="#day3"> | ||
| <li>DAY 3️⃣</li> | ||
| </a> | ||
| </ul> |
There was a problem hiding this comment.
| <ul> | |
| <a href="#day1"> | |
| <li>DAY 1️⃣</li> | |
| </a> | |
| <a href="#day2"> | |
| <li>DAY 2️⃣</li> | |
| </a> | |
| <a href="#day3"> | |
| <li>DAY 3️⃣</li> | |
| </a> | |
| </ul> | |
| <ul> | |
| <li > | |
| <a href="#day1">DAY 1️⃣</a> | |
| </li > | |
| <li > | |
| <a href="#day2">DAY 2️⃣</a> | |
| </li> | |
| <li > | |
| <a href="#day3">DAY 3️⃣</a> | |
| </li> | |
| </ul> |
이렇게 묶어주어야 각 a 태그가 각각의 list에 속하는구나~! 의 구조가 되지 않을까용?
| <div class="gallery"> | ||
| <div class="item" title="니카상"></div> | ||
| <div class="item" title="료칸"></div> | ||
| <div class="item" title="맥주박물관"></div> | ||
| <div class="item" title="대관람차"></div> | ||
| <div class="item" title="자판기"></div> |
There was a problem hiding this comment.
오호~! background로 넣었을 때 접근성까지 고려하다니,, 최고입니당 -! 그런데 여기서 img 태그를 이용하지 않은 이유가 있을까요?
| @font-face { | ||
| font-family: 'Pretendard'; | ||
| src: url('./font/Pretendard-Medium.otf') format('opentype'); | ||
| } |
| * { | ||
| margin: 0px; | ||
| padding: 0px; | ||
| font-family: Pretendard, sans-serif; | ||
| } | ||
|
|
||
| html { | ||
| background-color: #DCE4ED; | ||
| scroll-behavior: smooth; | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| p { | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| img { | ||
| object-fit: cover; | ||
| } |
There was a problem hiding this comment.
이런 것들은 reset.css로 빼서 설정해주는 방법도 좋을 것 같아요 ㅎㅎ
또는 Eric Meyer’s CSS Reset참고!
| <section id="main"> | ||
| <h2 class="subtitle">내역 리스트</h2> | ||
| <div id="date"> | ||
| <button id="prev-day">◀</button> |
There was a problem hiding this comment.
button 태그는 reset, button, submit 세가지의 type을 가져요!
default는 submit이므로, 이렇게 type을 button으로 명시해주는 게 좋답니당!
✨ 구현 기능 명세
웨비의 사진관 📸
기본 과제
section (preview) flex를 통해 일정한 간격으로 배치
section (preview) width값을 벗어나면 가로 스크롤 구현
nav 각 목차 hover시 underline과 색상 변경
nav 목차를 클릭하면 해당 목차가 있는 곳으로 이동
section (img) 목차는 sticky로 화면 상단에 닿으면 고정
section (1) flex 를 이용해서 같은 크기의 사진들로 나열
section (1) width를 넘으면 다음줄로 넘어가도록 구현
section (2) flex 를 이용
section (3) grid 를 이용
top 버튼을 누르면 최상단으로 이동
심화 과제
스크롤 시 부드럽게 이동
스크롤바 커스텀
섹션 반응형으로 구현
이미지 hover 애니메이션 추가
이미지가 영역에 맞게 잘리도록 구현
가계부 💸
기본 과제
나의 자산 박스 위치와 내부 요소들 모두 중앙 정렬
날짜 - 좌 우로 누를 수 있는 버튼과, 그 가운데 오늘의 날짜 배치
체크박스로 수입/지출 필터링 버튼 구현
내역리스트 flex로 배치
내역리스트 일정 height 초과시 리스트 영역 내에서 스크롤
심화 과제
체크박스 커스텀
반응형 구현
내역리스트 일정 길이보다 길어질 경우 말줄임 처리
이미지 hover 애니메이션 추가
이미지가 영역에 맞게 잘리도록 구현
생각과제 💭
생각 과제
웹 접근성
검색 엔진 최적화
💎 PR Point
🥺 소요 시간, 어려웠던 점
8h🌈 구현 결과물
웨비의 사진관 📸
https://glittering-faloodeh-ed02f9.netlify.app/
gallery.mov
가계부 💸
https://652708adc634f2184805860d--fantastic-panda-7b760c.netlify.app/
money.mov