본문 바로가기
[web network] inlining 이란? [web network] inlining 이란? -웹 사이트에 접속하면 browser 는 먼저 HTML 을 다운받는다.그리고 HTML 을 순차적으로 읽어가며, image, js, css 등을 다운받는다. 이 때 css, js 등의 파일을 전체를 다운받을 경우 느린 인터넷 환경에서는 overhead 가 될 수 있기 때문에, ( 물론 최초 loading 이후에는 cache 를 사용할 테지만.. )자주 쓰이는 코드나, 빨리 load 되어야 하는 코드는 HTML 안에 내용을 넣을 수 있다. 이것이 inline 이다. -css 파일을 async 하게 로딩하거나, footer 쪽에서 loading 하므로써 추가적인 성능 향상도 꾀할 수 있다. -Font file 을 stylesheet 에 base64 encodin.. 2018. 5. 11.
[web network] Domain Sharding 이란? [web network] Domain Sharding 이란? 참조 : https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/ -sharding 이라는 것은 “조각, 파편” 이라는 뜻. -Domain sharding 은 resource 를 여러 개의 domain 으로 나누어 저장하여,page load time 을 향상시키는 일종의 트릭 혹은 방법이다. 여러 개의 domain 으로 나누어진 리소스를 다운받기 때문에 browser 는 더 많은 리소스를 한번에 더 많이 받을 수 있다. -Domain sharding 을 적용하는 이유는 대부분의 web browser 가 한개의 domain 에 대해 active connection 을 제한하기 때문이다.예를 들.. 2018. 5. 10.
AMP HTML 어떤 녀석일까? AMP HTML 어떤 녀석일까? http://hackya.com/kr/amp-html-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%A7%80%EA%B8%88-%EA%BC%AD-%EC%9D%B5%ED%98%80%EC%95%BC-%ED%95%98%EB%8A%94-%EC%83%88%EB%A1%9C%EC%9A%B4-%ED%94%8C%EB%9E%AB%ED%8F%BC/ https://www.ampproject.org/how-it-works/ -Advanced Mobile Pages HTML 의 약자. -웹이 애플과 페이스북의 플랫폼으로 종속되는 현상을 막고자구글이 주도해서 개발한(~ing) 새로운 플랫폼. -웹의 플랫폼 종속이라는 이야기는..컨텐츠와 기술을 가진 기업들이.. 2018. 5. 7.
[web network] SPDY ( 스피디 ) [web network] SPDY ( 스피디 ) Wikihttp://d2.naver.com/helloworld/140351http://www.slideshare.net/oddpoet/spdy-13231459 -두문자어가 아니며, Speedy 를 기반으로 구글이 만든 단어이다.스피디 라고 읽는다. -구글이 개발한 비표준 개방형 네트워크 프로토콜이다. ( HTTP 2.0 에 들어갈 예정 ) -SPDY 가 등장한 배경은 다음과 같다. 더 많은 리소스 다수의 도메인 동적 동작 보안이 중요한 이슈 -웹 페이지 부하 레이턴시를 줄이고, 웹 보안을 개선한다.압축, 다중화(Multiplexing, Pipiline 과는 다르다), 우선 순위 설정을 통해 레이턴시를 감소한다. -하나의 소켓 연결을 통해 페이지를 구성하는 .. 2018. 5. 6.
[Django] 파이썬 웹 프로그래밍 - 웹 프로그래밍의 이해 [Django] 파이썬 웹 프로그래밍 - 웹 프로그래밍의 이해 -책을 읽으며 Remind 하는 내용, 핵심 내용, 모르던 내용을 정리한 것입니다. 예문 및 자세한 설명은 책을 구매하여 보세요~ * 1.2.1. 웹 브라우저를 사용하여 요청 * 1.2.2. 리눅스 curl 명령을 사용하여 요청 -curl 명령은 HTTP/HTTPS/FTP 등 여러 가지의 프로토콜을 사용하여 데이터를 송 수신할 수 있는 명령이다. * 1.2.3. Telnet 을 사용하여 요청 -telnet 명령은 터미널 창에서 입력하는 내용을 그대로 웹 서버에 전송한다.telnet 명령모드에서 나가려면 아래 두 라인을 입력해야 한다. ^] ( Ctrl + ] )quit .. 2016. 12. 6.
어떻게 contents 를 vertical 중앙 정렬 시킬 것인가? ( vertical-align 에 대한 오해 ) 어떻게 contents 를 vertical 중앙 정렬 시킬 것인가? ( vertical-align 에 대한 오해 ) 출처 : http://phrogz.net/CSS/vertical-align/index.html table cell 에서의 vertical-align -css 의 vertical-align 이 valign attribute 와 비슷하게 작동한다.최신 browser 에서는 아래 3개의 코드가 똑같이 작동한다. inline element 에서의 vertical-align -inline element 에서는 align 처럼 작동한다.최신 browser 에서는 아래 3개의 코드가 똑같이 작동한다. 다른 element 에서의 vertically-center 는? -다른 element 에서는 사실 이 .. 2016. 4. 30.
css3 box-sizing property. css3 box-sizing property. 참조 : http://ko.learnlayout.com/box-sizing.html CSS 의 Box model 에서 말하는 width 값은 content box에 해당한다. 해당 view ( box ) 가 차지하는 총 width 의 값은 padding, border 값을 포함하게 되어 직관적이지 않게 되어,기존에는 원하는 width 를 맞추기 위해 padding 을 줄이거나 border 값을 줄이는 방법 등으로 width 를 조절해 나갔다. CSS3 의 box-sizing: border-box 로 지정해주면,안드로이드의 view 체계와 비슷하게 margin 값을 뺀 border-box 를 해당 view 의 width 로 잡게 되어 훨씬 직관적이고 좋다. b.. 2014. 4. 9.
Bootstrap All Functions #4 Bootstrap All Functions #4 Layout Tutorial - Bootstrap Fixed Layout class="container"class="row" Layout Tutorial - Bootstrap Fluid Layout class="container-fluid"class="row-fluid" Responsive Design - How does responsive web design work size 마다 알맞은 css 를 적용해야 한다. Responsive Design - Diving deep into a Responsive Web Design CSS 스크린에 따른 responsive web 을 위해서는 css 파일에 @media 를 명시해주어야 한다. 예를 들어@media (.. 2014. 3. 25.
Bootstrap All Functions #3 Bootstrap All Functions #3 Grid System Introduction. 기본은 940px 에 12columns.responsive 로 724px ~ 1170px 사이로 조정된다. percent 로 계산하는 fluid grid system 도 있다. grid 에 관련된 css 는 row 와 spanx (x = 1~12) 가 있다. css 에서 아래와 같은 문법은 span 으로 시작하는 모든 class 에 css 적용 [class*="span"]{ ...} 기본 grid 에 responsiveness 주기 2가지 환경에서 reponsiveness 가 발동한다.1200px 이상일 때,768px~979px 일때. Offsetting Columns : default grid offsetx .. 2014. 3. 24.
반응형

티스토리툴바