Advanced CSS(2021-02-05)

- 웹개발을 배우기 위해 Udemy에서 the-complete-web-developer-zero-to-mastery를 수강한 내용을 정리하는 포스팅입니다. 

- 틀린점이있거나 다른 의견이 있으시다면 언제든지 댓글로 남겨주시면 감사하겠습니다 :)

---

Critical Render Path

웹사이트가 화면에 무언가를 나타내기 위해서 사용하는 path를 의미한다. 
(여기서 render는 화면에 표시되는 것을 의미)

브라우저가 HTML파일을 받아오면 해당 파일을 읽어들일것이다. 

HTML파일을 읽어내리던중 CSS 파일이 필요하다는걸 알게되고 서버에 CSS 파일을 요청한다. 

그러면 브라우저는 이제 CSS와 HTML을 보면서 어떻게 브라우저가 화면에 표시되어야할지를 처리하게됨.

그런데 폰트또한 필요한걸 알게 되면 구글폰트 서버에 가서 폰트도 요청하게된다. 

HTML과 CSS만 먼저 보고 화면을 표시할수는 있지만 폰트파일이 올때까지 텍스트가 바로 안나타 날 수 있다. 

이렇게 CSS와 폰트 파일을 읽어오느라 웹사이트 로딩이 느릴수 있다. 그러면 어떻게 해결 할수 있을까?

-> 1. 자체 폰트파일을 브라우저가 이미 가지고 있거나. 

-> 2.  CSS의 크기를 줄여서 더 빨리 읽을 수 있게 해줄수도 있다. (cssminifier.com/)

Flexbox

CSS에서 어려운 것중 하나는 원하는 곳에 원하는 아이템을 표시하는 것이다. 
-> flexbox를 이용해서 해결이 가능하다. 

css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-Tricks

container 클래스에 display: flex를 이용하면 

이렇게 쉽게 이미지 사이트를 만들수 있다. 

이하의 사이트에서 flexbox를 연습해볼 수 있고 cheetsheet도 참고해보자. 

Flexbox Froggy

darekkay.com/flexbox-cheatsheet/

Flexbox Cheatsheet

CSS 3

HTML과 마찬가지로 CSS도 지속적으로 발전한다.

transition처럼 나중에 추가된기능들은 브라우저별로 지원이 되는 곳이있고 안되는 곳이 있다. 
이하의 링크들을 통해 어떤 곳에서 지원이 되는지 확인이 가능하다. 

www.w3schools.com/cssref/css3_browsersupport.asp

CSS Reference Browser Support

caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

Responsive UI

어느기기를 사용하거나 어느 화면크기가 되더라도 화면이 잘리는 부분없이 제대로 나오는 것을 responsive라고 말한다.