Basic 정태인 #73
Basic 정태인 #73
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
제가 놓친 부분이 있다면 말씀주시면 감사하겠습니다!넵넵 ! 😊 |
| justify-content: center; | ||
| align-items: end; | ||
| height: clamp(400px, 50vh, 540px); | ||
| height: 540px; |
There was a problem hiding this comment.
크으 ~ 피드백 반영 좋습니다 !
추 후 미디어쿼리로 해결 해볼 수 있겠네요 😊
| .text-gray700 { | ||
| color: #374151; | ||
| } |
There was a problem hiding this comment.
오호. 활용도가 좋겠는데요 ?
부트스트랩이나 테일윈드가 생각나네요. 이렇게 하면 다른 클래스랑 적용하기 쉽겠어요.
There was a problem hiding this comment.
(더 나아가서) 컬러 팔레트를 사용해보시는건 어떨까요? 🎨
컬러는 따로 선언해두시고 재사용 해보시는건 어떨까요?
컬러 팔레트는 color.css 혹은 global.css에서 정의하는게 일반적입니다 !
컬러 팔레트는 다음과 같이 정의할 수 있습니다:
* {
--primary: #6D6AFE;
--red: #FF5B56;
--black: #111322;
--white: #FFFFFF;
--gray-100: #3E3E43;
--gray-200: #9FA6B2;
--gray-300: #CCD5E3;
--gray-400: #E7EFFB;
--gray-500: #F0F6FF;
}There was a problem hiding this comment.
적용하면 다음과 같이 작성될 수 있겠네요 😊
| .text-gray700 { | |
| color: #374151; | |
| } | |
| .text-gray700 { | |
| color var(--gray-700); | |
| } |
| @@ -0,0 +1,71 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
lang="ko" 속성을 사용해보는건 어떨까요?
| <html lang="en"> | |
| <html lang="ko"> |
lang 속성은 Search bot이 탐색할 때 해당 문서가 어떠한 언어로 작성되어있는지 파악할 때 사용될 수 있습니다.
따라서 적절한 lang을 설정하시는걸 권장드립니다. 😊
lang의 기본 값은 '알 수 없음'입니다. 따라서 적절한 값의 lang 속성을 꼭 꼭 ! 설정해주시는걸 권장합니다 !
lang에 대해서 자세히 보기
SEO 마케팅 관련 기사
lang 속성은 다음을 포함하여 다양한 목적으로 사용됩니다.
- 검색 엔진은 lang 속성을 사용하여 올바른 언어로 웹 페이지를 색인화합니다. 이를 통해 특정 언어로 검색하는 사용자에게 더 관련성이 높은 결과를 반환할 수 있습니다.
- 화면 판독기는 lang 속성을 사용하여 언어 프로필을 전환하여 올바른 악센트와 발음을 제공합니다. 이는 시각 장애가 있는 사용자가 선호하는 언어로 웹 콘텐츠에 액세스하는 데 도움이 됩니다.
- lang 속성을 사용하여 번역해야 하는 텍스트를 식별할 수 있습니다. 이는 다국어 웹사이트를 만들거나 사용자 생성 콘텐츠를 번역하는 데 유용할 수 있습니다.
<html> 요소 자체를 포함하여 텍스트 콘텐츠를 포함하는 모든 HTML 요소에 lang 속성을 지정해야 한다는 점에 유의하는 것이 중요합니다. 이렇게 하면 전체 웹페이지의 언어가 올바르게 식별됩니다.
원문 보기
| <form class="form-container"> | ||
| <div class="input-container"> | ||
| <label class="text-gray800 label-text">이메일</label> | ||
| <input class="text-gray800 gray100 styled-input" placeholder="이메일을 입력해 주세요"/> |
There was a problem hiding this comment.
type을 email로 하셔도 될 것 같아요 !
| <input class="text-gray800 gray100 styled-input" placeholder="이메일을 입력해 주세요"/> | |
| <input class="text-gray800 gray100 styled-input" placeholder="이메일을 입력해 주세요" type="email"/> |
There was a problem hiding this comment.
그리고 <input>에 대한 속성과 관련하여..!
<input>에는 용이한 속성들이 상당히 많습니다 !
- 숫자의 범위를 지정하는
max,min - 글자 수를 제한하는
maxLenght,minLenght - 그 외 의외의
type들date,email,file,image...
제공되는 유용한 속성들을 모르고 개발하게 되면 자바스크립트로 만들게 되는 경우도 있어요.
예를 들어서 max라는 속성을 모르면 input 값이 입력되었을 때 값에 대한 유효성 검사를 하고 input에 값을 넣어주는 번거로운 일도 할 수도 있어요.
(제가 처음 개발할 때 그랬습니다... 🥲)
특히 리액트로 넘어가게되면 javascript가 html 접근하는 허들이 낮아지면서 위와 같은 사례가 종종 보여요.
그래서 특히 input과 관련하여서는 꼭 한번 즈음 mdn 공식 문서를 처음부터 끝까지 러프하게라도 읽어보시는걸 추천드려요.
|
수고하셨습니다 태인님 ! 과제 수행하시느라 수고 많으셨습니다 태인님 ~! 😊 |
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
2025-03-01.2.38.47.mov
멘토에게