atomicdev 님의 블로그

12강: Bootstrap 폼 디자인 및 연동내용 요약Bootstrap을 사용한 폼 디자인:Bootstrap은 웹에서 폼을 디자인할 때 유용한 CSS 클래스를 제공합니다. 간결하고 반응형 폼을 쉽게 만들 수 있으며, 다양한 입력 필드, 버튼, 레이아웃 옵션을 제공합니다.Bootstrap 폼 구성 요소:form-group: 폼 필드를 그룹화하는 클래스.form-control: 텍스트 입력 필드, 선택 상자 등의 스타일링을 위한 클래스.form-check: 체크박스와 라디오 버튼의 스타일링을 위한 클래스.btn: 버튼 스타일링을 위한 클래스.Flutter와의 연동 방법:Flutter 웹 프로젝트에서 Bootstrap을 활용하여 폼을 디자인한 후, 사용자 입력을 처리할 수 있습니다.Bootstrap 폼을 Ht..

11강: 사용자 입력 처리 - TextField와 Form 위젯내용 요약Flutter에서 TextField와 Form 위젯을 사용한 사용자 입력 처리:TextField는 Flutter에서 사용자 입력을 처리하기 위해 사용되는 기본 위젯입니다. 사용자가 텍스트를 입력할 수 있는 필드를 제공하며, 입력된 데이터를 실시간으로 처리할 수 있습니다.Form 위젯은 여러 입력 필드(TextField)를 그룹화하고, 유효성 검증 및 입력 데이터 관리를 쉽게 할 수 있도록 도와줍니다. Form은 폼 전체에 대해 유효성 검증을 수행할 수 있습니다.입력 유효성 검증 및 제출 처리:유효성 검증은 사용자가 입력한 데이터가 올바른지 확인하는 과정입니다. Flutter에서는 Form 위젯과 TextFormField 위젯을 사용하..

10강: Flutter와 Bootstrap을 결합한 UI 디자인내용 요약Flutter 위젯과 Bootstrap 컴포넌트를 결합하여 UI 구성:Flutter는 강력한 위젯 기반 프레임워크로, 모바일, 웹, 데스크탑에서 동일한 코드를 사용하여 UI를 구성할 수 있습니다.Bootstrap은 HTML, CSS 기반의 프레임워크로, 반응형 웹 디자인을 쉽게 구현할 수 있는 다양한 컴포넌트를 제공합니다.이 강의에서는 Flutter 위젯과 Bootstrap 컴포넌트를 함께 사용하여 UI를 디자인하는 방법을 학습합니다. Flutter의 위젯을 사용하면서 Bootstrap의 그리드 시스템과 스타일링을 적용하여 웹에서 유연한 UI를 만들 수 있습니다.두 가지 기술을 혼합하여 유연한 UI 디자인 구현:Flutter의 기본 ..

9강: Flutter의 레이아웃 위젯 - Column과 Row내용 요약Flutter의 레이아웃 위젯인 Column과 Row 소개:Column과 Row는 Flutter의 주요 레이아웃 위젯으로, 각각 수직 및 수평 방향으로 위젯을 배열하는 데 사용됩니다.Column: 위젯들을 세로로 정렬합니다. 주로 텍스트, 이미지, 버튼 등을 세로로 쌓을 때 사용됩니다.Row: 위젯들을 가로로 정렬합니다. 주로 버튼, 아이콘, 텍스트 등을 가로로 나란히 배치할 때 사용됩니다.이 두 위젯은 자식 위젯들을 배열하는 방식에 유연성을 제공하며, mainAxisAlignment, crossAxisAlignment와 같은 속성을 사용하여 레이아웃의 정렬과 간격을 조절할 수 있습니다.위젯을 사용한 레이아웃 구성 방법:Column과 ..

8강: Bootstrap 그리드 시스템 이해하기내용 요약Bootstrap의 그리드 시스템 개념:Bootstrap 그리드 시스템은 레이아웃을 구성하는 데 사용되는 12열 기반의 시스템입니다. 각 열은 화면 크기에 따라 자동으로 크기가 조정되며, 반응형 웹 디자인을 쉽게 구현할 수 있게 해줍니다.그리드는 container, row, col 클래스를 사용하여 구성됩니다. col 클래스에는 col-sm-, col-md-, col-lg-, col-xl-와 같은 접두사가 붙어 특정 화면 크기에서 열의 크기를 정의할 수 있습니다.그리드 시스템을 사용한 반응형 웹 디자인:반응형 웹 디자인은 다양한 화면 크기(예: 모바일, 태블릿, 데스크탑)에서 일관된 사용자 경험을 제공하기 위해 레이아웃이 자동으로 조정되는 디자인입니..

