[ 1주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 #3
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,6 +8,7 @@ | |
| height:300px; | ||
| justify-content: center; | ||
| gap:10px; | ||
| position: relative; | ||
| } | ||
| .big{ | ||
| width:50%; | ||
|
|
||
|
There was a problem hiding this comment.
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| header { | ||
| background-color: palegoldenrod; | ||
| color: black; | ||
| text-align: center; | ||
| line-height: 2; | ||
|
There was a problem hiding this comment. 혹시 모두 |
||
| margin-bottom: 10px; | ||
| font-weight: 500; | ||
| } | ||
| h3{ | ||
| color:black; | ||
|
|
@@ -13,6 +15,8 @@ h4{ | |
| position: sticky; | ||
| background-color: rgb(245, 208, 214); | ||
| line-height: 2; | ||
| top:0; | ||
| z-index:1; | ||
| } | ||
| /*position: sticky;*/ | ||
|
There was a problem hiding this comment. 저도 주석을 실수로 올리는 경우가 많은데요..!ㅎㅎ 필요하지 않은 주석은 제거하고 PR 올려주는 게 좋습니다! |
||
| body { | ||
|
|
@@ -21,7 +25,8 @@ body { | |
| } | ||
|
|
||
| .prSction{ | ||
|
There was a problem hiding this comment. CSS 네이밍 규칙에 맞게 줄임말보다는 직관적이고 이해하기 쉬운 클래스명을 사용하면 나중에 더 복잡해졌을 때 작업하기 수월해요! |
||
| overflow-x: auto; | ||
| overflow-y: hidden; | ||
| display: flex; | ||
| width: 100%; height: 100%; | ||
|
There was a problem hiding this comment. 코드 정렬할 때 참고하면 좋은 자료 첨부합니다! 다만 너무 엄격하게 전부 지키려고 하면 오히려 효율이 떨어질 수 있어서 본인에게 맞는 방식으로 큼직하게 나눠주면 나중에 리팩토링할 때나 코드리뷰할 때도 편리하답니다😊 |
||
| white-space: nowrap; | ||
|
|
@@ -33,9 +38,8 @@ body { | |
| /* 각 이미지의 너비 설정 */ | ||
| margin-right: 10px; | ||
| /* 이미지 간 간격 설정 */ | ||
| flex-wrap: nowrap; | ||
| } | ||
| /* 추가적인 스타일링을 위한 예시 */ | ||
| .prItem img { | ||
| width: 200px; | ||
|
|
@@ -65,9 +69,12 @@ ul li a:hover { | |
| text-decoration: underline; /* hover 시 밑줄 표시 */ | ||
| cursor: pointer; | ||
| } | ||
| footer{ | ||
| height:10vh; | ||
| background-color: #efc9e6; | ||
| } | ||
| .footerContent p{ | ||
| text-align: center; | ||
| } | ||
|
|
||
| /* Top 버튼 스타일 */ | ||
|
|
@@ -83,6 +90,6 @@ ul li a:hover { | |
| font-size: 16px; | ||
| } | ||
|
|
||
| #topButton:hover { | ||
| background-color: #afc488; | ||
| } | ||
|
There was a problem hiding this comment. 레포에 안 올라가는 이런 파일들은 .gitignore 파일을 추가해서 깔끔하게 관리하는 걸 추천드려요😊 |
|
There was a problem hiding this comment. 이전 커밋에 있는 애들이 리뷰가 한 줄씩 안 달리나봐요..! lang 설정이 영어로 되어 있어서 |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,14 +11,14 @@ | |
| <title>김밍밍</title> | ||
|
There was a problem hiding this comment. title은 SEO를 고려해서 웹사이트 주제와 관련 있는 제목으로 수정하면 좋을 것 같아요:) |
||
| </head> | ||
| <body> | ||
| <header>민영이 가계부**</header> | ||
| <div class="container"> | ||
| <div class="stylebox"> | ||
| <h3>나의 자산</h3> | ||
|
There was a problem hiding this comment. heading태그는 h1부터 순차적으로 써주는게 원칙이랍니당! |
||
| <p>159400</p> | ||
| <div class="inout"> | ||
| <div class="income">+: 250,000원</div> | ||
| <div class="expense">-: 90,600원</div> | ||
|
There was a problem hiding this comment. 2주차 과제 때 숫자가 바뀌도록 하게 되면 ``span |
||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
@@ -41,45 +41,74 @@ <h3>나의 자산</h3> | |
| <div class="category">식비</div> | ||
| <div class="description">스타벅스</div> | ||
| <div class="amountM">- 10,000원</div> | ||
| <div class="deleBtn"> | ||
| <button id="deleteBtn">x</button> | ||
| </div> | ||
| </div> | ||
| <div class="items"> | ||
| <div class="category">용돈</div> | ||
|
There was a problem hiding this comment.
|
||
| <div class="description">고모부</div> | ||
| <div class="amountP">+ 250,000원</div> | ||
| <div class="deleBtn"> | ||
|
|
||
| <button id="deleteBtn">x</button> | ||
| </div> | ||
| </div> | ||
| <div class="items"> | ||
| <div class="category">식비</div> | ||
| <div class="description">스타벅스</div> | ||
| <div class="amountM">- 5,000원</div> | ||
|
There was a problem hiding this comment.
|
||
| <div class="deleBtn"> | ||
| <button id="deleteBtn">x</button> | ||
| </div> | ||
| </div> | ||
| <div class="items"> | ||
| <div class="category">서적</div> | ||
| <div class="description">자구교재</div> | ||
| <div class="amountM">- 50,000원</div> | ||
| <div class="deleBtn"> | ||
| <button id="deleteBtn">x</button> | ||
| </div> | ||
| </div> | ||
| <div class="items"> | ||
| <div class="category">식비</div> | ||
| <div class="description">냉우동</div> | ||
| <div class="amountM">- 18,000원</div> | ||
| <div class="deleBtn"> | ||
| <button id="deleteBtn">x</button> | ||
| </div> | ||
| </div> | ||
| <div class="items"> | ||
| <div class="category">쇼핑</div> | ||
| <div class="description">머리띠</div> | ||
| <div class="amountM">- 4,900원</div> | ||
| <div class="deleBtn"> | ||
| <button id="deleteBtn">x</button> | ||
| </div> | ||
| </div> | ||
| <div class="items"> | ||
| <div class="category">식비</div> | ||
| <div class="description">초코칩</div> | ||
| <div class="amountM">- 1,500원</div> | ||
| <div class="deleBtn"> | ||
| <button id="deleteBtn">x</button> | ||
| </div> | ||
| </div> | ||
| <div class="items"> | ||
| <div class="category">학용품</div> | ||
| <div class="description">화이트</div> | ||
| <div class="amountM">- 1,200원</div> | ||
| <div class="deleBtn"> | ||
| <button id="deleteBtn">x</button> | ||
| </div> | ||
| </div> | ||
| <!-- 다른 내역 항목들 --> | ||
| </div> | ||
| <footer> | ||
| <div class="footerContent"> | ||
| <button id="add"><div style="cursor:pointer;">추가</div> | ||
|
There was a problem hiding this comment. 스타일은 css 파일을 만들어 놓았으니 css 파일들에 몰아 넣으면 더 좋을 것 같아요✨ |
||
| </button> | ||
| </div> | ||
| </footer> | ||
| </body> | ||
|
|
||
| </html> | ||
/wk3/1.png){kind=link}
/wk3/2.png){kind=link}
/wk3/3.png){kind=link}
/wk3/4.png){kind=link}
/wk3/5.png){kind=link}
|
There was a problem hiding this comment. 찾아보니 CSS 파일을 하나 만드는 것과 여러 개로 쪼개서 사용하는 것은 장단점이 있어 의견이 분분한 것 같아요. 쪼개면 가독성이 좋지만 html 안에서 3개 이상의 stylesheet를 연결하면 부하가 올 수 있어서 보통 |
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.
별명이 밍밍인가요..? 너무 귀엽다,,💛