[이현승] Week2 #9

waterkail · 2024-02-23T08:45:10Z

요구사항

기본

심화

palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요
사용자의 브라우저 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.

주요 변경사항

스크린샷

멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다.

choinashil

주어진 시안에 따라 적당한 태그를 사용하여 비슷하게 형태를 만드는 것까지 이번주 학습 내용을 잘 이해하신 것 같아요 👍🏽
코멘트 남겨드린 부분 꼼꼼히 확인 후 다음 과제에 꼭 반영해보세요

수고 많으셨습니다! 🥇

choinashil · 2024-02-25T08:26:56Z

2Weekly Mission/Index.html

+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="Linkbrarystyle.css" rel="stylesheet" />


일반적인 html, css 파일명은 주로 케밥 케이스를 많이 쓰는 것 같아요. (찾아보기: 'kebab case', 'snake case', 'camel case')

아래는 작성해주신 코드를 케밥 케이스로 변경한 예시이고 파일명이 꼭 이래야한다는 절대적인 정답은 아닙니다!

Suggested change

<link href="Linkbrarystyle.css" rel="stylesheet" />

<link href="linkbrary-style.css" rel="stylesheet" />

파일명까지 포함해서 의견 드리자면,
css 파일 자체가 스타일링을 한다는 것을 의미하기 때문에 'style' 이라는 단어가 파일명에 굳이 포함되지 않아도 될 것 같아요.
작성하신 것처럼 서비스의 명칭을 사용하여 linkbrary.css 로 작성하거나 홈페이지(index.html)를 의미하는 index.css, home.css 등으로도 작성해볼 수 있을 것 같네요 😀

choinashil · 2024-02-25T08:27:52Z

2Weekly Mission/Index.html

+      href="https://fonts.googleapis.com/css2?family=Acme&display=swap"
+      rel="stylesheet"
+    />
+    <title>Linkbrary</title>


타이틀 잘 지정해주셨네요 👍🏽

choinashil · 2024-02-25T08:30:31Z

2Weekly Mission/Index.html

+    <title>Linkbrary</title>
+  </head>
+  <body>
+    <header class="gnb">


gnb 는 Global Navigation Bar 의 약자로 사이트 내 주요 페이지로 이동할 수 있는 링크들의 집합을 의미하는데요,
(참고: 알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런))

시안으로 봤을 때는 헤더에 네비게이션이 포함된 형태가 아니기 때문에 'gnb' 라는 클래스명과는 어울리지 않는 것 같습니다
'header' 클래스를 동일하게 사용해도 좋을 것 같아요 :)

choinashil · 2024-02-25T08:33:21Z

2Weekly Mission/Index.html

+  </head>
+  <body>
+    <header class="gnb">
+      <div class="logoin">


오타 주의해주세요! (login 을 의미하신거겠죠?) -> 사소한 오타 때문에 버그 생기기 쉽고 의외로 찾기 힘들어서 고생하기도 합니다

해당 영역 봤을 때 로고와 로그인 버튼 (헤더의 모든 영역) 을 포함하고 있어 login 이라고 네이밍 하는 게 맞을까? 하는 생각이 듭니다.
해당 영역을 포괄하는 단어를 사용하는 게 좋을 것 같아요.
아래 사용하신 container 나 wrapper 등을 잘 활용해봐도 좋을 것 같습니다

logo와 login 버튼이 같이 들어가 있는 부분이라서 클래스를 logoin으로 지었습니다.

choinashil · 2024-02-25T08:34:53Z

2Weekly Mission/Index.html

+  <body>
+    <header class="gnb">
+      <div class="logoin">
+        <img src="landing/logo.svg" alt="logo" />


alt 태그는 접근성 관점에서 중요한데요, 보다 정보를 전달할 수 있는 내용으로 작성해주시는 게 좋습니다

첫번째 멘토링 시간에 공유드렸던 자료들 시간내서 꼭 한 번 보시면 도움 되실 거에요!

온라인 쇼핑 꿈도 못 꾸는 디지털 강국의 시각장애인

[A2] 모두를 위한 모바일웹: 접근성을 준수해서 스크린리더 UX 개선하기

alt 작성한 부분들 전체적으로 어떻게 개선하면 좋을지 고민해보세요 🙂

