OK DDODDO LAB

브라우저(익스, 크롬)마다 사이즈며 여백 등이 제각각 (제 맘대로 브라우저 두 개만 맞춤..) HTML (html, header, body 형식은 생략합니다~~) 인쇄영역!! CSS body {margin: 0;padding: 0;} * {box-sizing: border-box;-moz-box-sizing: border-box;} .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: 0 auto; background:#eee; } .subpage { border: 2px red solid; background:#fff; height: 257mm; } @page { size: A4; margin: 0; } @media print { html, b..

모바일 웹과 앱(어플)의 차이점! 헛갈리기 쉬운 모바일 웹과 앱의 차이점에 대해서 알아보겠습니다. 모바일 웹(WEB)은 말그대로 Webpage 입니다. 즉, 모바일웹=홈페이지 입니다. 아래의 캡처사진을 보면 모바일웹처럼 모바일에 맞게 만들어진 홈페이지라고 생각하면 됩니다. 모바일 앱(APP)는 Application 어플리케이션입니다. 즉, 앱=프로그램입니다. 게임같이 설치하여 사용하는 프로그램이 앱에 해당합니다 간단하게 모바일 앱과 웹의 차이를 표로 보여드리 겠습니다. 모바일 앱(APP/Application) 모바일 웹(WEB/Webpage) 개발환경 안드로이드,IOS 등의 각 플랫폼에 맞는 언어 HTML,HTML5,Javascript,CSS 등 업데이트 수정하여 서버에 적용되는 시간까지의 시간 소요, ..

HTML 뒤로가기 CSS /* Default set */ html, body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, a, button, input, textarea, table, th, td, figure, hr, i, b { margin: 0; padding: 0; font-weight: 400; -webkit-text-size-adjust: none; --font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "애플 SD 산돌고딕 Neo",Roboto, "Noto Sans KR", sans-serif; font-family: "Apple S..

HTLM CSS /* Dot Falling */ .examples {position: relative;background: #fff;width: auto;padding: 5% 10%;border-radius: 16px;} .dot-falling {position: relative;left: -9999px;width: 8px;height: 8px;border-radius: 5px;background-color: #80ccff;color: #80ccff;box-shadow: 9999px 0 0 0 #80ccff;animation: dot-falling 1s infinite linear;animation-delay: 0.1s; } .dot-falling::before, .dot-falling::after {c..

HTML click 팝업 title Thank you. popup popup popup popup popup popup popup popup popup popup popup popup popup popup popup 확인 취소 닫기 CSS .sample-modal {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;} .sample-modal .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);} .sample-mod..

반응형 웹(RWD, Responsive Web Design)이란? 사용자의 사용환경과 행동패턴에 유기적이고 적절하게 반응하는 웹요소들에 대한 총체적 디자인을 말합니다. ​협의적 관점에서 본다면 Screen Size, Resolution, Orientation 등 사용 단만환경에 반응하여 웹페이지를 제공하는 것이라 할 수있습니다.즉, 화면 너비에 따라 유동적으로 변하는 유동형 레이아웃과 유연한 이미지 그리고 미디어쿼라가 어우러져서 특정 환경에 최적화 된 방법이 아니라 환경에 반응하여 스스로 적응 하는 방법입니다. 반응형 웹은 % 단위를 사용 하여 각 디자인의 폭에 유동적으로 반응하여 컨텐츠의 크기가 줄거나 커지고 오브젝트에 배령이 달라지기도 합니다. 적응형웹(AWD, Adaptive Web Design)이..

네이티브앱은 소스코드가 html이 아니고 swift, objective c, kotlin, java입니다. 웹뷰(= 하이브리드앱)는 소스코드가 html처럼 보이긴 하는데 프로젝트 폴더 안에 ios를 위한 네이티브 코드, 안드로이드를 위한 네이티브 코드가 섞여 있습니다. 소스코드에 다른 플랫폼은 위한 추가코드가 일절 없고 html만 있으면 웹앱입니다. 멀티플랫폼앱이란것도 있는데, 얘는 소스코드를 보면 dart언어이거나 혹은 얼핏보면 js같은 리액트 네이티브로 작성돼 있습니다 ** 검색앤진 참조 **

UI 유저 인터페이스의 줄인말 -사용자들이 잘 사용 하도록 인터페이스를 디자인하는걸 말해요 특히나 많이 사용되는게 웹이나 앱에서 화면상의 설계를 뜻합니다. 겜할때 스타트 아이콘을 어디에 배치를 해야 하는지 얼마나 커야 하는지 등 화면상에 보여지는 구조등을 설계하죠 UI디자이너 혹은, UI설계, 및 기획 쪽으로 일을 가질수 있어요 UX 유저 경험이라고 합니다. -사용자들의 경험을 반영하여 디자인하는 것을 의미합니다. 사용자들이 화면상에서 왼쪽에서 오른쪽으로 글을 읽는 습관에 따라 왼쪽에 가장 처음에 보여줘야 할 것들을 배치하고 뭐 이런 것들을 의미합니다. UI랑 UX랑 개념이 그래서 비슷비슷해요 완전히 다르지 않아요 그렇지만 UX가 경험에 좀더 포커스를 두고 UI가 인터페이스 설계에 좀더 촛점을 두고 있죠..