HTML

웹접근성

• aria-hidden="true" 속성값을 주면 screen reader에서는 읽히지 않는다.
  => 특수문자같이 시각적으로는 필요하지만 읽어줄 필요가 없는 부분들에 사용

속성

• title
  => 전역속성
  => 마우스를 올리면 보이는 툴팁
• alt
  => img태그에서 alt속성은 필수
• data-
  => 전역속성
  => 사용자 정의 속성
  => react에서 많이 사용

요소

설명 목록

• dt와 dd는 가급적 1대1 대응으로 하자
• dl은 div를 자식으로 둘 수 있으나,
  div의 자식으로 dt, dd를 가질 때는 쌍으로 가져야만 한다.
• 문법상 제한이 많아 현업에서 선호하진 않는다.

어휘

• i
  => 기술적 용어, 관용구, 생각 등에 사용

텍스트 레벨

• sub
  => 아래 첨자
• sup
  => 위 첨자
• mark
  => 글자 하이라이트 시키기
• abbr
  => 줄임말
  => 줄임말을 title 속성으로 설명
• s
  => 더이상 관련이 없거나 정확하지 않다는 표시
• small
  => 저작권, 법적 관련 용어, 주석 및 작은글씨

그룹핑

• address
  => 조직 및 단체에 관한 정보
  => footer에 사용

임베디드

문서에 포함할 수 있는 컨텐츠 요소

• picture
  => 반응형 이미지 구현
• video
  => 자동재생하려면 autoplay 논리속성 추가
  단, muted 속성을 추가해야 함(웹 접근성 고려)
• map
  => 하나에 사진에서 좌표값으로 각각 다른 링크로 연결되도록 하고 싶을 때

• fallback
  => 여러가지 확장자의 파일들을 추가로 넣어서
  올려둔 파일을 지원하지 않을 경우에 대체되도록 하여 출력되도록 하는 것

테이블

• tr
  => 행
• th
  => 열 머리글 또는 행 머리글에 사용
  => scope 속성으로 열인지 행인지 표시하기
  => 복잡할 때는 id/headers 방식 사용
• td
  => 내용
• thead, tfoot은 한번만 사용하나,
  tbody는 여러번 사용할 수 있다

폼

웹 문서가 상호작용되도록 사용

• 폼 관련 요소에는 lable이 반드시 있어야 한다.
• lable
  => 폼 관련 요소에 대한 설명
• button태그가 form태그 밖에 있어도 가능하다.
  => form태그에 id를 주고 button태그에 form속성을 줘서 연결

컨테이너

컨테이너 요소들은 아무런 의미가 없기 때문에 적절한 시멘틱 요소가 없을 때만 사용하도록 하자

• div
  => 블록 컨테이너
• span
  => 인라인 컨테이너, 인라인 요소들만 감쌀 수 있다.

하이퍼링크

하이퍼링크의 보안 취약성

• target blank 속성이 적용된 링크 열 때를 이용한 탭 내빙 공격이 있다
  (새롭게 열린 페이지에서 원본 페이지에 접근하는 피싱공격)
  => rel="noopener" 속성값으로 원본 페이지와 별개로 새로운 최상위 브라우징 컨텍스트를 생성하도록 링크를 열어서 방지한다.
  => rel="noreferrer" 속성값으로 해당 링크를 클릭할 때 사용자가 어디서 왔는지에 대한 정보를 주지 않는다.
  => 구형 브라우저에서는 norefferer만 사용이 가능하여, 일반적으로 두 속성값을 같이 사용한다.

GIT

COMMIT

• WORKING DIRECTORY에서 HEAD로 한번에 커밋
  => git commit -am "커밋메세지"