choinashil · 2024-02-25T09:05:54Z

2Weekly Mission/signin.html

+  </head>
+  <body>
+    <main>
+      <article class="logintable">


article 태그의 용도는 무엇인가요?? 로그인 화면에 사용하기 적절할까요?? 🤔

choinashil · 2024-02-25T09:06:47Z

2Weekly Mission/signin.html

+        <form>
+          <label for="email">이메일</label>
+          <input id="email" name="email" type="email" />


form 태그 사용, input 과 라벨 연결, 주요 속성 추가 등 잘 적용해주셨네요 👍🏽

choinashil · 2024-02-25T09:07:20Z

2Weekly Mission/signin.html

+        <form>
+          <label for="email">이메일</label>
+          <input id="email" name="email" type="email" />
+          <label for="password">비밀번호 </label>


불필요한 공백 들어가지 않게 확인해주세요! 전체적으로 몇몇 있네요

Suggested change

<label for="password">비밀번호 </label>

<label for="password">비밀번호</label>

choinashil · 2024-02-25T09:08:55Z

2Weekly Mission/signin.html

+            <div class="googlebg">
+              <img src="landing/icon/googlebg.svg" alt="구글 배경">
+              <div class="googleicon">
+                <img src="landing/ic/google.png" alt="구글">
+              </div>
+            </div>


여기랑 카카오 이미지 부분 추출을 잘못 하신 것 같은데 배경이랑 아이콘을 묶어서 추출해야 하는 것 아닌가 싶네요???

어째서인지 피그마 이미지 추출에서 따로 따로 다운로드 되는 바람에 어쩔 수 없이 저렇게 했습니다

choinashil · 2024-02-25T09:10:46Z

2Weekly Mission/signstyle.css

+  gap: 9px;
+}
+
+a.tosignup {


tosignup 이라는 클래스로 해당 요소에 스타일링이 가능한데 a 태그와 같이 작성하신 이유가 있나요??
233라인도 마찬가지고요!

잘못된 건 아니지만 굳이 이렇게 작성하시지 않고 클래스로만 작성해도 될 것 같아요!!

알겠습니다.
바쁘실텐데 유익한 피드백 해주셔서 감사합니다.

choinashil · 2024-02-25T09:18:22Z

위와 같이 베이스가 main 으로 잡혀있어서 아래처럼 현승님 브랜치로 변경해두었습니다!

다음 미션 제출 시 베이스 변경 꼭 확인해주세요!

waterkail added 5 commits February 21, 2024 17:16

testing

0a5779f

testing2

d0a31ba

홈페이지, 로그인, 회원가입 완성

05918a6

near-end

25fe7d4

add faq and privacy html

1e048f3

waterkail requested a review from choinashil February 23, 2024 08:45

waterkail added good first issue Good for newcomers and removed good first issue Good for newcomers labels Feb 23, 2024

choinashil approved these changes Feb 25, 2024

View reviewed changes

choinashil changed the base branch from main to part1-이현승 February 25, 2024 09:17

choinashil merged commit c0cffad into codeit-bootcamp-frontend:part1-이현승 Feb 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[이현승] Week2 #9

[이현승] Week2 #9

waterkail commented Feb 23, 2024 •

edited

Loading

choinashil left a comment

choinashil Feb 25, 2024

choinashil Feb 25, 2024

choinashil Feb 25, 2024

choinashil Feb 25, 2024

waterkail Feb 26, 2024

choinashil Feb 25, 2024

choinashil Feb 25, 2024

choinashil Feb 25, 2024

choinashil Feb 25, 2024

choinashil Feb 25, 2024

waterkail Feb 26, 2024

choinashil Feb 25, 2024

waterkail Feb 26, 2024

choinashil commented Feb 25, 2024

	<link href="Linkbrarystyle.css" rel="stylesheet" />
	<link href="linkbrary-style.css" rel="stylesheet" />

	<label for="password">비밀번호 </label>
	<label for="password">비밀번호</label>

[이현승] Week2 #9

[이현승] Week2 #9

Conversation

waterkail commented Feb 23, 2024 • edited Loading

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

choinashil left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

choinashil commented Feb 25, 2024

waterkail commented Feb 23, 2024 •

edited

Loading