[TIL] CSS는 왜 Cascading Style Sheets인가? (2일차)

학습내용

---

Cascading Style Sheets

Cascading, 사전적의미로는 '계단식', '폭포가 되어 떨어지는것'이다

즉, CSS의 본질적인 의미는 여러개의 스타일 규칙이 동일한 하나의 요소에 적용될 경우 어느 규칙이 우선 적용될지 정의한 것이라고 봐도 무방하다.

또 CSS는 상속(Inheritance)의 원칙을 담고있는데, 대표적인 예시로 부모요소에서 자식요소로 스타일 속성이 전달되는 것을 말할 수 있겠다.

 

스타일 적용 우선순위

크게 다음과 같이 나눌 수 있다.
0) !important 키워드

1) 인라인 스타일
2) 구체적인 선택자 (id > class == 가상 > 태그 > 전체)
3) 부모요소로부터 상속

cf. 복합 선택자의 경우 각 선택자의 우선순위 점수를 합산해서 정한다고 한다.

 

구글 폰트 활용하기

구글 폰트에서 원하는 폰트를 받아오기 위한 코드를 살펴보면 다음과 같은 것들이 있는데 정확히 무슨 역할을 할지 찾아보았다.

<link rel="preconnect" href="https://fonts.googleapis.com">

rel속성은: 현재 링크와 문서와의 관계를 지정하는 속성이다.

preconnect 속성값 : 브라우저에게 특정한 출처에 대한 연결을 미리 설정하도록 지시합니다.

여기서는 구글 주서버에 미리 연결해줘! 이다.

⇒ 이로인해 DNS 조회, TCP 핸드셰이킹 등 초기 연결 단계를 미리 처리함으로써 지연 시간을 줄인다고 한다.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

=> 해당 코드는 "구글의 CDN에 속한 해당 주소에 미리 연결해줘!" 라고 할 수 있겠다. (“fonts.gstatic.com” 해당 도메인은 구글의 CDN에 속한다고 한다.)
=> Google의 정적 자원(JavaScript 라이브러리, 폰트 등)을 로딩 속도를 향상시키는 데 활용된다.

 

cf. CDN이란?

[기술면접] CDN

그리고 crossorigin 속성은
다른 출처에 있는 리소스를 받아오기 위해 사용한다고 한다.
"해당 리소스 요청은 CORS 정책을 준수하니 막지말아줘!"

cf. CORS란?

<link 
    href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Oswald:wght@700&family=Roboto&family=Source+Sans+3:wght@300;400&display=swap" 
    rel="stylesheet"
>

Google Fonts API를 통해 해당하는 폰트를 요청한다. 여기서는 Fira Sans와 Oswald를 사용해보았다.
그리고 rel="stylesheet"는 말그대로 받아올 리소스가 스타일시트임을 의미한다.

cf. 앞서 정리한 preconnect 외에도 preload, prefetch 방식에 대해서도 정리가 잘 되어있는 아래 블로그를 참고하면 좋을것 같다.
https://velog.io/@fepanbr/HTML-preload-preconnect-prefetch

대체 텍스트

이미지 태그는 다음과 같이 사용되어야 한다.
<img src="경로", alt="대체텍스트">

그런데 대체 텍스트가 왜 필요할까?
=> 시각장애인들도 콘텐츠의 의미를 파악할 수 있도록 하기 위해.
스크린 리더기가 대체 텍스트의 내용을 읽어준다.
=> 웹접근성 향상.

 

웹접근성 관련 레퍼런스 참조 사이트
https://developer.mozilla.org/ko/docs/Web/Accessibility
https://webdir.tistory.com/327

Live Server

VS code에서 우리가 자주 사용했던 Live Server는 로컬 개발 웹서버이다.
우리의 웹사이트를 인터넷에 노출 시키는 것이 아니라,

로컬 컴퓨터에서 로컬 컴퓨터로 웹사이트를 호스트하는 기능을 한다.

inline vs block vs inline-block

inline 엘리먼트
- 줄바꿈없이 한줄에 다른 엘리먼트들과 배치된다.
- 위아래의 여백이나 높이속성 등이 적용되지 않는다.

e.g. span, a, img

block 엘리먼트
- 한줄 전체를 차지한다.
- 전후 줄바꿈이 들어가 다른 엘리먼트를 밀어냄

e.g. h1, div, p, li

inline-block 엘리먼트
- 같은 줄에 다른 엘리먼트와 함께 배치
- block 엘리먼트처럼 높이, 마진, 패딩 제어가능

e.g. button, input, textarea, select

마진상쇄

마진이 더 큰쪽이 우선적용.

block요소에서만 발생한다.
인라인 요소나, display: inline-block; 한경우에는 발생X