Appendix/Daily Story(4)

• CSS 상하좌우 수직수평 가운데 중앙 정렬의 모든 것 "초보자용"

  안녕하세요. 오늘은 저처럼 웹개발 초보자들을 위한 컨텐츠를 작성해보려 해요. 그 중에서도 웹개발의 3대장(HTML, CSS, JS) 이라고 불리우는 것 중에서 CSS의 가운데정렬을 알려보려 합니다. 특히 저같이 초보자들이 참 많이 시행착오를 하는거 같은데 조금이라도 시행착오를 줄이고, 원하는 기능을 정확히 구현하기 위해 제가 직접 시행착오 끝에 얻어낸 결과물로 내용을 작성해보려 하며 또한 저 역시 잊어버리면 안되기때문에 기록물로써 작성해볼려 해요. 이 글을 통해 웹개발을 하시는 초보자분들에게 도움이 되었으면 하네요. 자 그럼 시작해 볼까요! 목차(차례) 블록요소 가로 중앙 정렬 CSS를 통해 가로 중앙 정렬을 하는 방법은 여러가지가 있지만 가로 중앙정렬을 시키기 위해서는 이 요소가 블록요소인지 인라인 요..

  2023.09.14

• Progress Loading bar for PWAs (프로그레스 로딩바)

  PWA (프로그레시브 웹 앱, Progressive Web Apps) 를 더욱 네이티브 앱처럼 보이기 위한 것으로 여러가지 방법 중 오늘은 페이지 최상단 영역에 프로그레스 로딩바를 설치해 보려합니다. 목차(차례) Progress Loading bar for PWAs (프로그레스 로딩바) 먼저, 유튜브 웹사이트를 방문해 보시면, 첫 화면에 최상단 빨간색으로 로딩바가 지나가는 것을 볼 수 있습니다. 유튜브뿐만 아니라 보여줘야 할것이 많은 최대수의 메이저 플랫폼에서는 많이 적용하고 있는 것중에 하나이기도 하지요. 오늘 우리가 할 일이 바로 이것입니다. 페이지 상단에 로딩 상태만큼 좌에서 우측으로 흘러가는 Progress Loading bar (프로그레스 로딩바) Progress Loading bar 설치요소 ..

  2023.08.15

• PWA를 위한 4가지 스텝

  PWA를 위한 4가지 스텝 1. 모바일 웹 어플리케이션 - HTML, CSS, JavaScript 2. HTTPs 3. App Manifest / JSON 4. Serivce Worker / js PWA로 iOS에서 푸시알림 보내기 https://www.youtube.com/watch?v=eSj25owrmTM PWA관련 유용한 사이트 1. PWA빌더 https://www.pwabuilder.com/ PWABuilder www.pwabuilder.com 2. 워크박스 https://developer.chrome.com/docs/workbox/ Workbox - Chrome Developers Production-ready service worker libraries and tooling. developer..

  2023.08.15

• PWA(프로그레시브 웹 앱, Progressive Web Apps) 적응기

  오늘은 PWA(프로그레시브 웹 앱, Progressive Web Apps)에 대해 알아보고, 오프너스 창업플랫폼에서 운영하는 모바일 웹 플랫폼에 해당 PWA기술을 도입 적용하는 중입니다. 관련하여 PWA에 대한 인식이 너무 낮고 설치에 어려움이 있는지라 PWA가 무엇인지에 대한 간단히 알려보고 계속적인 오프너스 PWA 적응기에 대한 리뷰를 해보려 합니다. 목차(차례) 기술 용어 1. SPA : Single Page Application 하나의 페이지로 구성된 앱 필요한 부분만 갈아 끼운다 2. MPA : Multi Page Application 여러개의 페이지로 구성된 앱 페이지별로 html, css, js를 받아와서 화면을 그린다. 페이지의 이동 3. NA : Native App / Native App..

  2023.08.14