Review

🧩 review content

GitHub Pull Request

1. CSS 작성 순서

사실 CSS에는 정해진 순서가 존재하진 않습니다. 그냥 이후에 적히거나 우선 순위가 있는 속성들이 읽힐 뿐입니다.
하지만 CSS 작성 순서를 지켜야 하는 이유는 빠르게 속성을 읽고 파악할 수 있기 때문에 미래의 나를 위해서, 함께 일하는 동료들을 위해서 순서를 지키는 것이 좋습니다. 😋

표현 방식 ➡ 위치 선정 ➡ 크기와 여백 ➡ 간격 ➡ 테두리와 배경 ➡ 글자 ➡ 이벤트

.myClass {
/* 객체의 노출 여부와 표현 방식 */ 
 display : 
 list-style: 
 overflow:
 
/* 위치와 좌표 */
 position:
 float:
 clear:
  
/* 크기와 여백 */
 width:
 height:
 padding:
 margin:
 
 /* 윤곽과 배경 */
border:
background:

/* 글자와 정렬 */
corlor:
font:
text-decoration:
text-align:
vertical-align:
white-space:

/* 내용 */
content:
animation:
transition:

---

2. Pull Request

💬 conversation

Pr을 할 때 Conversation 란에 개발한 내용에 대해 기록하여 pr을 올리기 때문에 자신이 작업한 내용을 상세히 작성해야 합니다.

---

3. ALTernate

<img src="이미지 경로" alt="대체 텍스트">

🙄 대체 텍스트가 왜 필요한 걸까요?

눈이 불편하거나 장애가 있으신 분들은 보조 기구를 이용해서 기계가 읽어주는 문장으로 웹을 접할 수도 있습니다.

그럴때 로고 혹은 이미지에 대체 텍스트가 없거나 상세히 적혀있지 않는다면 그 분들은 좋은 사용자 경험이 될 수 없을 것입니다.
그렇기 때문에 우리는 꼭! 대체 텍스트를 적는 습관을 가져야 합니다.

만약 background를 이용해 이미지를 삽입하게 된다면 text-indent 속성을 이용해서 화면에는 나타나지 않지만 설명을 적어주는 것이 좋습니다.

이럴 때 HTML <figure> <figcaption> 요소를 사용해 설명을 붙이고 묶어서 하나의 콘텐츠로 만들어주면 더 좋을까요?

[google 문서] SEO 최적화

SEO 최적화를 위한 대체 텍스트 작성 주의 사항

가장 좋은 예: <img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>

---

4. Miss Typing

오타로 인해서 실행되지 않거나 문제가 생기면 찾아내는 것이 매우 귀찮고 어렵습니다. 그러니 제일 좋은 것이 처음부터 잘 하는 것 뿐이겠지요..?

오타를 조심해야 겠습니다😥

---

5. Selector

참고

!important

* 전체 선택자

전체 선택자에는 margin이나 padding등의 값을 초기화 하는데 사용합니다.
그렇기에 전체 선택자는 문서안의 모든 요소를 읽어내려야 하기에 페이지의 로딩의 속도가 느려질 수 있습니다!

element 태그 선택자

.class 클래스 선택자

class 대신 html 태그를 사용할 수 있다면 태그 선택자를 사용 하는 것이 좋습니다. 불필요하게 많은 클래스를 사용하지 않아야 합니다.

#id 아이디 선택자

복합 선택자

• spacing 하위 선택자
• > 자식 선택자
• + 인접 형제 선택자 ➡ 조건이 맞는 바로 옆의 동생에게
• ~ 일반 형제 선택자 ➡ 조건이 맞는 동생들에게

[ ] 속성 선택자

태그 안의 특정 속성과 속성값의 조건에 따라 선택할 수 있다.

• attr = "val" 일치
• attr ~= "val" 여러개 올 수 있는 속성 중 하나라도 포함하면
• attr ^= "val" 속성 값이 val로 시작

  외부로 연결되는 링크를 확인할 때 href^="http://

• attr $= "val" 속성 값이 val로 끝남

  파일이 링크된 경우 확장자를 확인할 때

• attr *= "val" 속성 값에 val이 포함
• attr |= "val" 일치하거나 포함

: 가상 클래스 선택자

• 이벤트 선택자
  • &:active
  • &:hover
  • &:focus
• 구조적 선택자 ( n, first, last, only)
  • &:nth-child
  • &:first-child

    &가 형제요소 중 첫번째 일때

  • &: first-of-type

    &들 중에서 첫번째 &를 선택

  • &:last-child

• not() 부정 선택자

:: 가상 요소(element) 선택자

• ::before 요소의 시작 지점
• ::after 요소의 끝 지점

---

6. Dead property

👻 사용되지 않는 속성 값이 존재한다면 삭제해줍니다.

---

7. CSS 속성 사이 줄바꿈 제거

---

8. Commit

💌 좋은 커밋 메세지

좋은 git 커밋 메시지를 작성하기 위한 7가지 약속

1. 제목과 본문을 한 줄 띄워 분리하기

2. 제목은 영문 기준 50자 이내로

3. 제목 첫글자를 대문자로

4. 제목 끝에 . 금지

5. 제목은 명령조로

   • git 스스로가 자동 커밋을 작성할 때 명령문을 사용합니다.
     그렇기 때문에 커밋 메시지를 명령문으로 작성한다는 것은, git의 빌트-인 컨벤션(Built-in Convention)을 그대로 따른다는 것을 의미합니다.

👍

• Refactor subsystem X for readability
• Update getting started documentation
• Remove deprecated methods
• Release version 1.0.0
• Merge pull request #123 from user/branch

👎

• Fixed bug with Y
• Changing behavior of X
• More fixes for broken stuff
• Sweet new API methods

close 계열은 일반 개발 이슈, fix 계열은 버그 픽스나 핫 픽스 이슈, resolve 계열은 문의나 요청 사항에 대응한 이슈에 사용하면 적당

6. 본문은 영문 기준 72자마다 줄 바꾸기
7. 본문은 어떻게보다 무엇을, 왜에 맞춰 작성하기