J.BF Story

저번에 발생했던 SDK 버전 에러가 또 발생했다 (참고: [Flutter] Error: Execution failed for task ':app:checkDebugAarMetadata'.) FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:checkDebugAarMetadata'. > Multiple task action failures occurred: > A failure occurred while executing com.android.build.gradle.internal.tasks.CheckAarMetadataWorkAction > The minCompileSdk (33) speci..

JSON.stringify 함수를 사용하여 Json 데이터를 예쁘게 출력할 수 있다. const jsonData = { "test_int": 12, "test_float": 1.23, "test_str": "asdf", "test_array": [1, 2, 3, 4], "test_object": { "sub_test": 123, "sub_test2": "qwer", }, }; console.log(JSON.stringify(jsonData)); // not pretty print console.log(JSON.stringify(jsonData, null, 2)); // pretty print (space:2)

favicon favorites + icon 인터넷 웹브라우저에 표시되는 웹페이지 대표 아이콘 favicon 생성 PNG나 JPG 아이콘을 favicon으로 변환해주는 사이트를 통해 favicon을 생성한다. Favicon.ico & App Icon Generator Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 아이콘은 아이콘을 저작권 기재 없이 무료로 사용이 가능한 'iconmonstr' 사이트를 이용하였다..

다음과 같이 각 탭과 박스를 'id'를 통해 연결시켜준 후, 탭의 'selected' 클래스와 박스의 'hide' 클래스을 이용해 스타일을 나타내준다. 선택한 탭만 'selected' 클래스를 가지도록 하고, 선택한 탭과 관련된 박스를 제외하고는 'hide' 클래스를 가지도록 한다. tab1 tab2 tab3 test box 11111 ... test box 22222 ... test box 33333 ...

CSS를 통해 넘친 콘텐츠 또는 라인수를 넘어가는 글자에 대하여 뒤에 '...'이 붙는 말줄임 처리를 할 수 있다. 한줄일 경우와 여러줄 일때 구현방법이 다르다. 한줄인 경우 text-overflow 속성의 'ellipsis'를 통해 넘어가는 글자를 말줄임(...) 처리한다. 'white-space: nowrap', 'overflow: hidden' 설정을 꼭 해주어야한다. 'white-space: nowrap': 줄바꿈없이 한줄로 표시 'overflow: hidden': 넘친 콘텐츠 안보이게 처리 test one line ellipsis.testestestestestestestestestestestestestestestestestestestestestestestestestestestest 여러줄인 경우..

onclick vs addEventListener("click") onclick addEventListener("click") 공통점 - 이벤트 수신 - 콜백 함수 실행 가능 차이점 - 요소의 속성임 - 속성값은 덮어쓰기가 되므로 둘 이상의 이벤트를 동시에 핸들링 할 수 없음 - 요소에 이벤트 헨들러 추가 - "on" 접두사 없이 사용 - 요소에 이벤트 헨들러를 덮어쓰지 않고 제한 없이 추가 가능 사용법 - html: - js: testBtn.onclick = testFunc1; js: testBtn.addEventListener("click", testFunc1); 예시 onclick CLICK ME!! addEventListener("click") CLICK ME!! 참고 https://www.gee..

Windows Chrome 환경에서는 스크롤이 있는 경우 스크롤바가 기본적으로 항상 존재한다. 다음과 같이 설정하여 스크롤 기능은 유지하면서 스크롤바를 없앨 수 있다. .test-scroll-box::-webkit-scrollbar { display: none; }

X축, Y축 스크롤에 대하여 처음과 끝을 탐지하는 코드는 다음과 같다. // // X축 scroll function isScrollXStart(ele) { return (ele.scrollLeft = ele.scrollWidth) } // // Y축 scroll function isScrollYStart(ele) { return (ele.scrollTop = ele.scrollHeight) } ** ceil: Window환경의 브라우저에서 특정 해상도에서 1미만의 차이로 탐지를 못하는 경우가 있었다. 이를 방지하기위해 값을 올림(ceil) 처리를 하였다.

다음과 같이 요소들을 겹쳐놓았을 때, 앞에 있는 요소만 이벤트가 정상적으로 동작하고 뒤에 있는 요소의 모든 이벤트(스크롤 이동, 버튼 클릭, 텍스트 드래그 및 선택 등)가 작동하지 않는 것을 확인할 수 있다. 앞 요소: 양옆 방향 버튼을 가진 요소 뒤 요소: 스크롤이 가능하며 텍스트, 버튼을 가진 요소 item1 btn1 item2 btn2 item3 btn3 item4 btn4 item5 btn5 이 경우 'pointer-events' 속성을 활용하여 뒤의 이벤트를 처리할 수 있다. pointer-events 해당 요소의 포인터(마우스) 이벤트 (scroll, hover, click, drag ...) 활성화 여부 결정 설정값 auto: pointer-events 적용하지 않음 none: - 해당 요소..

'flex'를 활용하여 반응형 레이아웃을 만들던 중 같은 크기의 아이템들을 유동적이고 순차적으로 나열하려고 했을 때, 다음과 같은 문제가 발생했다. WISH 아이템 넓이는 기본 240px 아이템들이 화면 크기에 따라 적절하게 정렬되며, 화면에 꽉차게 유동적으로 크기가 변했으면 함 모든 아이템의 크기가 동일했으면 함 PROBLEM 행에 배치된 아이템들끼리 무조건 화면에 꽉차게 크기를 조정하기 때문에, 행마다 아이템 크기가 다를 수 있음 logo1 logo2 logo3 logo4 logo5 logo6 logo7 이러한 현상은 'flex'가 1차원적으로 한 방향으로만 요소를 배치할 수 있는 특성때문에 발생한 것이다. (요소 배치 방향 row, column 둘 중에 하나만 선택 가능) 여기서 2차원적으로 가로,..