[당근마켓 클론코딩] 심현진 미션 제출합니다 #6
Conversation
-헤더 로고, 메뉴, 텍스트 창, 버튼 추가
winternuary
requested review from
anys34,
kimsiyeon0223,
seonghoon07 and
winternuary
|
수고하셨습니다~~ 미션이 어려울 수도 있었을텐데 열심히 임해주셔서 감사합니다. 궁금했던 점에 css에 시멘틱 태그를 최대한 안 쓰는게 좋은 코드인지 궁금하다고 하셨는데, 중복되는 요소를 제거하는 방법은 어제 잠깐 설명했던 컴포넌트 를 사용하는 방법을 가장 많이 사용해요. 벌써부터 효율적인 코드 작성에 대해 고민하는 당신은... 너무나도 대단해용. 수고하셨습니다! 화이팅 |
mission/index.html
Outdated
| <section id="section1"> | ||
| </section> |
There was a problem hiding this comment.
제일 아래 부분에 색상?을 주기 위해
메인에다가 height를 주고 기본 배경에 색을 주면 훨씬 나은 코드가 될 것 같습니다
|
아이구 ㅠㅠㅠ 너무 수고하셨어요ㅠㅠ |
| </head> | ||
| <body> | ||
| </html> | ||
| <header> |
mission/style.css
Outdated
| position: fixed; | ||
| z-index: 5; | ||
| top: 0px; /* 도달했을때 고정시킬 위치 */ | ||
| height: 70px; |
There was a problem hiding this comment.
어제 말했듯이 px는 절대적인 단위라 width나 height에서는 이 단위를 잘 사용하지 않습니다!
다른 상대적인 단위인 %, rem, em 도 알아보시면 좋을 것 같아요
mission/style.css
Outdated
| border: 1px solid; | ||
| border-color: #a3a1a1; |
There was a problem hiding this comment.
border: 1px solid
border-color: #a3a1a1이 코드를
border: 1px solid #a3a1a1이렇게 한 줄로 더 간결하게 쓸 수 있습니당.
mission/style.css
Outdated
| padding-bottom: 200px; | ||
| padding-left: 100px; |
There was a problem hiding this comment.
이렇게 두 줄로 나눠서 사용하기보다는
padding: 0 0 100px 200px;
로 한 줄로 간결하게 써주는 방법도 좋은 것 같습니다!
mission/index.html
Outdated
| </ul> | ||
| </div> | ||
| <aside id="wrapInputText"> | ||
| <input type="text" placeholder="물품이나 동네를 검색해 보세요"></input> |
There was a problem hiding this comment.
<input type="text" placeholder="물품이나 동네를 검색해 보세요" />위와 같이 셀프 클로징 태그를 사용해주세용!!
mission/index.html
Outdated
|
|
||
| <main class="indexMain"> | ||
| <div id="test"> | ||
| <h1 class="font">당신 근처의<br/>지역 생활 커뮤니티</h1> |
mission/index.html
Outdated
| <img id="daangnee" src="../assets/daangnee.png" alt="당근이 캐릭터"> | ||
| <nav id="buttonSort"> | ||
| <button class="mainButton"> | ||
| <img class="buttonLogoImgGP" src="../assets/google_play.svg"> |
There was a problem hiding this comment.
여기도!
<img class="buttonLogoImgGP" src="../assets/google_play.svg" />위와 같이 셀프 클로징태그를 사용해주세요. 밑에 링크도 참고해주세요~
https://jake-seo-dev.tistory.com/461
4 participants
흥미있었던 점
: 이때까지 화면구현 수업만 듣다가 처음으로 웹 사이트를 클론해봤다. 수업 때 배운 태그나 스타일 중 화면의 구역을 나누기 위한 시멘틱 태그, 각 요소들을 정렬하는 display: flex 속성이 제일 많이 쓰였다. 배운게 많은데 비해 실제 웹에서 쓰이는게 적은게 신기했다. 또, 요소들을 하나하나 배치해보고 정렬되는 모습을 보면서 흥미를 느꼈다.
코드가 전체적으로 반복되는게 많아서 기본기를 익히는데 도움이 됐다. 처음 메인 페이지에는 시멘틱 태그로 최대한 많이 감싸서 정렬했는데 중고거래 페이지에서는 마진과 패딩, 너비와 높이 조절로 정렬했다. 시멘틱 태그를 최대한 안 쓰는게 코드가 훨씬 짧아져서 편리했다. 화면구현 수업에서는 코드가 짧았는데 실제 웹사이트를 만들어 보니 최대한 줄여도 코드가 200줄이 넘어갔다. 적용되는 속성을 하나하나 찾아가면서 코딩하는게 쉽지는 않았지만 재밌었다.
어려웠던 점
: 중고거래 페이지의 인기상품 부분 데이터를 불러 올 때 json파일을 변환해서 화면에 출력해야 했다. 레퍼런스에 나와있는 설명과 실제 코드에 적용되는 방식이 달랐다. map만 쓰면 되는 줄 알았는데 fetch()함수를 써서 json파일을 불러오고 map()함수를 사용해 html과 연결시켜야 했다. 어떻게 동작하는지 이해했지만 코드로 구현 하는게 어려웠다. 그래서 인터넷을 찾아보기도 하고 주변에 물어보며 코드를 작성했다. 수업시간에 배우지 않은 함수이기도 하고 .then()등의 문법 부분도 생소한게 많았다.
궁금한 점
: 시멘틱 태그를 최대한 적게 쓰는것이 좋은 코드인지 궁금하다. 당근마켓의 실제 웹사이트를 보면 div로 하나하나 다 감싸져 있는데 그러면 코드가 길어지게 된다. 코드가 길어지면 스타일을 적용할 때 복잡해지게 될 수 있다. 어떤 방법이든 화면에 잘 띄워지면 괜찮은것 아닐까 생각했었는데 잘 모르겠다. 중복되는 요소를 제거하고 최대한 효율적인 코드를 작성하고 싶다.