Conversation
There was a problem hiding this comment.
미션 하느라 수고 많으셨어요~👏🏻
-만들면서 많은 시도를 했었는데 아직 확실히 어느부분에서 어떤 태그와 어떤 display박스를 써야하는지 정확하게 잘 모르겠습니다. 여러번 해보면서 알아가는거 같은데 그 상황에 맞는 꿀팁 같은게 있으시면 알려주시면 감사하겠습니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element 보면 어떤 경우에 어떤 태그를 쓰면 좋을지에 대한 설명도 참고할 수 있어요.
display flex, grid 사용 관련해서 물어보시는게 맞죠? 2차원 배열의 경우 grid를 사용하고, 이외에는 flex를 많이 사용해요.
| </div> | ||
| <div class="main"> | ||
| <div class="item"> | ||
| <div class="soso"> |
There was a problem hiding this comment.
클래스 이름 만들기에 스트레스를 받고 막 만든 흔적들이 있네요ㅋㅋㅋ
감싸는 박스는 OOO-box, OOO-wrapper, OOO-container 등으로 만들어 보면 좋아요
내용은 content, 제목은 title, 상세 설명은 description, label, badge, card, list ... 등 여기에 prefix로 도메인 관련한 단어 hero-section-content를 넣어주시면 이름 만드는 스트레스가 좀 줄어들거에요.
특정 ui를 지칭하는 용어들을 검색해 보면서 어떤 이름 사용하면 좋을지 생각해봐도 좋아요.
| <div></div> | ||
| <div class="market"> | ||
|
|
||
| <a href="/"><img class="face" src="Property 1=sm.png" alt="판다마켓"></a> |
| </p> | ||
| <a class="see" href="/items">구경하러 가기</a> | ||
| </div> | ||
| <img src="Img_home_top.png"> |
There was a problem hiding this comment.
img 태그에 alt 특성을 넣어주는 습관을 들이면 좋아요. (참고)
| @@ -0,0 +1,239 @@ | |||
| *{box-sizing: border-box;} | |||
There was a problem hiding this comment.
전체적으로 Pretendard 폰트 설정이 빠졌어요. font-family 설정해주세요~
참고해서 폰트 파일도 가져와 주세요.
| </div> | ||
| </footer> | ||
| </body> | ||
| </html> |
There was a problem hiding this comment.
파일의 마지막에 빈 줄이 포함되는 것이 좋아요.
동작에 문제가 있는 건 아니지만 잠재적 문제를 없애기 위함 입니다. (참고)
사용하는 에디터에서 end of line 또는 eol이라는 키워드로 설정할 수 있어요
| </head> | ||
| <body> | ||
| <header id="top"> | ||
| <div></div> |
There was a problem hiding this comment.
클래스 설정이 없는 div를 쓰는 경우가 일반적이지 않아서 다른 방법으로 스타일링할 방법을 생각해보면 좋아요.
| <div> | ||
| <a class="hoot" href="/privacy">Privacy Policy</a> | ||
| </div> | ||
| <div><a class="chu" href="/faq">FAQ</a></div> |
There was a problem hiding this comment.
태그 안에 태그가 있는 경우 줄바꿈과 들여쓰기를 해주는게 가독성에 좋아요.
| <meta charset="utf-8"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;600&display=swap" rel="stylesheet"> |
There was a problem hiding this comment.
Poppins 폰트를 가져오는 이유가 있을까요?
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <header id="top"> |
There was a problem hiding this comment.
스타일링만을 위한 선택자는 class를 권장해요.
- id 는 보통 개발작업시 요소 선택을 위한 방편으로 많이 사용해요.
- id 선택자는 class보다 우선순위가 높아 id에 속한 스타일을 class로 덮어쓸 수 없어 유지보수와 확장성에 불리할 수 있어요.
- id는 페이지 내에서 고유해서 재사용에 좋지 않지만, class는 재사용 가능해요.
There was a problem hiding this comment.
다른 페이지로 이동하기 쉽도록 상단에 링크를 두는 요소는 nav태그가 더 좋을 것 같아요.
header태그는 콘텐츠의 제목이나 소개 또는 탐색하는 영역에 사용해요.
|
|
||
|
|
||
| #top{ | ||
| position:fixed; |
There was a problem hiding this comment.
fixed 설정하고 스크롤했을 때 네비게이션이 가장 위에 위치하도록 추가적인 설정이 필요해요.
요구사항
기본
[o] 랜딩 페이지의 url path는 루트('/')로 설정합니다.
[o]title은 "판다마켓"로 설정합니다.
[o]화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
[o]클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
-[o] "판다마켓" 클릭 시 루트 페이지('/')로 이동합니다.
-[o] '로그인'버튼 클릭 시 로그인 페이지('/login')로 이동합니다 (빈 페이지)
-[o] "구경하러가기"버튼 클릭 시('/items')로 이동합니다.(빈 페이지)
-[o] "Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지)
-[o] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
심화
주요 변경사항
스크린샷
멘토에게
-만들면서 많은 시도를 했었는데 아직 확실히 어느부분에서 어떤 태그와 어떤 display박스를 써야하는지 정확하게 잘 모르겠습니다. 여러번 해보면서 알아가는거 같은데 그 상황에 맞는 꿀팁 같은게 있으시면 알려주시면 감사하겠습니다.
-초보자긴 하지만 잘못된 부분이거나 이건 아니다 싶은 것들이 있으면 알려주시면 한번 수정해보겠습니다.