(6) CSS3 심화 문법

*Udemy의 "The Complete Web Developer in 2019 : Zero To Mastery" 강의에서 학습한 내용을 정리한 포스팅입니다.

*https://soldonii.github.io에서 2019년 7월 6일(토)에 작성한 글을 티스토리로 옮겨온 포스팅입니다.

*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)

---

1. 주요 렌더링 경로(Critical Rendering Path)

출처 : https://www.udemy.com/the-complete-web-developer-zero-to-mastery/

browser가 website를 불러오려면 server에 필요한 HTML 파일을 요청하게 된다. 파일을 받으면 HTML 파일을 읽기 시작하는데, 읽다보면 CSS 파일, Javascript 파일 등이 추가로 필요한 것을 알게되고, 다시 server에 요청해서 해당 파일을 전송받는다. 파일 뿐 아니라, 예를 들어 google font 사이트에서 font를 CDN 방식으로 가져오게 되면 해당 사이트에 또 다시 요청하고 수신받는 과정도 포함된다.

website는 모든 필요한 파일이 loading 되기 전까지는 rendering되지 않는다. 앞선 포스팅에서 살펴봤듯이, web app의 로딩 속도를 줄이려면 server와 정보를 주고받는 횟수를 줄이고, 주고 받는 파일의 크기를 줄이는 것이 중요했었다.

이 관점에서 font 등 필요한 것들을 CDN 방식이 아니라 파일 자체에 포함시키는 방식을 활용하고, CSS 코드 또한 한 줄로 압축해 파일 크기를 줄이는 등의 노력이 필요하다.

 

☞ CSS Minifier : CSS 코드를 한 줄로 압축해 파일 크기를 줄여주는 website.

 

# Critical Render Path 관련 참고 링크

☞ wonism.github.io/critical-rendering-path

☞ 브라우저는 웹페이지를 어떻게 그리나요? - Critical Rendering Path

 

2. 플렉스 박스(Flexbox)

내가 원하는 요소를 원하는 위치에 구현하는 것은 굉장히 중요하지만 동시에 어렵기도 한 문제이다. 이를 조금이나마 쉽게 할 수 있도록 도와주는 것이 바로 flexbox이다.

☞ css tricks flexbox

☞ flexboxfroggy

 

3. CSS 3

CSS3은 현 시점(2019년) 가장 진화된 버전의 CSS이다. transition, transform 등의 기능이 추가되었다. 마찬가지로 자세한 것은 CSS Tricks 같은 사이트에서 찾아볼 수 있다.

☞ mastering transition and transforms

최신 버전의 언어의 가장 큰 문제는, browser 환경에 따라서 완전히 호환이 되지 않을 수 있다는 점이다. 이러한 경우에는 CSS 파일을 작성할 때 browser 앞에 prefix 를 붙이는 방식으로 이용할 수 있다.

h1 {
  -moz-box-shadow : 4px 4px 5px #888888;
  -ms-box-shadow : 4px 4px 5px #888888;
  -webkit-box-shadow : 4px 4px 5px #888888;
  -o-box-shadow : 4px 4px 5px #888888;
}

아래 사이트에서는 특정 명령어가 browser에서 지원하는지를 확인할 수 있다.

☞ can i use

 

4. 반응형 UI(Responsive UI)

어떠한 상황에서도, 구현하고자 하는 website는 항상 동일하게 보여야 한다. 이렇게 구현된 사이트를 responsive한다. responsive한 UI를 구축하는 것은 website를 설계할 때의 최우선 고려요소가 되어야만 한다.