[CSS] hover 시 뒷 배경만 흐리게 하는 방법

2024-01-02 1. 방법 아래와 같이 div 안에 텍스트가 존재한다고 가정해 보자. 목표는 내부 텍스트는 그대로 유지하고 배경 또는이미지만 blur 처리를 해보는 것이다. html Hello world css .test_div { position: relative; width: 500px; /* 슬라이드를 100% 너비로 표시 */ height: 500px; } .test_div::before { content: ""; background-color: red; width: 375px; height: 500px; filter: blur(0px); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .test_div:hove..

• format_list_bulleted WEB/CSS
• · 2024. 1. 2.
• textsms

[CSS] Flex 태그 자식별로 정렬 다르게 하는 방법

2023-12-29 1. 예제 Flex를 선언한 부모 태그에서 아래와 같은 align-tems: center를 선언하게 되면 자식 태그들의 위치는 가운데로 정렬 되게 된다. 하지만 자식 태그들 중 어떤 태그는 좌측 어떤 태그는 우측에 위치시키여 하는 경우가 생기는데 이를 해결하는 방법을 알아보자. align-items: center; 아래의 코드는 세로 방향으로 flex 를 선언한 태그이다. HTML CSS .test_main_div{ border: 1px solid #C9CACA; display: flex; width: 1000px; flex-direction: column; align-items: center; } .test_div1{ width: 100px; height: 100px; margin:..

• format_list_bulleted WEB/CSS
• · 2023. 12. 29.
• textsms

[Flutter] 플러터 안드로이드 APK 파일 빌드/추출 방법

2023-12-28 1. 방법 현재 프로젝트 경로에서 터미널로 아래 명령어를 입력하면 된다. flutter build apk --release --target-platform=android-arm64 해당 명령어는 Flutter 프로젝트를 릴리스 모드로 빌드하고, 명시적으로 Android 애플리케이션을 64비트 ARM 아키텍처 (android-arm64)로 타겟팅하는 Flutter 명령어이다. 자신의프로젝트/build/app/outputs/apk/release/app-release.apk 이후 해당 경로에 app-release.apk 라는 이름으로 파일이 들어가 있는 것을 확인할 수 있다. 만약에 만들어지는 apk 파일의 이름을 임의로 지정하고 싶다면 아래의 명령어를 사용하면 된다. flutter bui..

• format_list_bulleted App/Flutter
• · 2023. 12. 28.
• textsms

[Flutter] 패키지명 바꾸는 방법 change_app_package_name

2023-12-27 1. 방법 AndroidManifest.xml | build.gradle | MainActivity 등 패키지 명을 바꾸기 위해 기존에 설정들을 수정해야 되는 것이 다수 존재하는데 이를 편하게 변경해 주는 라이브러리가 있다. pubspec.yaml 에 아래와 같이 의존성을 명시해 준다. dev_dependencies: change_app_package_name: ^1.1.0 이후 현재 프로젝트 위치에서의 터미널에서 아래와 같이 의존성 업데이트를 해준다. flutter pub get 현재 프로젝트 디렉토리에서 터미널로 아래의 명령어와 같이 자신이 변경하고 싶은 새로운 패키지 구조를 작성하고 실행시키면 패키지 구조가 변경되는 것을 확인할 수 있다. flutter pub run change..

• format_list_bulleted App/Flutter
• · 2023. 12. 27.
• textsms

[Flutter] 플러터 로딩기능 구현 flutter_easyloading

2023-12-26 1. 라이브러리 사용 라이브러리는 flutter_easyloading이다. 해당 라이브러리는 명령어 하나로 손쉽게 로딩 기능을 구현할 수 있도록 도와준다. 2. 방법 pubspec.yaml 에 아래와 같이 의존성을 주입해 준다. dependencies: flutter_easyloading: ^3.0.5 아래의 예제를 참고하여 자신의 MarteialApp에 builder: EasyLoading.init(), 부분을 추가해 준다. (해당 부분은 없으면 초기화 안됬다고 에러가 발생한다.) class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(Build..

• format_list_bulleted App/Flutter
• · 2023. 12. 26.
• textsms

[Mac] 오른쪽 클릭 활성화 방법 (Control + 클릭)

2023-12-22 1. 마우스 Mac에서 Apple 메뉴 > 시스템 설정을 선택한 다음, 사이드바에서 마우스를 클릭 (아래로 스크롤해야 할 수 있다.) 오른쪽의 ‘보조 클릭’ 팝업 메뉴를 클릭한 다음 옵션을 선택 마우스 표면의 오른쪽 또는 왼쪽을 클릭하여 사용자 편의성에 최적화되도록 선택 2. 트랙패드 Mac에서 Apple 메뉴 > 시스템 설정을 선택한 다음, 사이드바에서 트랙패드를 클릭 (아래로 스크롤해야 할 수 다.) 오른쪽의 ‘보조 클릭’ 팝업 메뉴를 클릭한 다음 옵션을 선택 손가락 하나 또는 두 개로 클릭하여 Control-클릭을 선택할 수 있다. 3. 출처 https://support.apple.com/ko-kr/guide/mac-help/mh35853/mac Mac의 오른쪽 클릭 Mac에서 ..

• format_list_bulleted OS/Mac
• · 2023. 12. 22.
• textsms