[이남경]Week2 #54

namgyeonglee · 2024-02-25T13:46:17Z

요구사항

https://week2mission-erin.netlify.app/

기본

심화

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

주요 변경사항

스크린샷

ㄴ main

ㄴ signin

ㄴ signup

멘토에게

[style-signin.css] input focus in 일 때 border color 값 변경해주는 css 속성을 아래와 같이 지정하였는데 적용이 안되어서 주석 처리해두었습니다.

input:focus {
  border: 1px solid red;
  background: var(--Linkbrary-white, #FFF);
}

[style.css] 반응형 관련 css 속성은 한 줄 작성하였습니다. 화면 크기를 줄일 때 마다 자연스럽게 text 크기랑 이미지 크기가 변경되는 것은 더 찾아보고 구현해보겠습니다!

@media (max-width: 500px) {
  .main-h1 { 
    font-size: 40px;
    text-align: center;
    font-family: Pretendard;
    font-style: normal;
    font-weight: 700;
    line-height: 80px; /* 125% */
    color: var(--Black); 
  }
}

…of the 2nd week mission

kiJu2 · 2024-02-27T08:29:20Z

안녕하세요 남경님 ! 위클리 미션 수행하시느라 수고 정말 많으셨습니다 !
꼼꼼하게 읽어보고 리뷰 남기도록 할게요 👍😎

kiJu2 · 2024-02-27T09:08:27Z

commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?

git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
흔히 하는 말이 있습니다:

커밋은 합칠 수 있지만 나눌 수 없습니다.

그럼 커밋을 언제 해야 할까요?

저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:

커밋을 하는 단위는 커밋 메시지 한 줄로 설명할 수 있는 행동
하나의 목표 혹은 액션이 달성될 때

또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:

tl;dr:

커밋 메시지 형식

type: Subject

body

footer

기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다.

메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다.

feat : 새로운 기능 추가
fix : 버그 수정
docs : 문서 내용 변경
style : 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 등
refactor : 코드 리팩토링
test : 테스트 코드 작성
chore : 빌드 수정, 패키지 매니저 설정, 운영 코드 변경이 없는 경우 등

원문보기

kiJu2 · 2024-02-27T08:49:51Z

images/landing/img2.svg

해당 파일 확장자를 .svg로 하신 이유가 있으실까요?

svg는 벡터 이미지를 사용할 때 정하는 확장자입니다 ! 수학적 연산처리로 그래픽을 나타내는 방법이며 낮은 용량과 깨지지 않는 장점이 있어요.
해당 이미지는 점과 선으로 이루어지기 어려운 이미지이며 벡터이미지 보다는 픽셀 이미지에 가까운 것 같습니다 !

또한, 단순이 img 라는 파일명 보다는 product-image-1, 혹은 introduce-product-image-1, landing-main-image-1과 같이 의미 있는 파일명으로 짓는 것이 어떨까요 ? =)

kiJu2 · 2024-02-27T09:06:15Z

images/state=Default.png

파일 명에 =가 있습니다. 의도된 것일까요?

의도한건 아닌데 파일명에는 = 를 안쓰는게 좋은가요??

kiJu2 · 2024-02-27T09:08:06Z

images/signup/Component 2.svg

파일명에는 띄어 쓰기 대신 -를 사용하시는 것을 권장드립니다 !
문자열로 표시할 때 "Component\ 2.svg" 이런식으로 표기해야 될 수도 있어서요.

kiJu2 · 2024-02-27T09:09:44Z

index.html

+    <a href="/signup.html">
+      <input class="main-h1-button" type="button" value="링크 추가하기">
+    </a>
+    <img src="/images/landing/_img.svg" alt="landing-main-image">


alt를 좀 더 구체적으로 작성해볼까요?

alt를 꼼꼼하게 작성했군요 ! 좋은 습관입니다.
다만, alt는 스크린 리더 사용자에 대한 보조 텍스트가 될 수 있으므로 "어떠한 이미지 인지"를 작성해주는 것이 좋아요 !

alt의 목적

인터넷 연결이 끊겼을 때 대체되는 이미지

스크린 리더 사용자를 위한 대체 텍스트

이미지를 볼 수 없는 환경에서 이미지를 대체하기 위한 텍스트
등 목적을 알게 된다면 alt를 어떻게 사용하시면 될지 알 수 있을 것 같아요.

다음은 하버드 에듀케이션에서 제안하는 alt 규칙입니다:

tl;dr

Write Good Alt Text

Add alt text all non-decorative images.

Keep it short and descriptive, like a tweet.

Don’t include “image of” or “photo of”.

Leave alt text blank if the image is purely decorative

It's not necessary to add text in the Title field.

원문 보기

kiJu2 · 2024-02-27T09:10:23Z

signin.html

+        <section class="input">
+          <section class="input-email">
+            <label class="label" for="이메일">이메일</label>
+            <input class="email" type="email" placeholder="[email protected]">


