개발28 html,CSS - 더보기, 숨기기 코드 내용을 작성해주세요. value="더보기" => 초기 버튼 문구입니다. style="display: none; => 첫 화면에서 내용이 보이지 않도록 해줍니다. 더보기와 내용 순서를 바꾸면 화면상의 위치도 바뀝니다! 2023. 10. 5. [Flutter] 반응형 웹 만들기 반응형 웹을 만드려면 우선 PC/Tablet/Mobile의 사이즈 정의가 필요하다. 1200px/976px/500px 기준으로 미디어쿼리를 이용해 width와 height의 길이에 따라 UI가 사이즈에 최적화 되도록 하였다. MediaQuery와 width/height Widget build(BuildContext context) 내부에 MediaQuery 코드를 입력한다. Widget build(BuildContext context){ print('width : ${MediaQuery.of(context).size.width}'); print('height : ${MediaQuery.of(context).size.height}'); var width = MediaQuery.of(context).size.. 2022. 1. 5. [Flutter] 리스트뷰 https://api.flutter.dev/flutter/widgets/ListView-class.html ListView class - widgets library - Dart API A scrollable list of widgets arranged linearly. ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView. If non-null, the ite api.flutter.dev 2021. 10. 28. [Flutter] TextField 최대 입력 길이 조절하는 방법 maxLength 최대 입력 길이를 조절하려면 TextField 아래 maxLength를 사용한다. 최대 길이만큼 숫자값을 입력한다. counterText 하단에 입력 최대 길이를 없애려면 TextField의 InputDecoration 안에 counterText: ''를 사용한다. 2021. 10. 26. [Flutter] Stack 컴포넌트 위치 조절하는 방법 Stack Stack을 사용하면 여러가지 위젯을 겹쳐놓을 수 있다. Positioned Stack 하위의 위젯 위치를 변경하기 위해서는 Stack 하위에 Positioned를 사용하여 (top,bottom,right,left)위치를 세부적으로 조절 할 수 있다. Overflow 또는 Clip 위젯이 경계선을 벗어나게 하고 싶으면 Overflow나 Clip을 사용하면 된다. overflow: Overflow.visible; 와 clipBehavior: Clip.none; 는 같은 기능을 한다. Stack 참고자료 > clipBehavior 참고자료 > 2021. 10. 26. [Flutter] 다음 Text Field로 포커스를 넘기는 방법 다음 버튼 클릭 시 다음 텍스트 필드로 포커스 넘기기 비밀번호 변경 시 새 비밀번호 입력 후, 키보드의 다음 버튼이 완료버튼으로 변경되며 텍스트 필드 포커스가 넘어가는 액션을 주려고 한다. 🧭 기능정리 키보드 다음버튼을 완료버튼으로 변경하는 기능 텍스트 필드 포커스가 다음으로 넘어가는 기능 두가지 기능이 필요하다! 비밀번호를 입력하고 다음 버튼을 누르면 완료 버튼으로 변경되며 비밀번호 확인 텍스트필드가 포커스 된다 🧭 사용코드 미리보기 TextField( textInputAction: TextInputAction.next, onSubmitted: (_) => FocusScope.of(context).nextFocus(), ); textInputAction 키보드 버튼 상태를 변경하기 위해 TextInpu.. 2021. 10. 25. [Flutter] Dialog에 SingleChildScrollView 사용하기 현상 Dialog 위젯 안에 있는 SingleChildScrollView 영역이 디바이스 사이즈를 벗어나는 경우 사이즈 오버로 에러가 뜨는 모습을 확인했다. 해결 👉 SingleChildScrollView를 Flexible로 감싸기 SingleChildScrollView를 Flexible로 감싸주어 디바이스 사이즈 영역에 알맞게 사이즈가 맞춰지고 Dialog 내부에 스크롤도 잘 작동했다. Dialog( Flexible( SingleChildScrollView( ///이 안에 Dialog Component를 넣어주세요:) ); ); ); Colored by Color Scripter cs 참고사이트 입니다 https://github.com/flutter/flutter/issues/23555 ⚠️ 실수 처.. 2021. 10. 25. [Flutter] 무조건 알아야할 Flutter의 기초 Dart 언어 우리가 해외여행을 떠나기 전, 소통을 위해 그 나라 언어를 공부하는 것 처럼 앱을 만들 때도 툴 만의 전용 용어를 공부할 필요가 있다. 처음 앱개발을 공부했을 때 외국어 공부하는 것 같은 느낌을 많이 받았었다. Dart 언어는 구글이 만든 네이티브 코드로 안드로이드앱과 iOS앱을 동시에 개발 할 수 있는 웹 프로그래밍 언어이다. 이외에도 위젯이라는 것으로 빠르게 개발이 가능하기 때문에 디자이너인 나처럼 처음 앱을 만드려고 시도하는 사람에게 추천하고 싶다! https://dart.dev/ Dart programming language Dart is a client-optimized language for fast apps on any platform dart.dev https://devmg... 2021. 10. 6. [Flutter] 아코디언 리스트 : Expansion Panel ExpansionPanel 의 정의 Expansion 즉, 확장할 수 있다는 뜻으로 아코디언처럼 펼쳐지는 리스트를 구현할 수 있습니다. 헤더와 본문이 있으며 확장하거나 축소할 수 있습니다. 패널 본체는 패널을 확장할 때만 볼 수 있습니다. ExpansionPanel 는 어떻게 사용할까? ExpansionPanel은 오직 ExpansionPanelList를 하위 항목으로 가집니다. 예제를 살펴보면 메인 위젯 안에 Appbar와 ExpansionPane로 구성되고, 정보를 받아오는 Item 클래스를 선언합니다. Item 클래스는 expandedValue와 headerValue, isExpanded로 구성하고 있는데, expandedValue는 아코디언리스트의 body안에 타이틀을 선언하고, headerVal.. 2021. 9. 17. [Flutter] 버튼 클릭 시 잉크가 퍼지는 효과 : InkWell 앱 버튼을 탭하면 마치 잉크가 퍼지는 것 같은 효과를 사용한 버튼이 있다. 내가 한 행동을 확실하게 인지시키기에 좋은데, inkwell을 사용하면 이 기능을 구현할 수 있다! 컨테이너처럼 별도의 기능을 제공하지 않는 위젯에 제스쳐 기능을 추가할 때 Inkwell 기능을 사용할 수 있다고 한다:) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 import 'package:flutter/material.dart'; void main() => runApp.. 2021. 9. 16. [Flutter] Getx 라우트 방식 Flutter UI를 아장아장 배우는 중에 Flutter Getx를 처음 접했다. 기존 방식보다 훨씬 간결한 코드로 페이지 이동이 가능했다. 왜 찬양하는지 알거라고 했는데 진짜 간편하고 나같은 개린이도 충분히 따라할 수 있을 만큼 쉬웠다. Getx 라우트 방식은 총 두가지로 일반 라우팅과 네임드 라우팅 두가지를 쓴다. 여기서 일반 라우팅은 이해가 가는데 네임드 라우팅은 왜 사용하는지 궁금해졌다. 라우팅(routing)은 네트워크상에서 주소를 이용하여, 통신 데이터를 목적지까지 보낼 최적의 경로를 선택하는 과정을 말한다. 쉽게 말하면 버튼 클릭 후 페이지 이동을 하는 과정을 라우팅이라고 한다. 일반라우팅과 네임드 라우팅의 차이 일반라우팅 Named 라우팅 페이지 Transition 효과 Argument 전.. 2021. 9. 14. [Flutter]이미지 연결이 안되는 현상 Flutter 업데이트를 한 후 이미지 연결이 안되는 현상이 나타났다. Failed host lookup: 'blog.kakaocdn.net' (OS Error: No address associated with hostname, errno = 7) 해결방안1 AndroidManifest.xml 파일 안에 를 입력한다 해결방안2 휴대폰 온라인 연결상태를 체크한다 2021. 9. 10. [Svelte] 팝업 스크롤 안되게 하는 법 증감 연산자 배경이 다 보여요🤭 https://svelte.dev/repl/2bdbf66371a3418e9e3eda076df6e32d?version=3.18.1 Loading... • REPL • Svelte svelte.dev 2021. 8. 23. 홈페이지 솔루션으로 홈페이지 만들기 1. 크리에이터 링크 아주 편리하다. 어느정도 퍼블리싱을 할 수 있는 디자이너가 섬세하게 디자인을 수정하고 싶다면 비추. 디테일한 퍼블리싱은 불가능하다. 내일 상담전화해서 물어볼 것 1. 헤더 디자인 변경이 가능한가? NO 2. 서체 커스텀 가능한가? NO 3. 메인 페이지 버튼을 넣을 수 있는가? NO 개인 커스텀 디자인의 취약점이 큰 사이트이다. 2. 워드프레스 https://www.youtube.com/watch?v=AQVoTIVPZn8 아주 친절한 튜토리얼로 보고 따라하기만 해도 큰 개발 공수 없이 홈페이지를 만들 수 있다. 실수1. wordpress.com 과 wordpress.org 를 헷갈려서 클라이언트에게 wordpress.com 로그인 하라고 전달했다. 절대 헷갈리지 말자 2. 다국어 설.. 2021. 6. 30. javascript 함수 정리 a ≠ A이고 a = B이다. {#if !==a} A {:else} B {/if} 2021. 6. 25. input 타입 range 스타일 커스텀 https://github.com/Dev-Jeromebaek/design_note/issues/1 🤹♀️ input 타입 range 스타일 커스텀하기 · Issue #1 · Dev-Jeromebaek/design_note input 타입 range 스타일 수정하기_커스텀 스타일 요구조건 input type="range" 약간의 커스텀이 가능하다고만 알고있었는데 작업할 일이 없어서 만져본 일이 없다가 요구조건이 있어서 천천히 뜯어보 github.com 2021. 5. 20. IntelliJ Plugin 설치 방법 1. 단축키 ( Command + , ) 클릭 후 Preferences 로 들어갑니다. 2. Plugins를 검색합니다. 3. 원하는 Plugin을 검색 후 Install을 클릭하면 끝! 2021. 5. 18. IntelliJ를 결제했다 1. 기존에 쓰던 어둠의 IntelliJ 쿠키 날리기 https://intellij-support.jetbrains.com/hc/en-us/articles/206544519 Directories used by the IDE to store settings, caches, plugins and logs Location of the IDE files depends on the operating system, product and version. 2020.1 and above versions 2019.3.x and below versions Examples for IntelliJ IDEA 2020.3: Windows: Configuration (i... intellij-support.jetbrains.com .. 2021. 5. 18. 이전 1 2 다음 반응형
