분류 전체보기 (484) 썸네일형 리스트형 Grid CSS grid는 레이아웃을 결정하는 디스플레이 요소 중 하나로 테이블처럼 열과 행을 지정해서 원하는 레이아웃을 간편하게 만들 수 있게 해 줍니다. flex와 비슷한 기능을 제공하지만 열이나 행 둘 중 하나의 레이아웃을 지정하는 flex와 달리 grid는 열과 행을 동시에 지정할 수 있습니다. 사용법 먼저 grid와 사용가능한 속성들을 보겠습니다. grid 지정 속성 Template area grid-template-area: grid 레이아웃 지정 (컨테이너에서 지정) grid-area: grid-template-area에 지정된 레이아웃에 들어갈 박스를 지정 (박스에서 지정) Template rows columns grid-template-rows: grid 행의 크기 지정 grid-template-.. Flex CSS flex는 레이아웃을 결정하는 디스플레이 요소 중 하나로 테이블처럼 열 또는 행을 지정해서 원하는 레이아웃을 간편하게 만들 수 있게 해 줍니다. 사용법 먼저 flex와 사용가능한 속성들을 보겠습니다. flex 지정 속성 flex-direction: flex 컨테이너의 방향을 열 또는 행으로 지정 (행이 기본값) flex-shrink: 컨테이너의 크기가 줄어들 때 줄어들 비율 flex-grow: 컨테이너의 크기가 증가할 때 증가할 비율 flex-basis: 기본크기 flex: flex-grow, flex-shrink, flex-basis를 한 번에 지정하는 속성 styling 속성 gap: 간격 정렬 속성 justify-content: 가로 또는 세로 정렬 (플렉스의 방향에 따라 달라짐) align.. Add to Home screen (A2HS) 거의 모든 브라우저에서 제공하는 기능으로 웹앱을 설치할 수 있게 해 줍니다. 설정방법 모바일과 데스크톱의 설정 방법은 같으나 설치에서 조금 차이가 있는데요 먼저 설정방법을 보겠습니다. 설정방법은 간단한데요. 먼저, manifest file을 만듭니다 (root 폴더에 설치 권장). 이때, .webmanifest 또는 .json 연장자를 사용합니다. example.webmanifest 또는 example.json { "background_color": "red", // 배경색이 들어가는 화면에서 제공됨 "description": "test", "display": "fullscreen", "icons": [ // 브라우저 아이콘 { "src": "icon/fox-icon.png", "sizes": "192x.. Web app manifests 웹애플리케이션 정보를 제공하는 파일로 웹애플리케이션 다운로드와 표시할 정보를 담고 있습니다. 참고 Web app manifests | MDN Web app manifests are part of a collection of web technologies called progressive web apps (PWAs), which are websites that can be installed to a device's homescreen without an app store. Unlike regular web apps with simple homescreen links or bookmarks, PW developer.mozilla.org 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이 가능한 경우 발동) 중괄호에는 위 조건이 모두 참일 때 스타일이 적용될 대상과 발동될 스.. 이전 1 ··· 48 49 50 51 52 53 54 ··· 61 다음
