반응형 디자인 CSS 미디어쿼리

Posted by INDEXN / 2018.05.23

브라우저는 DOM을 구축하면서 문서의 head에 있는 외부 CSS 스타일시트를 참조하는 link 태그를 만납니다. 페이지를 렌더링하는 데 이 자원이 필요할 것이라고 판단한 브라우저는 즉각 자원을 요청하고, 요청의 결과로 아래의 콘텐츠가 돌아옵니다.

왜 CSSOM을 트리 구조로 구성하는 걸까요? 페이지에 있는 어떤 객체의 최종 스타일을 계산할 때, 브라우저는 처음에 가장 일반적인 규칙을 노드에 적용(예를 들어, body의 자식 엘리먼트에게 body의 모든 스타일을 적용)한 다음, 더 구체화된 하위 스타일 규칙을 반영하여 계산한 스타일을 재귀적으로 노드에 재적용합니다. 즉, "cascade down" 방식으로 규칙을 적용하기 때문에 CSSOM을 트리 구조로 만듭니다.

좀 더 구체화하기 위해서 위에 있는 CSSOM 트리를 살펴봅시다. body 태그 안에 있는 span 태그가 가지고 있는 텍스트의 폰트 사이즈는 16 픽셀이고 색상은 빨간색입니다. font-size 지시자를 body에서 span까지 하향식으로 적용하기 때문입니다. 하지만 span 태그가 p 태그의 자식이라면, 브라우저는 이를 화면에 표시하지 않을 것입니다.

그리고 위에 있는 트리는 완전한 CSSOM 트리가 아니라는 사실을 명심하십시오. 기본 스타일을 덮어쓰기 위해서 스타일시트에 작성한 스타일만을 보여주고 있을 뿐입니다. 모든 브라우저는 사용자가 아무런 스타일도 작성하지 않았을 때 볼 수 있는 "user agent styles"라는 기본 스타일 세트를 제공합니다. 사용자가 작성하는 스타일은 간단하게 이런 기본 스타일을 덮어씁니다(예, 기본 IE 스타일). 크롬 개발자 도구에서 "computed styles"을 검사하다가 자신이 지정하지 않은 스타일이 어떻게 적용되어 있는 건지 궁금한 적이 있었다면 여러분은 지금 그 궁금증을 해결했습니다.

CSS 처리 시간은 얼마나 걸릴까요? 크롬 개발자 도구의 타임라인을 기록하고 "Recalculate Style" 이벤트를 보십시오. DOM을 해석할 때와 다르게 타임라인에 "Parse CSS" 과정을 따로 구분해서 볼 수 없습니다. 대신 CSS 해석과 CSSOM 트리 구축 시간에 계산한 스타일을 재귀적으로 적용하는 시간을 더해서 하나의 이벤트로 묶어서 보여줍니다.

 

자세히보기

반응형 웹 디자인 패턴

Posted by INDEXN / 2018.05.23

반응형 웹 디자인 패턴은 빠르게 진화하고 있지만, 데스크톱 및 모바일 장치에서 잘 작동하는 확립된 패턴은 소수입니다. 반응형 웹 페이지에 사용되는 대부분의 레이아웃은 유동형, 열 끌어놓기, 레이아웃 시프터, 미세 조정 및 오프 캔버스라는 5가지 패턴 중 하나로 분류될 수 있습니다. 일부 경우에 페이지에서 패턴 조합(예: 열 끌어놓기 + 오프 캔버스)을 사용할 수 있습니다. Luke Wroblewski가 처음으로 식별한 이러한 패턴은 모든 반응형 페이지에 강력한 시작점을 제공합니다.

유동형 패턴은 주로 유동형 그리드로 구성됩니다. 더 넓은 화면에서는 여백만 조정하므로 대형 화면이나 중형 화면에서 이 패턴은 일반적으로 동일한 크기를 유지합니다.

더 작은 화면에서는 열이 수직 방향으로 쌓이면서 기본 콘텐츠가 재배치됩니다. 이 패턴의 한 가지 주요 이점은 대개 소형 화면과 대형 화면에서 하나의 중단점만 필요하다는 것입니다.

레이아웃 시프터 패턴은 반응성이 가장 뛰어난 패턴이며 여러 화면 너비에 복수의 중단점을 가집니다.

이 레이아웃의 핵심은 다른 열 아래로 이동 및 재배치하는 방식이 아니라 콘텐츠의 자리 이동 방식에 있습니다. 각 주요 중단점 간의 현저한 차이로 인해 유지 관리하기가 훨씬 복잡하고 전체 콘텐츠 레이아웃뿐만 아니라 요소 내의 변경도 포함합니다.



 

자세히보기

서비스워커 라이프싸이클

Posted by INDEXN / 2018.05.23

서비스워커는 웹 페이지와 완전 별개의 라이프싸이클을 갖고 있습니다. 서비스워커를 사이트에 설치하기 위해서는 페이지에서 자바스크립트를 이용하여 등록해야 합니다. 서비스워커를 등록하면 브라우저가 백그라운드에서 서비스워커 설치 과정을 시작할 것입니다. 일반적으로 설치과정에서 정적인 자원들을 캐쉬해야 합니다. 만약 모든 파일들이 성공적으로 캐쉬가 되었다면, 그 때 서비스워커가 설치가 되었다는 것을 의미합니다. 만약 어느 파일이라도 다운로드나 캐쉬에 실패한다면, 설치가 실패할 것이고 서비스워커는 활성화 되지 않을 것입니다 (예를 들어, 설치 완료가 되지 않습니다). 만약 이런 일이 일어나도 걱정하지 마세요, 다음 기회에 다시 시도할 것이니까요. 하지만 이 말은 만약 설치가 이루어지면, 정적인 자원들의 캐슁이 완료 되었다는 것을 의미합니다.

설치가 완료되면, 활성화 단계가 진행되고 이 단계에서 오래된 캐쉬 관리를 할 수 있습니다. 이 부분은 서비스워커 업데이트 단계에서 다루겠습니다.

활성화 단계 이후에, 서비스워커는 해당 스코프 안의 모든 페이지를 제어하지만 서비스워커를 가장 처음에 등록한 페이지는 다시 로딩될 때까지 제어할 수 없습니다. 일단 서비스워커에게 제어권이 넘어오면, 이는 메모리를 절약하기 위해 서비스워커가 중료되거나 네트워크 요청이나 메시지가 일어날 때 fetch나 message event를 처리하는 형태의 2가지 상태 중 하나가 됩니다.

자세히보기