<input>에 type 프로퍼티를 올바르게 설정하셨군요 👍 좋습니다.

kiJu2 · 2024-02-27T09:11:05Z

signin.html

+          </section>
+        </section>
+        <p class="login">
+          <input class="button" type="submit" value="로그인">


오호 좋아요 form 안에 input태그로 적절하게 설정하셨군요 ! 👍👍👍

kiJu2 · 2024-02-27T09:16:30Z

index.html

+    <img src="/images/landing/_img.svg" alt="landing-main-image">
+  </section>
+
+  <section class="main1">


class/id를 단순히 숫자를 열거하는 것보다 어떤 "목적"인지 작성하는게 어떨까요?

다음은 *BEM 컨벤션을 따른 목적을 내포한 네이밍 예시입니다:

Suggested change

<section class="main1">

<section class="landing-section__image--left">

만약, 1, 2와 같은 순서가 숫자로 들어가야 한다거나 디자인을 보았을 때 직관적으로 재사용 가능한 패턴들로 보이는데 각자 다른 고유한 스타일이 들어가야한다면, 스타일 구성이 잘못되었는지도 확인해보면 좋습니다.

BEM: CSS 클래스/아이디 네이밍 컨벤션 중 하나예요. 더 알아보기

kiJu2 · 2024-02-27T09:17:07Z

index.html

+          저장한 링크를<br>
+          <span class="main4-h2-gradient">검색</span>해 보세요
+        </h2>
+        <p class="main4-text-normal">


text-normal과 같은 의미 있는 클래스명. 훌륭합니다 👍 이런식으로 지어주시면 더욱 좋을 것 같아요 ㅎㅎ

kiJu2 · 2024-02-27T09:17:38Z

위클리 미션 진행하시느라 수고 정말 많으셨어요 남경님 !

kiJu2 · 2024-03-12T06:49:24Z

index.html

+<body>
+  <header>
+    <section class="header">
+      <a href="/">
+        <img class="header-logo" src="/images/signin/logo.svg" alt="Linkbrary-logo">
+      </a>
+      <nav>
+        <a href="/signin.html">
+          <input class="header-login" type="button" value="로그인">
+        </a>
+      </nav>
+    </section>
+  </header>
+  <main>  


(예시입니당) 여기서 header가 맞는지 잘 모르겠어요 ㅠㅜ

Create 5 HTML files and 3 CSS files that meet the basic requirements …

527b2e1

…of the 2nd week mission

namgyeonglee added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Feb 25, 2024

namgyeonglee requested a review from kiJu2 February 25, 2024 13:51

kiJu2 approved these changes Feb 27, 2024

View reviewed changes

kiJu2 merged commit 2856ed8 into codeit-bootcamp-frontend:part1-이남경 Feb 27, 2024

namgyeonglee self-assigned this Mar 2, 2024

kiJu2 reviewed Mar 12, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[이남경]Week2 #54

[이남경]Week2 #54

namgyeonglee commented Feb 25, 2024

kiJu2 commented Feb 27, 2024

kiJu2 commented Feb 27, 2024

kiJu2 Feb 27, 2024

kiJu2 Feb 27, 2024

namgyeonglee Mar 8, 2024

kiJu2 Feb 27, 2024

kiJu2 Feb 27, 2024

kiJu2 Feb 27, 2024

kiJu2 Feb 27, 2024

kiJu2 Feb 27, 2024

kiJu2 Feb 27, 2024

kiJu2 commented Feb 27, 2024

kiJu2 Mar 12, 2024

	<section class="main1">
	<section class="landing-section__image--left">

[이남경]Week2 #54

[이남경]Week2 #54

Conversation

namgyeonglee commented Feb 25, 2024

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

kiJu2 commented Feb 27, 2024

kiJu2 commented Feb 27, 2024

commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?

그럼 커밋을 언제 해야 할까요?

관련하여 읽으시면 좋은 아티클을 추천드릴게요:

tl;dr

또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:

tl;dr:

Choose a reason for hiding this comment

해당 파일 확장자를 .svg로 하신 이유가 있으실까요?

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

alt를 좀 더 구체적으로 작성해볼까요?

alt의 목적

다음은 하버드 에듀케이션에서 제안하는 alt 규칙입니다:

tl;dr

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

class/id를 단순히 숫자를 열거하는 것보다 어떤 "목적"인지 작성하는게 어떨까요?

Choose a reason for hiding this comment

kiJu2 commented Feb 27, 2024

Choose a reason for hiding this comment

해당 파일 확장자를 `.svg`로 하신 이유가 있으실까요?

파일 명에 `=`가 있습니다. 의도된 것일까요?

`alt`를 좀 더 구체적으로 작성해볼까요?

다음은 하버드 에듀케이션에서 제안하는 `alt` 규칙입니다:

`class`/`id`를 단순히 숫자를 열거하는 것보다 어떤 "목적"인지 작성하는게 어떨까요?