분류 전체보기 (667) 썸네일형 리스트형 [Django] Bootstrap 기초 이번에는 Bootstrap 의 기초에 대해서 알아보겠습니다. button, form 예시 // CSS .btn-danger{ color:black; background-color: rgb(78, 68, 216); } .btn-danger:hover{ background-color: blue; color:red; } // HTML Primary Secondary Success Danger text Info Light Dark Link Email address We'll never share your email with anyone else. Password Password must contain 10 letters Check me out Submit 결과화면 HTML 삽입 미리보기할 수 없는 소스 Navi.. [Django] CSS 기초 이번에는 CSS의 기초에 대해서 알아보겠습니다. CSS 파일을 사용하는 샘플 기초 // 일반적인 태그명에 스타일 적용하는 방법 h1{ color: rgba(255, 89, 0, 0.338); } h2{ color: greenyellow; background-color: black; } body{ background-color: cornflowerblue; } div{ color: blue; background-color: orange; /* border-color: orange; */ border-width: 20px; border-style: dashed; } span{ color: red; } Heading Here Heading Two Outside a div Inside a div Inside a.. [Django] HTML 기초 간단하게 HTML 정말 기초부분만 간단히 언급하고 지나갈 예정입니다. list 예시 I love HTML5 because it is cool! This is a Heading emaaa first=1 second third first=1 second third 결과 화면 div, span 예시 sentence one sentence tow sentence three sentence four 4 결과화면 HTML 삽입 미리보기할 수 없는 소스 image, anchor 예시 sentence one sentence tow sentence three sentence four 4 Example HTML Click Here Click Here 결과화면 table 예시 COL1 COL2 COL3 X O X O X O.. [Flutter] Clone - 당근마켓53(Chat - 5) 동시 채팅 및 실제 정보 매핑 이번에는 채팅 화면에 실제 데이터를 매핑하고 동시 채팅을 실행해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구현은 아래와 같습니다. 1. 내가 포함된 채팅방을 보여주는 화면 - 내가 팔거나 살려고 하는 채팅방 리스트 입니다. 게시글 제목과 마지막 메시지 등을 표시 2. 채팅방 리스트에서 클릭을 하면 해당 채팅방이 보여짐 - 상단의 아이템 정보를 실정보로 매핑(게시글제목, 금액, 가격제안 여부, 아이템 이미지 표시) 실제 메시지 구현 동영상입니다. ./src/repo/chat_service.dart - 내가 포함된 채팅방 조회 함수 Future getMyChatList(String myUserKey) async { List chatrooms = []; // t.. [Flutter] Clone - 당근마켓52(Chat - 4) 메시지 스타일 이번에는 채팅 화면을 좀 더 실제처럼 스타일을 적용해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구현은 아래와 같습니다. ./src/screens/chat/chat.dart - 채팅 말풍성 위젯 import 'package:extended_image/extended_image.dart'; import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import '../../models/chat_model.dart'; const roundedCorner = Radius.circular(20); class Chat extends StatelessWidget { final Size size; f.. [Flutter] Clone - 당근마켓51(Chat - 3) 메시지 표시 이번에는 채팅 화면에 간단하게 메시지를 표시해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구현은 아래와 같습니다. ./src/screens/chat/chatroom_screen.dart class _ChatroomScreenState extends State { late String chatroomKey; final TextEditingController _textEditingController = TextEditingController(); late final ChatController chatController; @override void initState() { // TODO: implement initState chatroomKey = Get.para.. [Flutter] Clone - 당근마켓50(Chat - 2) 상단/하단 정보 표시 이번에는 채팅 화면에 입력창(하단)과 아이템 간략 정보(상단)를 표시해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구현은 아래와 같습니다. ./src/models/chat_model.dart - 구현중 수정이 필요한 부분이 있어서 수정함 class ChatModel2 { String? chatKey; // 자동생성되므로 ? 처리 String msg; DateTime createdDate; String userKey; DocumentReference? reference; ChatModel2({ // required this.chatKey, // 자동생성되므로 필수처리 제외. required this.msg, required this.createdDate, re.. [Flutter] Clone - 당근마켓49(Chat - 1) 이번에는 채팅 관련 함수들 및 채팅 화면 추가를 구현해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구현은 아래와 같습니다. ./src/repo/chat_service.dart - 채팅관련 함수들 추가(채팅룸 생성, 채팅생성, 채팅룸 연결 등등) import 'dart:async'; import 'package:cloud_firestore/cloud_firestore.dart'; import '../constants/data_keys.dart'; import '../models/chat_model.dart'; import '../models/chatroom_model.dart'; class ChatService { // 싱글톤 패턴 적용 static final.. 이전 1 ··· 52 53 54 55 56 57 58 ··· 84 다음