7강: Flutter 위젯 기초 - Text와 Image 위젯내용 요약Flutter에서 가장 많이 사용되는 기본 UI 위젯 소개:Flutter 위젯은 Flutter 애플리케이션의 모든 UI 요소를 구성하는 기본적인 빌딩 블록입니다.Flutter에서 가장 많이 사용되는 기본 위젯으로는 Text와 Image 위젯이 있습니다. 이 위젯들은 텍스트와 이미지를 화면에 표시하는 데 사용됩니다.Text와 Image 위젯의 사용법:Text 위젯:텍스트를 화면에 표시하기 위한 위젯입니다. 다양한 스타일을 적용할 수 있으며, 텍스트 정렬, 색상, 폰트 크기 등을 조정할 수 있습니다.기본적인 사용법:dartText( 'Hello, Flutter!', style: TextStyle(fontSize: 24, color: C..

6강: Bootstrap으로 UI 기본 구성하기내용 요약Bootstrap 개요 및 사용 이유:Bootstrap은 가장 널리 사용되는 프론트엔드 프레임워크 중 하나로, 반응형 웹 디자인을 쉽게 구현할 수 있는 다양한 CSS 및 JavaScript 컴포넌트를 제공합니다.기본적으로 미리 스타일링된 컴포넌트들이 포함되어 있어, 빠르고 일관된 사용자 인터페이스(UI)를 구축하는 데 매우 유용합니다.Bootstrap을 사용하면 웹 애플리케이션의 UI를 보다 쉽게 구성하고, 다양한 기기에서 일관된 디자인을 유지할 수 있습니다.Flutter와 Bootstrap의 조합:Flutter는 주로 모바일 및 데스크탑 애플리케이션을 대상으로 하지만, 웹 플랫폼도 지원합니다. 웹 애플리케이션에서 Bootstrap을 사용하면 기존의..

5강: Dart 언어 기초 2 - 제어문과 함수내용 요약Dart의 제어문:if/else 문: 조건이 참일 때 특정 블록을 실행하고, 거짓일 때 다른 블록을 실행합니다.switch 문: 하나의 표현식을 평가하고, 그 결과에 따라 여러 케이스 중 하나를 선택하여 실행합니다.for 문: 주어진 조건이 참인 동안 코드를 반복 실행합니다. Dart에서는 전통적인 for 루프와 for-in 루프를 모두 사용할 수 있습니다.while 문: 조건이 참인 동안 반복 실행합니다. do-while 문은 조건을 나중에 평가하며, 최소 한 번은 실행됩니다.함수 정의 및 호출 방법:Dart에서는 함수를 정의하고 호출하는 방식이 간단합니다.함수는 void 타입 또는 반환 값을 가지는 타입으로 정의됩니다.Dart에서는 선택적 매개변..

4강: Dart 언어 기초 1 - 변수와 데이터 타입내용 요약Dart의 변수 선언 및 기본 데이터 타입:Dart는 Flutter의 기본 프로그래밍 언어로, 강력한 타입 시스템과 간결한 문법을 제공합니다.Dart에서 변수는 var, final, const, 또는 명시적인 타입(예: int, String)을 사용하여 선언할 수 있습니다.Dart의 주요 데이터 타입:int: 정수형 데이터 타입.double: 부동소수점 숫자(실수형) 데이터 타입.String: 문자열 데이터 타입.bool: 논리형 데이터 타입(true 또는 false).List: 배열 또는 리스트 데이터 타입.Map: 키-값 쌍을 저장하는 데이터 타입.Flutter에서 Dart의 역할:Dart는 Flutter 애플리케이션의 모든 로직을 작성하는..

3강: 첫 번째 Flutter 프로젝트 생성 및 구조 이해내용 요약Flutter 프로젝트 구조 설명:Flutter 프로젝트는 여러 디렉토리와 파일로 구성되어 있습니다. 각 파일과 디렉토리는 프로젝트의 중요한 역할을 하며, 이를 이해하는 것이 중요합니다.주요 디렉토리 및 파일 설명:lib/: 모든 Dart 코드가 포함된 디렉토리로, main.dart 파일이 여기에 위치합니다.test/: 테스트 코드가 포함된 디렉토리입니다.android/, ios/, web/: 각각 Android, iOS, 웹 애플리케이션을 위한 플랫폼별 설정 파일들이 포함된 디렉토리입니다.pubspec.yaml: 프로젝트의 의존성을 관리하는 파일로, 패키지, 플러그인, 이미지, 폰트 등의 정보를 정의합니다.첫 번째 'Hello World..