늘 겸손하게

목차 반응형 웹이란? Media Queries Fluid Grids Mobile - first Approach ( 모바일 우선 ) FlexBox CSS Grid (Grid Layout) 반응형 웹 이란 반응형 웹 (Responsive Web)은 사용자가 사이트에 접속한 하드웨어 크기에 따라 페이지가 재배열되는 웹을 말합니다. 사용자는 태블릿, 데스크톱, 스마트폰, 노트북 등 다양한 하드웨어로 사이트에 접속할 수 있기 때문에 웹 페이지를 접속된 기기의 크기에 따라 최적화되어 배치하는 반응형 웹 개발은 웹 사이트 개발에서 필수적입니다. 반응형 웹 개발 방법에는 아래와 같은 기술, 방식이 있습니다. 1. Media Queries (미디어 쿼리) CSS3의 기능으로, 사이트에 접속한 기기(미디어)의 특성에 따라..

크로스 브라우징이란 무엇일까? 크로스 브라우징 정의 표준 웹기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법. 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것. 즉, 사용자가 어떠한 브라우저로 접속하여도 거의 유사한 웹 사이트를 볼 수 있도록 사이트를 개발하는 것을 Cross Browsing이라고 할 수 있다. 크로스 브라우징을 한글로 해석하면 "웹 페이지의 상호 호환성 구축"으로 이해할 수 있다. 100% 똑같이? 브라우저마다 OS가 다르고 글꼴이 다르며, HTML을 렌더링하는 엔진이 다르기 때문에 모든 웹 브라우저에..

사이트 속도를 높이는 방법을 알아보자 목차 CDN 사용하기 더 좋은 호스팅 서비스를 찾자 웹 사이트 이미지 크기 최적화 플러그인 숫자 줄이기 JavaScript, CSS 파일 최소화 웹 사이트 캐시 사용 Gzip 압축 사용 CMS의 데이터베이스 최적화 웹 폰트 (Web Font) 사용 줄이기 404 에러 찾기 Prefetching technique(미리 불러오기) 사용하기 1. CDN 사용하기 CDN은 Content Delivery Network의 약자로 다양한 지리적 위치에 분산된 웹 서버들의 집합입니다. 서버를 한 개만 구축한다면 해당 서버에 부하가 심해질 것이고 먼 거리에서 오는 요청을 처리하는 시간이 늦어지므로 CDN을 통해 사용자의 요청을 가장 근처의 서버로 리다이렉팅 할 수 있습니다. 가격이 ..

쿠키, 세션, 웹 스토리지가 왜 필요한지 알려면 HTTP 프로토콜의 특징을 알아야합니다. HTTP 프로토콜 특징 1. 비연결지향 ( Connectionless ) : 서버가 클라이언트의 Request에 Response하면 연결이 끊긴다 2. 무상태 ( Stateless ) : HTTP 프로토콜은 상태 정보를 저장하지 않는다. 즉, 사용자의 로그인 정보 등 서버에 접속한 경우 유지되어야하는 데이터들을 HTTP 프로토콜은 처리하지 못합니다. 요청에 응답하면 연결이 끊기고, 상태 정보를 저장하지 않기 때문에 페이지를 이동할때마다 유지되는 데이터가 존재하지 않습니다. 페이지를 이동할때마다 새로 로그인을 해야한다면 굉장히 불편할것입니다. 위 문제를 쿠키, 세션, 웹 스토리지를 이용해 해결합니다. 쿠키 클라이언트(..