Responsive Web Design

반응형웹은 쉽게 말해, 디바이스 화면의 크기에 따라 웹페이지의 레이아웃이 자동적으로 재조정 되는 것을 말합니다.

기존에는 PC와 모바일기기를 대응하기 위해 선별된 기기 유형에 따른 별도의 독립적인 템플릿 (각각의 *HTML, *CSS 소스)을 이용하였지만,

반응형웹은 미디어퀴리라는 CSS기법을 이용하여 하나 템플릿(HTML, CSS소스)만으로 다양한 환경에서 레이아웃이 변환되어 최적화된 환경을 사용자에게 제공합니다.

사용자 입장에서는 어느 기기에서든 같은 콘텐츠를 적절한 화면으로 볼 수 있고, 개발자 입장에서는 기기마다 따로 웹페이지를 개발하지 않아도 되므로 개발 비용을 절감할 수 있습니다.

*HTML(Hyper Text Markup Language) : 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어.

*CSS(Cascading Style Sheets) : HTML을 바탕으로 만들어진 문서를 꾸며주는 역할.

한 화면은 HTML로 구성되어 있으며 이 화면을 꾸며주기 위해서 CSS파일이 연결 되거나 안에 포함 되어 있다.

mediaquery

<link>

<style>

@import

css

The 960 Grid System

960 Grid System은 단순히 너비가 960px 인 Grid를 사용하여 웹사이트를 배치하는 방법이다.

gulp

create package.json ( 프로젝트 폴더에서 )

PWA

Progressive Web Apps, PWA

PWA를 구성하는 핵심 기술은 Service Worker(오프라인 캐싱)라 할 수 있다.

sublime text

https://www.sublimetext.com/

 

package control

https://packagecontrol.io/installation

The simplest method of installation is through the Sublime Text console. The console is accessed via the ctrl+` shortcut or the View > Show Console menu. Once open, paste the appropriate Python code for your version of Sublime Text into the console.

 

install package

package controll
https://packagecontrol.io/installation#st3

convertToUTF8
Emmet
sftp ( ctrl + alt + u w )
terminal ( ctrl + shift + t )

AMP

AMP(Accelerated Mobile Page)는 웹페이지를 빠르게 렌더링하는 방법이다.
성능과 최적화 측면에서 확실히 우수하다라고 판단되지만 규칙이나 제약사항등의 문제로 적용하기에는 다소 무리가 있어보인다.
이런 이유로 원본페이지와 별도의 AMP용 페이지를 만들어 연결해주는 방향으로 많이 활용되어지고 있다.

배경

자바스크립트는 웹의 필수적인 부분이지만 모바일 웹에서 속도저하를 일으키고, 보안의 취약 등등 여러가지 문제점을 내포하고 있다.

1. 너무 많은 스크립트가 여러 서버에서 로드된다.
2. 스크립트는 네트워크 트래픽을 발생시켜 사용자 비용을 증가시킨다.
3. 스크립트를 요청한 페이지에서 사용하지 않는 스크립트까지 로딩시킨다.
4. 스크립트의 로딩, 파싱 및 실행은 가장 중용한 컨텐츠의 로딩 및 렌더링을 차단한다.
5. 네트워크 장애, 다른 브라우저 런타임 및 호환성 문제로 인해 스크립트는 취약해질 수 밖에 없다.

구글은 웹속도를 늦추는 모든 자바스크립트 코드를 폐기하기로 하였고, 이것이 AMP가 나타나게 된 배경이다.

Google Amp 공식사이트
https://www.ampproject.org

AMP는 어떻게 웹 페이지의 성능을 높일 수 있나 – Naver D2

https://d2.naver.com/helloworld/6856597

[ 특징 ]

비동기 스크립트만 허용
모든 리소스의 크기를 정적으로 지정
확장 메커니즘이 렌더링을 차단하지 않도록 함
모든 타사 JavaScript를 주요 경로에서 제거
모든 CSS는 인라인이어야 하며 크기가 한정되어야 합니다.
글꼴 트리거는 효율적이어야 합니다
스타일 재계산 최소화
리소스 로드의 우선순위 지정

[ 필수 마크업 ]

<!doctype html> doctype으로 시작해야 합니다.
최상위  <html ⚡>  태그를 포함해야 합니다. (<html amp>도 허용됨)
<meta charset=”utf-8″> 태그를 <head>태그의 첫 번째 하위 요소로 포함해야 합니다.
<script async src=”https://cdn.ampproject.org/v0.js”></script> 태그를 <head> 태그의 두 번째 하위 요소로 포함해야 합니다.
<head> 내에 <link rel=”canonical” href=”$SOME_URL”> 태그를 포함해야 합니다.
<head> 태그 내에 <meta name=”viewport” content=”width=device-width,minimum-scale=1″> 태그를 포함해야 합니다.
<head> 태그에 AMP 상용구 코드를 포함해야 합니다.