Conversation
- 기초 HTML / CSS 파일과 README.md 파일 생성 - CSS 변수를 별도의 template.css 파일로 분리
- 페이지의 기본적인 구조와 내용을 작성
- div 태그로 나눠진 구조에 시맨틱 태그를 적용
- 페이지 구성에 필요한 이미지 저장 - img 요소에 이미지 연결
- body의 여백을 없애고 Pretendard 글꼴을 적용 - 클릭 가능한 요소에 커서를 두면 커서가 바뀌도록 CSS 작성 - header와 footer 요소에 클래스를 부여한 뒤, 주어진 디자인대로 CSS 작성
- 링크 요소의 경로 연결 - 링크 관련 가상 클래스 초기화 및 CSS 재적용
- 상하단 배너의 구조 통일 - 배너 요소에 클래스를 부여한 뒤, 주어진 디자인대로 CSS 작성 - 4xl CSS 변수 추가 및 rem값을 변수로 통일
- 내용 <br>로 2줄 구분 - 섹션 및 카드 요소에 클래스를 부여한 뒤, 주어진 디자인대로 CSS 작성 - CSS 변수 오타 수정
- a 태그를 통해 이동하는 페이지 틀 작성
- 각 페이지마다 로고 아이콘을 적용 - 이미지 경로를 상대 경로에서 절대 경로로 수정
- 좌우 패딩이 최소 200px가 유지되도록 변경
- 배포 URL과 기술 스택 명시
- style.css에 있던 초기화 CSS를 template.css에 합치고 init.css로 명칭 변경 - init.css를 별도의 link 태그로 가져오도록 수정
- 링크 요소의 href에 확장자 추가 - html 파일의 경로와 명칭 변경 - Netlify의 `Prtty URLs` 설정을 통해 브라우저 상에서의 경로는 `/경로`로 보임
- 웹 접근성을 고려하여 이미지 alt값 변경 - 섹션을 추가하고, 섹션 및 하위 div에 적절한 클래스 적용 - 변경된 섹션 & 클래스에 맞추어 CSS 선택자 수정
- 스프린트 미션 1의 요구사항과 약간 다르다고 판단되어 추가적인 설명을 주석으로 남김
There was a problem hiding this comment.
README.md로 문서 정리하시면서 진행하시는 것 너무 좋네요! 👍
| @@ -0,0 +1,21 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="ko"> | |||
There was a problem hiding this comment.
문서 언어 한국어로 지정하신 것 좋습니다. 👍
| <a href="/"><img src="/images/logo_sm.png" alt="판다마켓 바로가기" /></a> | ||
| <a class="head-login" href="/login.html">로그인</a> |
There was a problem hiding this comment.
특정 경로로 이동하는 경우에 <a/> 태그 사용하시고, 이미지 요소에 유의미한 대체 텍스트 잘 넣으셨네요. 👍
| <img src="/images/explain_1.png" alt="" /> | ||
| <div class="card-content"> | ||
| <span class="keyword">Hot Item</span> | ||
| <span class="title">인기 상품을<br />확인해 보세요</span> |
There was a problem hiding this comment.
지금은 html 문서를 직접 작성하셔서 줄바꿈 문자를 삽입하기 어려우시겠지만,
나중에 React 등 UI 라이브러리나 프레임워크 사용하실 때에는, 줄바꿈 문자 사용 시 문단을 바꾸어주는 white-space: pre-line 같은 속성을 사용하셔도 됩니다!
참고차 알아두시면 될 것 같습니다~!!
토스 랜딩 페이지 보시면 실제로 어떻게 쓰고 있는지 보실 수 있어요~
| <main> | ||
| <section class="banner"> | ||
| <div class="banner-content"> | ||
| <span>일상의 모든 물건을<br />거래해 보세요</span> | ||
| <a href="/items.html">구경하러 가기</a> | ||
| </div> | ||
| <img src="/images/panda_1.png" alt="" /> | ||
| </section> |
There was a problem hiding this comment.
<main/>, <section/> 시멘틱 태그 사용하신 것 좋습니다!
각 섹션에서 제목 요소는 Heading Element 사용하셔서 작성하셔도 좋을 것 같아요.
| <a href="http://www.facebook.com" target="_blank"> | ||
| <img src="/images/facebook.png" alt="페이스북 바로가기" /> | ||
| </a> | ||
| <a href="http://twitter.com" target="_blank"> | ||
| <img src="/images/twitter.png" alt="트위터 바로가기" /> | ||
| </a> | ||
| <a href="http://www.youtube.com" target="_blank"> | ||
| <img src="/images/youtube.png" alt="유튜브 바로가기" /> | ||
| </a> | ||
| <a href="http://www.instagram.com" target="_blank"> | ||
| <img src="/images/instagram.png" alt="인스타그램 바로가기" /> | ||
| </a> |
There was a problem hiding this comment.
아이콘 요소는 픽셀 이미지 대신 벡터 이미지 사용 가능하시면, SVG 이미지로 사용하는걸 추천드립니다!
(브라우저에서 렌더링될 때 선명하게 보이고, 크기 조절이 용이합니다.)
There was a problem hiding this comment.
위클리 과제에서 제공하는 디자인 시스템의 파운데이션을 변수로 가져와 사용하시는 것 너무 좋네요! 👍
There was a problem hiding this comment.
피그마 이미지 Export 하실 때 참고하시면 좋을 것 같아 공유드립니다!
디자인 시안에서 보여지는 이미지 크기보다 크게 나타날 수 있는 경우(ex. 시안은 뷰포트가 1280px 너비로 작업 되어 있으나, 더 넓은 화면에서 이미지가 커질 수 있는 경우) 2~3배 정도로 export하여 사용하시는 걸 추천드립니다.
| :is(a, button):hover { | ||
| cursor: pointer; | ||
| } |
There was a problem hiding this comment.
오 is 선택자는 처음 보네요. 이렇게 적극적으로 다양한 선택자 사용해보시는 것 너무 좋습니다. 👍
| header { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| /* 요구사항은 1920px 기준 좌우 여백 200px 유지지만, | ||
| 퍼센트 활용값이 더 자연스럽다고 판단하여 max로 결정케 함 */ | ||
| padding: 5px max(calc((100% - 1100px) / 2), 200px); | ||
| } |
There was a problem hiding this comment.
랜딩 페이지에서만 해당 CSS 파일을 임포트하여 사용하시면, 태그 단위로 스타일을 적용하여도 크게 문제는 안되는데요.
다만 추후에 SPA(Single Page Application) 등을 사용하여 개발 하시게 되면, 이전 페이지의 스타일 시트가 페이지 전환 이후에도 남아있어 문제가 될 수도 있습니다. 어떤 경우에 문제가 되는지만 아시면 괜찮을 것 같습니다. :)
주석으로 설명이 필요한 부분 작성해주신 것 너무 좋네요. 👍
There was a problem hiding this comment.
Flex layout 수평/수직 정렬 적절하게 사용하신 것도 잘하셨습니다!
| display: grid; | ||
| grid-template-columns: repeat(3, 1fr); | ||
| align-items: center; |
There was a problem hiding this comment.
오 벌써 grid layout도 사용하셨군요! 잘 하셨습니다. 👍
| .foot-link { | ||
| justify-content: center; | ||
| gap: 30px; | ||
| } | ||
|
|
||
| .foot-link a { | ||
| color: var(--gray-200); | ||
| } | ||
|
|
||
| .foot-sns { | ||
| justify-content: right; | ||
| gap: 12px; | ||
| } |
There was a problem hiding this comment.
Flex layout에서 gap 속성으로 요소 간 간격을 설정하셨는데요.
지금은 위클리 과제 중이어서 문제는 없지만, 현업에서 사용할 때에는 지원해야하는 브라우저 버전에서 사용 가능한지 확인하실 필요가 있습니다!
아래 링크를 참고하시면, 해당 속성은 MacOS, iOS Safari의 14 버전 초/중반대부터 지원하는 걸 확인하실 수 있는데요.
서비스 특정에 따라 구형 사파리까지 지원하는 경우에는 문제가 될 수 있습니다. :)
내용만 알아두시면 될 것 같아요~!!
(1)
판단 하에 디자인 개선 후 기록 남기신 것 좋습니다! 👍 (2)
다음 멘토링 시간에 ResetCSS, NormalizeCSS 관련 내용 공유해드릴려고 했는데 먼저 이렇게 질문 주시다니.. 열심히 하시는 모습 너무 보기 좋습니다. 👍 우선 크로스 브라우징 + 요소 스타일링을 용이하게 하기 위해 요소 스타일 초기화 CSS 파일을 적용하시는 건 사실상 필수입니다. :) 우선 NormalizeCSS는 각 브라우저 별 요소의 기본 스타일을 어느정도 유지한 상태로 초기화합니다. 개인적으로 이러한 방식은 개발 초기라고 해서 큰 이점이 있지도 않고, 고도화가 된 이후에는 레거시 요소들이 각 브라우저의 고유 스타일에 영향을 받기 때문에 유지 보수에 별로였습니다. :/ 가능하면 하드리셋을 하는 ResetCSS를 사용하는 걸 추천드립니다. (3)
이건 저도 자세히 찾아보고 말씀드려야 될 것 같네요. 다만 대부분의 경우에는 CSS 선택자로 발생하는 성능 차이는 애플리케이션에 영향을 줄 정도는 아닙니다. 여유 있으시면, 크롬 개발자 도구에서 성능 탭을 사용해서 직접 비교해보셔도 좋을 것 같네요. :) (4)
다른 페이지로 이동하는 상호작용 가능한 링크 요소는 |
|
첫 위클리 과제인데 너무 잘 해주셨습니다. 앞으로도 화이팅입니다!! 👍 |
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게
reset CSS를 적용하면 맘 편히 문자적 시맨틱 태그들을 사용할 거 같은데 멘토님께서는 어떻게 생각하시나요?.card:nth-child(n)보다:nth-child(n).card이 성능상 좋은 걸까요?<a>의 의미와<button>의 형태를 가지는데, 어떤 태그를 활용하는 것이 좋을까요? (저는 의미에 초점을 맞춰 a를 활용했습니다.)