Conversation
There was a problem hiding this comment.
승원님 고생 많으셨습니다!
전반적으로 잘 구현해주셨고, 시맨틱 태그와 클래스명에 조금 더 신경 써주시면 더욱 좋을 거 같습니다 :)
화면 사이즈에 따라서 달라지는 요소들의 사이즈와 간격 등은 어떻게 구현하나요?
-> 반응형 웹 퍼블리싱 챕터에서 좀 더 자세히 학습하실 거에요 :) 간단하게 먼저 말씀드리면 media query를 쓰거나 flex, grid로 유연한 레이아웃을 만들기도 하고, 유닛 단위를 %로 사용하여 크기를 유연하게 조절합니다~!
피그마에서 각 요소들 사이의 간격은 어떻게 확인하나요?
->
피그마 하단에 표시된 부분을 토글하셔서 dev모드로 만든 후 요소에 마우스를 올리거나 클릭해보세요!
url 루트 '/' 라는게 파일을 디렉토리를 만들지 말고 바로 파일을 만들라는 뜻인가요?
-> 루트 '/'가 꼭 디렉토리가 없는 것을 의미하지는 않습니다. 브라우저에서 '/' 경로에 접속 했을 때 랜딩페이지를 찾아 제공할 수만 있으면 됩니다. 이 경우 개발 환경 혹은 배포 환경의 서버 설정에 따라 디렉토리가 있을 수도, 없을 수도 있어요!
지금 사이트를 배포하신 게 아니라면, 우선은 a tag를 통해 다른 페이지를 잘 불러오는지만 확인하셔도 좋습니다 :)
| @@ -0,0 +1,95 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
lang도 신경써주세요! SEO, 접근성에 도움이 됩니다 :)
<html lang="ko">
| <img src="images/logo.png" alt="logo" class="logo"> | ||
| </a> | ||
| <a href="login.html"> | ||
| <button class="login-button"> |
There was a problem hiding this comment.
상호작용이 가능한 요소(button, a, input...)를 중첩하는것은 표준에 맞지 않습니다!
button, a 태그 둘 중에 하나만 써주세요~!
| </div> | ||
|
|
||
| <div class="landingpage-image02"> | ||
| <img src="images/desktop_02.png" alt=""> |
There was a problem hiding this comment.
텍스트 영역까지 이미지로 사용하셨군요..!
피그마를 보시면 해당 부분은 텍스트 영역과 이미지 영역이 구분되어 있습니다!
물론 급하게 작업해야하거나 간단하게 표현할 경우 지금 처럼 구현하는 것도 가능합니다 :)
하지만 HTML요소를 전부 이미지로 표현하면 몇 가지 문제점이 있습니다.
1.SEO
HTML의 텍스트는 검색 엔진 최적화(SEO)에 중요한 역할을 합니다. 이미지로 넣으면 검색 엔진이 내용을 인식하지 못해 사이트 SEO에 불리합니다!
-
접근성
이미지는 스크린리더가 읽을 수가 없어 접근성이 많이 떨어집니다. -
유지보수성
만약 현재 상황에서 텍스트 색상 변경 요청이 들어오면 어떻게 될까요? 원래라면 css 한 줄만 수정하면 되겠지만, 지금의 경우 모든 이미지를 교체하게 되겠죠! 화면 크기에 따른 반응형 구현도 더 까다롭고 부자연스러워집니다! -
성능
이미지는 HTML tag보다 로딩 속도에 더 많은 영향을 줍니다!
무엇보다 현재는 학습과정이므로 HTML로 직접 구현해보시는 것을 추천드려요 :)
| ©codeit - 2024 | ||
| </p> | ||
|
|
||
| <p class="middle"> |
There was a problem hiding this comment.
P는 단락을 나타낼 때 사용하는 태그 입니다!
단순히 레이아웃을 잡는 용이라면 div가 더 적절합니다 :)
| <header> | ||
| <div class="head"> | ||
| <a href="index.html"> | ||
| <img src="images/logo.png" alt="logo" class="logo"> |
| font-family: 'Pretendard', sans-serif; | ||
| } | ||
|
|
||
| header { |
There was a problem hiding this comment.
지금은 css 파일이 하나라 괜찮지만, 태그에 직접 스타일을 주게 되면 페이지 전체에 영향을 주기 때문에 지양하셔야합니다! 되도록 클래스를 이용해주세요~ :)
| <div class="landingpage-image01"> | ||
| <div class="wrap-1"> | ||
| <div class="landingpage-description"> | ||
| <p class="p-1"> |
There was a problem hiding this comment.
클래스명은 좀 더 유의미하게 지어주시는 것이 좋습니다!
|
피그마에서 dev 모드로 전환이 안되는데 어떡하죠..? |
|
이슈를 공유 주실 때는 어떤 상황인지 정확하게 공유 주셔야 합니다~! 어떻게 안 되고 있나요?? 그리고 깃헙 코멘트 같은 경우는 제가 못 보는 경우가 많아서 추가적인 질문은 디스코드를 활용해주세요 :) |
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게