[멋쟁이 사자처럼 프론트엔드 스쿨] 11일차 TIL - 텍스트 및 글꼴, 상속, 명시도, 자손 선택자, 가상 클래스

🍰 CSS 진도, 과제 리뷰.

🍴 텍스트 및 글꼴

단위 

: 절대 단위 px(픽셀)

• 지정 안했을 때 기본 글자 크기 - 16px
• 글자 크기가 항상 지정된 픽셀로 고정됨

: 상대 단위 em, rem, vw, %

• em - 부모로부터 상속. ex) 2em은 부모 요소 폰트 크기의 두 배
• rem - html 요소(루트) 기준으로 계산. 
• vw(Viewport Width), vh(Viewport Height) - viewport 기준으로 계산. ex) 50vw는 화면의 절반 차지. 화면을 줄이면 같이 줄어듦.
• % - 부모 요소에 대한 상대적 크기. font-size, padding, margin에 따라 계산 방법 달라짐.

: 넘버(number) 단위

• 숫자만을 값으로 가지는 상대적인 단위.
• line-height에서 주로 사용 - 줄의 높이 설정 시 사용. 
• 값이 숫자면 해당 숫자의 배수로 현재 폰트 크기에 적용됨.

글꼴

: font-weight

• 텍스트의 굵기 지정
• 숫자 값 - 100~900까지의 숫자 값(폰트에 따라 모든 단계가 표시되지 않을 수 있음)
• 상대적인 값 - normal: 기본값, bold: 700에 해당하는 굵기
• 키워드 값 - lighter: 부모 요소보다 상대적으로 가벼운 굵기, bolder: 부모 요소보다 상대적으로 굵은 굵기

: 전체 속성 그룹 - font

• 전체 속성 그룹 -> 특정 속성 집합. 특정 스타일 한 번에 적용.
• font-family, font-size, font-style, font-weight, line-height 등 포함
• 예) font: bold italic small-caps 60px /1 "SUIT Variable"
• line-height 사용 시 '/'기호를 앞에 붙이기
• font-family는 반드시 마지막에 작성

🍴 상속(inheritance)과 겹침

: 상속은 요소의 속성 값이 따로 지정되지 않은 경우 발생. 부모 요소의 computed value로 설정됨. 상속되지 않는 속성은 기본적으로 속성의 초기 값으로 설정.

• 논리적으로 생각하자!
• border가 상속되지 않는 이유 -> div가 많을 때 div안의 div안의 div에 모두 border가 적용된다면 어떻게 되겠는가...
• width같은 크기, 규모에 영향 주는 건 대부분 상속되지 않음.
• 개발자 도구 -> computed에 inherit인 값은 상속 받음

: 명시도(Specificity) - 선택자의 우선 순위를 결정하는 방법

선택자 유형

1. 유형 선택자(ex.h1) 및 의사 요소(ex.:before) => 파워1
2. class 선택자, 속성 선택자([type="radio"]), 의사 클래스(:hover) => 파워10
3. id 선택자 => 파워100
4. 인라인 스타일(style="color: grey")은 항상 외부 스타일 시트의 모든 스타일 덮어씀 => 파워1000

: 선택자 명시도 높이는 방법

• heading => h1.heading(요소 이름이 h1이면서 class 이름이 heading인 것.) => 파워 11

: !important 예외

• 다른 선언보다 우선함
• !important 자체는 명시도와 관련 X, 명시도에 직접 영향 미침
• But !important 사용은 나쁜 습관. 스타일시트 내 자연스러운 종속 깨뜨림
• !important 남발 -> 나중에 선언된 게 적용됨.

🍴 선택자

• 자손 결합자(descendant combinator): 부모 요소의 모든 하위 요소 ex. h1 .heading - h1안의 class가 heading인 요소
• 자식(>) 결합자(child combinator): 부모 요소의 직접적인 자식 요소 ex. h1>.heading - h1의 직접적인 자식 .heading
• 일반 형제 선택자(~): 특정 요소의 다른 형제 요소 중 선택. ex. h1~.heading - h1 다음에 나오는 모든 .heading 선택
• 인접 형제 선택자(+): 특정 요소의 인접한 형제 요소 선택. ex. h1+heading - h1 다음에 나오는 첫 번째 .heading 선택
• 속성 선택자(attribute selector): 속성 값의 조건에 따라 스타일 적용. ex. a[href^="https://"]

🍴 하이퍼링크 가상 클래스(Pseudo Class)

가상 클래스: 선택자에 추가하는 키워드. 선택한 요소가 특별한 상태일 때 선택하여 스타일 적용.

• :link - 방문하지 않은 링크
• :visited - 방문한 링크
• :active - 활성화 링크
• :hover - 마우스 올렸을 때
• :focus - 키보드로 링크 영역에 이동했을 때