[당근마켓 클론코딩] 류승찬 미션 제출합니다. #4
Conversation
winternuary
requested review from
anys34,
kimsiyeon0223,
seonghoon07 and
winternuary
|
아이공 너무너무 수고했습니다ㅠㅠㅠ 되도록이면 margin을 지양하고 padding을 지향하도록 합시다!! 그리고 flex에 대해 공부해주세용 |
mission/index.html
Outdated
| <p style="color:#FF6F0F; font-weight:bold;">동네생활<br><br></p> | ||
| <h1 style="font-size:45px;">이웃만 아는<br>동네 정보와 이야기</h1> | ||
| <p><br>우리동네의 다양한 정보와 이야기를<br>공감과 댓글로 나누어요.<br></p> | ||
| <div class="picpr"> | ||
| <div class="pic" style="background-image:url(../assets/circle.png); background-size: cover;"></div> | ||
| <div class="pic" style="background-image:url(../assets/question.png); background-size: cover;"></div> | ||
| <div class="pic" style="background-image:url(../assets/lost.png); background-size:40px; background-repeat: no-repeat; background-position:5px;"></div> |
|
과제 너무 수고 많으셨습니다! 질문 해주셨을 때 저 진짜 감동 받았잖아요~ 앞으로도 질문 많이 하기로.. 약속.. 전체적인 코드를 봤을 때 태그안에 스타일을 지정하는 인라인 스타일은 지양하는 것이 좋습니다! 꼭 기억해주세요 열심히 임해주셔서 감사합니다 앞으로도 화이팅해요!! |
mission/index.html
Outdated
| <input type="button" value="Google Play"> | ||
| <input type="button" value="App Store"> | ||
| <input type="button" value=" Google Play" style="background-image: url(../assets/GooglePlay.png);"> | ||
| <input type="button" value=" App Store" style="background-image: url(../assets/AppStore.png); background-position:31px;"> |
There was a problem hiding this comment.
인라인 스타일은 지양해주세요~
밑에도 다 고쳐주세용
mission/index.html
Outdated
| <div> | ||
| <p style="color:#FF6F0F; font-weight:bold;">중고거래<br><br></p> | ||
| <h1 style="font-size:45px;">믿을만한<br>이웃 간 중고거래</h1> | ||
| <p><br>동네 주민들과 가깝고 따뜻한 거래를<br>지금 경험해보세요.<br><br></p> |
mission/style.css
Outdated
| margin-right:5px; | ||
| font-size: 16px; | ||
| padding-right: 20px; | ||
| padding-left: 20px; |
There was a problem hiding this comment.
padding: top right botton left;처럼
padding : 0 20px;이렇게 코드를 줄여볼 수 있을 것 같네요!
mission/style.css
Outdated
| border-radius: 12px; | ||
| border-width: 1px; | ||
| border-style: solid; | ||
| border-color: rgb(241, 241, 241); |
There was a problem hiding this comment.
border : 1px solid rgb(241, 241, 241);로 border-width와 style, color를 한줄로 작성할 수 있습니다~
mission/index.html
Outdated
| <input type="button" value="당근 동네업체 보기"> | ||
| </div> | ||
| <div> | ||
| <img src="../assets/section4.png" height="700px" style="position:relative; top: -550px; left:400px;"> |
There was a problem hiding this comment.
position은 되도록이면 지양해주세요~
인라인 스타일도 지양해주세요!
<img src="../assets/section4.png" height="700px" style="position:relative; top: -550px; left:400px;" />위와 같이 셀프 클로징 태그를 사용해주세용!
https://jake-seo-dev.tistory.com/461
mission/style.css
Outdated
| } | ||
| #sec4 > div > input[type=button]{ | ||
| width: auto; | ||
| height: 50px; |
There was a problem hiding this comment.
width와 height는 절대적인 단위인 px보다는 vw, vh, rm, rem 와 같은 단위들을 알아보면 좋을 것 같습니다~
밑 링크를 참고해주세요!!!
https://velog.io/@uni/CSS-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9%EC%9D%84-%EB%A7%8C%EB%93%A4%EB%95%8C-%EC%96%B4%EB%96%A4-%EB%8B%A8%EC%9C%84%EB%A5%BC-%EC%93%B0%EB%8A%94%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C
This comment was marked as spam.
This comment was marked as spam.
Sorry, something went wrong.
|
피드백 주신 내용을 반영하여 수정 완료했습니다. |
4 participants
흥미로웠던 점 : 과제를 하다 막히는 부분이 있으면 인터넷을 찾아보거나 선배에게 물어보았다. 이렇게 찾아보며 풀리지 않던 문제를 해결 했을 때
뿌듯함과 프론트엔드에 대한 흥미를 느꼈다.
어려웠던 점 : json 데이터를 fetch()함수를 써서 바로 변수에 담으니 반환 값이 promise 객체로 나왔다. 그래서 이를 객체 데이터로 사용할 수 없었다. fetch함수 안에서 map함수를 사용하여 이 문제를 해결하였다. 이 방법을 찾기까지의 과정이 힘들었다..
궁금한 점 : 웹에서 f12를 누르면 정렬이 이상해지는 문제를 어떻게 해결해야 할 지 모르겠다...
이번 과제를 하며 정말 많은 것을 배웠습니다. 이때까지 수업시간에 못따라 갔던 저의 모습을 돌아보니, 많이 성장했다는 것을 느꼈습니다.
과제를 하며 저는 JS에 약하다고 느꼈습니다. 앞으로 JS공부를 열심히 해야겠다는 생각이 들었습니다.