[CSS] 무료 아이콘, 폰트, 셀렉터

✔️ 무료 아이콘

• 검색을 통해 무료로 사용할 수 있는 아이콘을 쉽게 찾을 수 있다. (검색어: free app icon)
  ▷ boxicons(로그인 안해도 됨)
  ▷ font awesome(로그인 해야됨)
  

✔️ @font-face

• 개발자가 표현하고 싶은 글꼴을 사용자의 기기에 적용할 수 있도록 필요에 따라 웹에서 다운로드하게 하는 기술 -> 웹 폰트 기술 링크
  

✔️ css 글자 스타일링

• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height

✔️ css 글자 세로 정렬

세로 정렬하면 vertical-align: column이 떠오른다.
이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 한다.
세로 정렬이란 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있다.

✔️ 글자 단위

• 절대 단위: px, pt 등
• 상대 단위: %, em, rem, ch, vw, vh 등

✔️ 글꼴 사이즈를 정할 때

1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는
    절대적인 크기로 정하는 경우

• 픽셀(px): 크기가 고정된 절대 단위이기 때문에
                  사용자 접근성이 불리하고
                  인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.

2. 일반적인 경우

• rem: 상대 단위이기에 접근성에 유리하다.
            root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며,
            두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로
            조절해서 사용할 수 있다.

( em을 추천하지 않는 이유는? 😯
부모 엘리먼트에 따라 상대적으로 크키가 변경되기에 계산이 어렵다.
rem은 root의 글자 크기에 따라서만 상대적으로 변하기 때문에
em보다는 rem을 쓰는 것이 좋다.)

• attribute 셀렉터는 같은 속성을 가진 요소를 선택
  a[href] { }
  p[id="only"] { }
  p[class~="out"] { }
  p[class|="out"] { }
  section[id^="sect"] { }
  div[class$="2"] { }
  div[class*="w"] { }

• header > p { } : 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택

• section ~ p { } : 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택

• section + p { } : 인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택

• 가상 클래스 셀렉터

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */

• UI 요소 상태 셀렉터

input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */

• 구조 가상 클래스 셀렉터

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }   //p태그를 가진 첫번째 요소일 때 모두 선택
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

• 부정 셀렉터

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

• 정합성 확인 셀렉터

input[type="text"]:valid { }
input[type="text"]:invalid { }