전체 글 (464) 썸네일형 리스트형 HTTP vs HTTPS http (Hyper Text Transfer Protocol)는 애플리케이션 층의 프로토콜로 브라우저와 서버 간에 통신을 가능하게 합니다. https (Hyper Text Transfer Protocol Security)는 그 이름에서 알 수 있듯이 http에 보안기능을 추가한 형태로 http과 달리 암호화된 경로 (Secure Socket Layer 또는 Transport Layer Security 인증서 사용)를 사용하여 데이터가 외부에 노출되지 않도록 합니다. http를 사용하는 웹사이트는 아래와 같이 검색창 좌측에 'Not secure'라는 문구가 뜹니다. https를 사용하는 웹사이트는 아래와 자물쇠 기호가 뜹니다. 사용자의 개인정보 등을 전송하지 않는 경우 http를 사용하여도 무관하지만 개.. 반응형 디자인 (responsive design) 반응형 디자인은 하나의 웹사이트의 콘텐츠가 화면의 크기, 디바이스의 종류나 해상도와 관계없이 자연스럽게 표시되도록 하는 설계방식으로 과거와 달리 웹사이트 접근을 위해 사용하는 디바이스가 데스크톱에 국한되지 않는 요즘 웹사이트 제작 시 반드시 고려되어야 하는 요소 중에 하나가 되었습니다. 반응형 웹사이트를 만드는 방식은 아래와 같이 크게 두 가지로 나뉩니다. 1. mobile first design 모바일 화면을 먼저 구성하고 점차 큰 디바이스들의 화면에 맞게 콘텐츠를 늘려가는 방식 2. desktop first design 데스크 톱 화면을 먼저 구성하고 점차 작은 디바이스들의 화면에 맞게 콘텐츠를 줄여가는 방식 반응형 웹사이트 제작 시 활용 가능한 것들 1. 상대단위 웹사이트의 스타일을 담당하는 CSS.. Viewport 뷰포트는 화면의 크기를 말합니다. 과거에는 컴퓨터가 웹사이트에 접근하기 위한 거의 유일한 수단이었기 때문에 뷰포트도 컴퓨터 화면에 최적화되었습니다. 문제는 상대적으로 큰 크기의 컴퓨터 화면에 최적화된 뷰포트는 작은 화면에서 표시되는 콘텐츠와 비율이 맞지 않아 미적기능이 저하되었습니다. 문제는 지정된 뷰포트의 크기보다 기기 화면이 작을 때 발생하는데요. 아래처럼 뷰포트의 크기가 기기 크기보다 클 때 콘텐츠가 화면에 다 표시되지 않습니다. 뷰포트의 설정된 크기보다 기기의 크기가 큰 경우는 무리 없이 화면에 표시됩니다. 디바이스의 종류와 관계없이 뷰포트의 비율을 조정하기 위해 아래와 같이 메타태그를 추가되었고 현재 널리 사용되고 있습니다. 뷰포트 메타태그는 아래와 같은 속성을 가집니다. 1. width 보기처.. Media queries 미디어쿼리는 조건에 따라 스타일을 적용하게 해 주는 CSS의 고급기능입니다. 주로 화면의 크기와 함께 사용되어 반응형 애플리케이션을 구현하는 데 사용되는데요. 사용하는 방법은 미디어 메타태그와 함께 옵션을 지정하여 사용합니다. 기본문법 @media 'mediaTypes' ('mediaFeatures') { targetElement: style } 'mediaTypes'은 기기를 특정하는 값으로 'all', 'print', 'screen' 등의 값을 가집니다. 생략할 경우 'all'이 적용됩니다. 'mediaFeatures'은 조건을 특정하는 값으로 종류와 조건이 다양합니다 (예를 들면 특정입력도구가 hovering이 가능한 경우 발동) 중괄호에는 위 조건이 모두 참일 때 스타일이 적용될 대상과 발동될 스.. 에이 피 아이 - 노티피케이션 Notification API는 해당 애플리케이션을 사용하고 있지 않더라도 알림을 받을 수 있게 해 줍니다. 이상으로 notification API에 대해서 알아보았습니다. 참고 Notifications API - Web APIs | MDN The Notifications API allows web pages to control the display of system notifications to the end user. These are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app develo.. 에이 피 아이 - 웹 푸시 푸시 API는 애플리케이션이 알림을 받을 수 있도록 해 줍니다. 참고 Push API - Web APIs | MDN The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and update developer.mozilla.org HTML 삽입 미리보기할 수 없는 소스 클라이언트 측 데이터 저장소 - 인덱스드 디비 indexed db는 사용자의 브라우저에 데이터를 저장하는 기능을 말합니다. 클라이언트 측에 데이터를 저장한다는 점에서 웹스토리지와 비슷하지만 더 많은 데이터를 저장할 수 있는 장점이 있습니다. indexed db는 일반적인 데이터베이스처럼 생성, 저장, 활용하는 단계를 거칩니다. 생성하기 open("dbName", version): 데이터베이스 열기 (존재하지 않는 경우 새로 생성됨). 참고로 스키마 (데이터베이스의 구조)는 버전에 따라 달라집니다. const req = window.indexedDB.open("cars", 3); open 사용 시 바로 데이터베이스가 열리는 것이 아니라 요청에 대한 성공 또는 실패가 반환됩니다. 다만, 데이터베이스를 생성하거나 버전을 변경할 때는 '.onupgraden.. 클라이언트 측 데이터 저장소 - 웹 스토리지 (Web Storage) 웹 스토리지는 사용자의 브라우저에 데이터를 저장하는 기능을 말합니다. 웹 스토리지는 서버로 데이터를 전송하지 않는다는 점에서 쿠키를 사용하는 방식에 비해 안정성이 높고 쿠키에 비해 더 많은 데이터를 저장할 수 있습니다. HTML에서 제공하는 웹스토리지 객체는 아래와 같습니다. localStorage: 저장되는 데이터의 만료기한이 없음 sessionStorage: 브라우저 세션이 종료되면 데이터도 사라짐 사용방법 사용방법은 아래와 같이 저장할 정보를 'setItem('key', 'value')를 통해 추가하고 이후 getItem('key'), removeItem('key')를 사용하여 저장된 정보를 불러오거나 지우는 방법으로 활용합니다. 1. localStorage ▶ 데이터 저장 localStorage... 이전 1 ··· 46 47 48 49 50 51 52 ··· 58 다음
