AR삽질러

CSS - Flexbox 1. Flexbox - flex-direction의 디폴트는 row - inline block의 문제점을 해결하기위해 flexbox flexbox사용규칙 1) 자식에게 어떤것도 명시하지 않고 부모엘리먼트에게 명시한다. flex-direction, justify-content, align-items를 적용하고 싶다면 먼저 부모를 display:flex로 만든다. 2) flex컨테이너는 주 축(main axis)수평 와 교차축(cross axis)수 Flex Container는 두개의 축을 가지고 있다. 주요 Flexbox의 속성 flex-direction 주 축(main axis)를 정의한다. row row-reverse column column-reverse justify-con..

HTML Form Tags - (2) https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에 developer.mozilla.org - body 태그 내에 있는 콘텐츠가 브라우저에 표시된다. - 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다. - 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존해한다. -..

Flutter Reusable Cards 재사용가능한 위젯 const CurrencyCard( name: 'Euro', code: 'EUR', amount: '6 428', icon: Icons.euro_rounded, isInberted: false, ), Transform.translate( offset: const Offset(0, -20), child: const CurrencyCard( name: 'Bitcoin', code: 'BTC', amount: '9 785', icon: Icons.currency_bitcoin, isInberted: true, ), ), Transform.translate( offset: const Offset(0, -40), child: const CurrencyCa..

Flutter Cards import 'package:flutter/material.dart'; import 'package:toonflix/widgets/Button.dart'; void main() { runApp(const App()); } class App extends StatelessWidget { const App({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: const Color(0xFF181818), body: Padding( padding: const EdgeInsets.symmetric(horizontal: 28), child: ..

Flutter VSCode설정 처음 Flutter로 코딩을 할때 정말 불편했던건 가독성이다.. 안그래도 불편한데 아래와 같은 파란줄때문에 미칠것같았다.. 파란줄을 없애는 방법은 1. settings.json 을 연다. 2. 아래의 코드를 넣어주고 저장 후 mani에 가서 저장을 눌러주면 파란줄이 사라진다. "editor.codeActionsOnSave": { "source.fixAll": true, }, 가독성을 높여주는 또 하나의 VSCode설정은 부모가 어떤것인지 표현해주는 설정이다. 현재 코드에서 어떤게 부모인지 찾으려면 시간이 걸리고 가독성이 상당히 떨어질수 있다. 1. 위와같이 settings.json을 연다. 2. 아래의 코드를 추가한다. "dart.previewFlutterUiGuides":..

Flutter Developer Tools와 Button 지난시간에는 header부분을 구현하였다. 0. Flutter Developer Tools와 Button Developer Tools(개발자도구)는 Flutter앱 개발, 디버깅 등 앱을 효과적으로 개발하는데 도움이되며 앱의 성능을 최적화하기위한 도구이다. ㅁduvdp < 이렇게 생긴 버튼을 눌러 실행할 수 있다. Layout이 적응되지 않는다면 개발자도구에 들어가면 현재 구현된 Widgets들의 구 App이 어떻게 구성되어있는지를 보여준다. 이곳에서 다른 정렬을 미리보기 할수 있고 수정을 통해 어떻게 보일지도 확인할 수 있다. 이 기능을 활성화 시키고 시뮬레이터로 클릭하면 Widget을 선택하는것이 가능하다. || 이렇게 생신 버튼을 활성화 시키..

Flutter UI Design import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Color(0xFF181818), // 배경색을 검은색(0xFF181818)으로 설정 body: Padding( padding: EdgeInsets.symmetric(horizontal: 28), // 가로 여백 추가 child: Column( children: [ SizedBox( height: 80, //..

Flutter Start 0. VSCode설치 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com 1. Extension : Dart설치 2. E..

Dart Class2 1. Enums - Dart의 열거형(Enum)은 고정된 상수 목록을 정의하는데 사용되는 데이터 형식이다. - Enum을 사용하게 되면 코드를 읽기 쉽고 실수를 없애며 이해하기 쉽게 만들 수 있다. enum Hoby { board, ski } class Intro { String name; int age; Hoby hobby; Intro({required this.name, required this.age, required this.hobby}); void sayHello() { print("안녕하세요. 저는 $name이고 나이는 $age입니다. 그리고 취미는 $hobby입니다."); } } void main() { var ar = Intro(name: "아랑", age: 25, h..

Dart Class Class는 객체지향프로그래밍(OOP)에서 핵심적인 개념으로 데이터와 해당 데이터를 조작하는 함수를 하나로 묶어 표현하는 방법이다. Class는 동일한 Class로 생성된 Object(객체)객체들은 클래스의 맴버변수와 메서드를 공유한다. - Function에서 Variable을 사용할때 var를 사용하면 타입을 명시할 필요가 없었지만 - Class에서는 property를 선언할때 반드 타입을 사용해 정의한다. 0. Class Definition(클래스 정의) class Intro { String name = '아랑'; int age = 25; } void main() { var intro = new Intro(); print(intro.name); // 아랑 intro.name = '..