본문 바로가기

카테고리75

5분만에 Svelte 정적 웹 사이트 Netlify로 배포하기 본 글에서는 Svelte 프로젝트를 정적 웹사이트로 Netlify에 배포하는 방법에 대해 순차적으로 자세히 알아보겠습니다. 이를 위해 먼저 준비해야 할 것들은 다음과 같습니다: Github, GitLab 등의 원격 저장소에 계정이 필요합니다. 이미 생성된 Git 원격 저장소(Repository)가 있어야 합니다. Svelte 프로젝트가 해당 Git 원격 저장소에 연결되어 있어야 합니다. 아래에서는 이러한 준비 작업을 통해 Svelte 프로젝트를 Netlify에 어떻게 배포하는지 단계별로 안내하겠습니다. 1. Netlify란? Netlify 서비스의 개념 Netlify는 정적 웹 사이트를 무료로 호스팅하는 서비스로, CI/CD, 무료 HTTPS, 도메인 관리 등을 지원합니다. 무료 버전과 프로 버전의 차이.. 2024. 1. 23.
Dart의 클래스 - 객체지향 프로그래밍 (Flutter 위젯) 1.  개요 Dart 언어는 객체지향 프로그래밍(OOP)을 기반으로 하고 있으며, 특히 Flutter에서는 UI를 위한 위젯이라는 객체지향적인 개념이 중요한 역할을 합니다. 이 글에서는 Dart의 클래스와 Flutter에서의 위젯에 대해 알아보겠습니다. 2. Dart의 클래스와 객체지향 프로그래밍 2.1 클래스와 객체 클래스(Class): Dart에서 클래스는 객체를 만들기 위한 틀이며, 객체의 설계도입니다. 클래스는 속성(멤버 변수)과 행위(메서드)를 포함합니다. 객체(Object): 클래스를 기반으로 생성된 실체를 의미하며, 클래스의 인스턴스입니다. // Dart에서의 클래스 예제 class Person { String name; int age; // 생성자 Person(this.name, this.. 2024. 1. 22.
Flutter를 위한 Dart 기본 개념 정리 1.  Dart 언어란? Dart 언어는 Google에서 개발한 프로그래밍 언어로, 모바일 앱, 웹 앱, 서버 등 다양한 플랫폼에서 사용되는 다용도 언어입니다. Dart는 다양한 기능과 특징을 제공하며, 강력한 개발 생산성을 지원합니다. 이번 글에서는 Dart 언어의 기본 개념을 소개하고, 간단한 예제를 통해 언어의 특징을 살펴보겠습니다. Dart의 특징 접근성과 안정성: Dart는 널 안전성과 패턴 매칭과 같은 현대적인 기능을 제공하여 안정적이고 안전한 코드를 작성할 수 있도록 도와줍니다. 강력한 타입 시스템은 오류를 미연에 방지하고 코드의 가독성을 향상시킵니다. 생산성: Dart는 개발자가 생산성을 극대화할 수 있도록 합니다. 핫 리로드 기능을 통해 코드를 수정한 즉시 결과를 확인할 수 있어 개발 .. 2024. 1. 21.
HTML, CSS, JavaScript로 인터렉티브한 모달 구현하기 (with transition) 1. 구현 결과 미리보기 2024. 1. 20.
[JavaScript] 스크롤 위치에 따라 상단 프로그래스 바 구현하기 1. 구현 결과 미리보기 HTML 삽입 미리보기할 수 없는 소스 2. 분석 웹 페이지에서 스크롤 위치에 따라 상단에 나타나는 프로그래스 바를 구현하는 방법을 알아보겠습니다. 이 기능은 사용자에게 페이지 스크롤의 진행 상태를 시각적으로 표시하여 사용성을 향상시킬 수 있습니다. 스크롤 프로그래스바를 적용하면 얻을 수 있는 이점 시각적 피드백: 로딩 및 스크롤 중에 프로그래스 바를 통해 현재 진행 중인 작업을 시각적으로 알 수 있습니다. 진행 상태 시각화: 페이지 스크롤 위치를 표현하여 사용자에게 현재 위치 및 전체 콘텐츠 양을 시각적으로 제시합니다. 사용자 참여 유도: 스크롤 시 프로그래스 바의 업데이트로 사용자를 더 많은 스크롤로 유도하며, 새로운 콘텐츠에 호기심을 유발합니다. 페이지 떠나지 않도록 유도:.. 2024. 1. 19.
HTML, CSS, JavaScript로 아래에서 위로 나타나는 액션시트(Action Sheet) 구현하기 1. 구현 결과 미리보기 2024. 1. 18.
HTML, CSS, JavaScript로 애니메이션 효과를 더한 햄버거 메뉴 만들기 1. 구현 결과 미리보기 HTML 삽입 미리보기할 수 없는 소스 2. 분석 웹 디자인 분야에서 햄버거 메뉴는 사용자 경험을 향상시키고 화면 공간을 효율적으로 활용하는 핵심 요소입니다. 이번 글에서는 HTML, CSS, JavaScript를 활용하여 효과적인 애니메이션 효과를 적용한 햄버거 메뉴를 소개하겠습니다. 애니메이션 효과의 중요성 햄버거 메뉴에 적절한 애니메이션을 추가함으로써 사용자에게 시각적인 흥미를 제공하고, 메뉴의 활성화 상태를 명확하게 전달할 수 있습니다. 이는 사용자와의 상호작용을 부드럽고 자연스럽게 만들어주어 전반적인 웹 경험을 향상시킵니다. 애니메이션 효과의 적용 코드에서 .menu.active 클래스가 활성화되면 각 바에 특별한 애니메이션 효과가 적용됩니다. 첫 번째 바는 시계방향으로.. 2024. 1. 17.
[JavaScript] 스크롤 시 나타나는 효과 구현하기: Intersection Observer API 1. 구현 결과 미리보기 HTML 삽입 미리보기할 수 없는 소스 2. 분석 1. 동작 원리: 화면 스크롤 시 요소의 교차 영역을 감지하고, 이벤트를 통해 페이드 인 효과를 부여합니다. 2. 주요 기능: 비동기적 감지: 브라우저 성능에 부담을 주지 않으면서 화면에 보이는 요소의 상태를 확인합니다. 이벤트 기반 실행: 스크롤 시 교차 영역의 변화를 감지하여 콜백 함수를 실행하여 페이드 인 효과를 적용합니다. 이벤트 리스너를 사용자가 `addEventListener`함수로 직접 추가하는 개념이 아니라, `IntersectionObserver API`에 관찰 대상으로 등록된 요소들에 스크롤 이벤트가 추가 됩니다. 활용 예시로 화면에 표시되는 각 섹션에 Fade In 효과를 부여하기 위해 Intersection .. 2024. 1. 16.
HTML과 CSS로 로딩 스피너 만들기: 부드러운 로딩 애니메이션 구현 1. 구현 결과 미리보기 HTML 삽입 미리보기할 수 없는 소스 2. 분석 로딩 스피너의 중요성 웹 페이지나 웹 애플리케이션에서 사용자에게 컨텐츠가 로딩 중임을 시각적으로 알려주는 로딩 스피너는 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 특히, 네트워크 속도가 느릴 때 사용자는 페이지 로딩이 진행 중인지를 인지하고 있어야 합니다. 로딩 스피너의 역할과 사용 기술 소개 로딩 스피너는 주로 네트워크 요청, 데이터 로딩, 페이지 전환 등의 작업이 이뤄지는 동안 화면에 표시됩니다. 주로 사용되는 기술로는 CSS 애니메이션과 트랜지션입니다. 이러한 기술을 통해 로딩 스피너는 부드럽게 회전하면서 사용자에게 로딩 중임을 시각적으로 알려줍니다. 전체 화면 덮는 역할 /* style.css */ .loading.. 2024. 1. 15.
Bootstrap Grid System 그리드 시스템 이해하기 부트스트랩의 그리드 시스템은 레이아웃을 행과 열로 관리하며, 열은 최대 12개의 열을 기준으로 한다. 또한 그리드를 관리할 때 6개의 반응형 중단점을 이용한다. 중단점은 min-width 미디어 쿼리를 기반으로 한다. 즉, 중단점과 그 위에 있는 모든 중단점에 영향을 미친다.(md는 992px이상의 크기에서 모두 적용된다.) Table of Contents Bootstrap Grid System Table of Contents 그리드 옵션 (반응형 중단점) 열 레이아웃 열 자동 레이아웃 Equal-width col 한 열의 너비 설정 col-${number} 가변 너비 열 (fit-content) col-auto 행열 row-cols-${number} 반응형 클래스 (중단점 지정) 중단점 한 열의 너비 .. 2023. 2. 12.
CSS 방법론 BEM (Block, Element, Modifier) BEM은 CSS 설계 방법론 중 하나이다. 공식 문서에서는 BEM을 프론트엔드 개발 시 코드 공유할 수 있는 재사용가능한 컴포넌트 생성에 도움을 주는 방법론이라고 설명한다. 일반적인 CSS를 아래와 같이 작성한다면 #opinions_box h1 { margin: 0 0 8px 0; text-align: center; } #opinions_box { p.more_pp { a { text-decoration: underline; } } input[type="text"] { border: 1px solid #ccc !important; } } BEM 방법론을 적용한 CSS는 아래와 같다. .opinions_box { margin: 0 0 8px 0; text-align: center; &__view-more .. 2023. 2. 11.
CSS로 checkbox, radio 이미지 변경(커스텀) 하기 (with google fonts icon) 1. 분석 HTML input tag의 type중 `checkbox`와 `radio`를 커스텀 이미지로 변경해야 하는 경우가 자주 있다. `checkbox`, `radio`의 보여지는 체크 이미지를 커스텀할때 방법이 CSS, JS등 여러가지 존재하지만 이중 한 번 스타일을 작성해놓으면 HTML tag만 복사해서 재사용 할 수 있는 CSS로 체크박스와 라디오버튼의 이미지 변경하는 방법에 대해 알아본다. `checkbox`와 `radio`의 커스텀을 위해 CSS와 HTML tag의 속성을 같이 사용해야 하는데, HTML tag중 `label`이라는 tag의 `for` 속성과 `input` tag의 `id` 속성의 관계를 이해하는 것이 중요하다. 1.1. input과 label의 id, for 속성 `inpu.. 2023. 2. 8.

티스토리툴바