Coding6 [Web] HTML 기초 - ( week 1) 구조 html 태그는 감싸고 있는 태그가 변경되면 내용물도 모두 영향을 받기 때문에 누가 누구 안에 있는지를 이해하는게 중요하다. red div 안에 green div, blue div가 들어있는 상태에서 red div의 위치를 이동시키면 안에있는 green과 blue 또한 함께 이동하게 되며 마찬가지로 green div 의 텍스트 색을 변경하면 안에 있던 버튼의 텍스트 색도 변경된다. 구성 DOCTYPE html> Documents HTML문서의 첫줄은 해당 문서가 어떤 버전의 HTML을 따르는지 나타내는 선언문으로 버전마다 선언방식이 다르다. 현재 선언된 방식은 HTML5 에서 사용되는 선언 방식이다. 꺽쇠안에 키워드가 적혀있는것은 요소 또는 태그라고 부르며 정해진 키워드마다 다른 기능을 가지고 있으.. 2023. 4. 6. [Flutter] 샘플 만들기 - (week 1) Login Page 위젯을 다루면서 예제를 따라서 만들어본다. 예제는 로그인 페이지로 상단에 텍스트를 띄우고 그 안에 공간에서 이미지와 이메일과 비밀번호는 텍스트 입력을 받을 수 있는 요소와 로그인을 진행할 버튼으로 구성되어 있다. 여기서 실제 로그인 기능은 구현하지 않고 보이는 것들만 만들어본다. 우선 main.dart 파일의 코드를 살펴본다. class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { // MaterialApp 또한 위젯이다 return MaterialApp( debugShowCheckedModeBanner: fals.. 2023. 4. 5. [Flutter] 프로젝트 만들기 - (week 1) 프로젝트 생성 우선 바탕화면에 sparta 폴더 안에 flutter로 구분해서 생성한다. 이 폴더에 앱 개발에 관련된 리소스를 저장하고 관리할 것이다. 그리고 VSCode를 실행시킨 후 Flutter 프로젝트를 생성한다. View > Pallete에서 Flutter를 검색하면 자동완성이 되는데 VSCode 확장 프로그램인 Flutter를 설치해야만 볼 수 있다. Flutter:New Project를 선택하고 Application을 선택한다. 그러면 경로를 선택하는 창이 뜨게 되는데 여기서 아까 생성해 둔 폴더를 선택해 주고 프로젝트의 이름을 작성해 주면 Flutter로 개발할 수 있는 기본세팅으로 프로젝트가 생성된다. 여기서 주의할 점은 프로젝트의 이름은 영문 소문자와 _ 문자만 사용이 가능하다. 디렉터.. 2023. 4. 5. [Flutter] 동작 이해하기 - (week 1) Widget Flutter은 모든 것이 위젯으로 만들어져 있다. 이 위젯은 앱을 만드는데 사용되는 작은 모듈이다. 이 모듈들을 레고처럼 조립하면서 화면을 그리는 방식으로 만들어가는데 이렇게 최상위의 위젯이 있고 그 아래 나무의 가지처럼 위젯들이 뻗어나가는 모습으로 이를 위젯 트리라고 하며 이러한 구조로 만들어가게 된다. Widget Catalogue Flutter 위젯 카탈로그 위 링크를 들어가면 사용하고 싶은 위젯들의 코드를 가져다가 그대로 사용할 수 있다. 해당 링크를 통해 페이지에 들어가보면 Cupertino와 Material이 있다. Material Widget Android에서 사용되는 기본 화면 구성 요소를 Flutter에서 재현한 위젯 Cupertion Widget iOS에서 사용되는 화면 .. 2023. 4. 4. 이전 1 2 다음
