찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고 입니다. 오늘은 현재 가장 인기있는 프로그래밍언어에 대해 포스팅을 해볼까 하는데요. 2023년 Scala, Go, 그리고 Kotlin개발자가 연봉이 가장 높은 3대 개발자로 선정 되었다고 해요.출처에 따르면 대다수의 Kotlin개발자(66%)는 Android 및 서버측 애플리케이션에 사용한다고 합니다.Java에 비해 코드가 더 간결하고 읽기 쉽고, Java와 완전히 호환되어 기존 Java프로젝트에 쉽게 통합할 수 있습니다. Scala는 데이터 처리 및 분석, 웹 개발, 분산 시스템 개발에 주로 사용되며,Go는 서버 및 네트워크 애플리케이션, 클라우드 및 컨테이너 기술, 도구 및 유틸리티 개발에 많이 사용됩니다  현재 프로그래밍 언어지수를 볼까요?   지난 3년 동안 JavaScript,..

안녕하세요 찐망고 입니다. 이전 글에 직접 사용해 본 HTML에디터 종류에 대해서 포스팅했는데요. 퍼블리싱 할 때 직접 사용해본 HTML에디터 종류안녕하세요 찐망고입니다. 오늘은 HTML에디터 관련 포스팅을 해보려고 하는데요~ 일단 에디터를 사용하게 되면 코드를 좀더 깔끔하고 직관적으로 볼 수 있고, 자동완성기능이 있어 코딩하는데uiweb.tistory.com 오늘은 2024년 최신 IDE 및 텍스트 에디터 점유율에 대해 알아보려고 합니다. 최근 서치 해보니 Top IDE Index 라는 자료를 찾을 수 있었어요.전 세계 텍스트 에디터와 IDE사용현황을 나타내는 지표죠. IDE는 통합 개발 환경(integrated Development Environment)의 약자로,소프트웨어 개발을 위한 종합적인 도구..

안녕하세요 찐망고 입니다. 넘쳐나는 AI프로그램 속에서 빠른 AI영상을 편집할 수 있는 프로그램을 찾았는데요.Vrew입니다. Vrew, 문서 편집처럼 쉽고 빠른 AI 영상 편집AI를 활용한 가장 빠르고 효율적인 영상 편집을 경험해보세요! 키워드만 입력하면 끝! AI가 자동으로 영상을 만들어 드립니다. 음성 인식 자동 자막, 빠른 컷 편집, 200종 이상의 AI 목소리, 다양한vrew.voyagerx.com      Vrew는 AI를 이용하여 저작권이 없는 이미지들과 영상을 대본에 맞게 자동으로 불러와주고텍스트나 이미지 편집도 간단하게 할 수 있는 프로그램입니다. 제가 유튜브 영상을 만들기 위해 이것저것 좀 써봤는데얘가 제일 쉬움.. 사이트에 접속해서 다운로드를 하고 설치를 하면 바로 DEMO영상이 뜹니다..

와 찐망고입니다..다른 발 빠른 분들에 비하면 조금 늦은 포스팅인데요.. 피그마가 업데이트를 했어요 이번엔 꽤 아주 훌륭한 내용들이 많은데 각각 업데이트된 내용을 피그마로 직접 작업 후 포스팅 하려다가 ㅎㅎㅎ그럼 시간이 더 걸릴 것 같아 올해 컨퍼런스 요약된 주요 업데이트 내용을 포스팅해보려 합니다. Figma Config 2024 컨퍼런스는 6월 26일부터 27일까지 샌프란시스코에서 열렸으며,디자이너와 개발자를 위한 혁신적인 기능과 업데이트를 발표했습니다. 일단 youtube 링크부터  youtube내용을 정리해 보면 Figma AI ( search for simillar명령어 ) 완성된 디자인(app)의 기존 피그마 파일 찾기 (01:44):  이미지 업로드로 유사한 디자인 파일 탐색 변경할 수 있음..

안녕하세요 찐망고 입니다.오늘은 두개의 swiper를 이용하여 탭을 만들어볼건데요. 참고 사이트는 구루미비즈입니다.  AI 화상 솔루션 구루미비즈AI화상상담솔루션, AI교육, AI서비스 구축을 위한 최적의 AI화상플랫폼biz.gooroomee.com    먼저, 각각의 Swiper 코드부터 살펴볼까요?const swiper01 = new Swiper(".s01-swiper", { slidesPerView: 1.3, spaceBetween: 20, pagination: { el: ".s01-swiper .swiper-pagination", type: "progressbar", }, breakpoints: { 1281: { ..

안녕하세요찐망고 입니다. 오늘은 navi요소에서 많이 쓰는 해당 요소를 클릭했을 때만 클래스를 추가하고나머지 요소들은 클래스를 제거하는 코드를 볼 건데요..탭이랑 비슷하죠? 1. 기본코드const navMenus = document.querySelectorAll(".navi > ul > li");navMenus.forEach(navMenu => { navMenu.addEventListener("click", () => { navMenu.classList.toggle("on"); })})  일단 위 코드는 클릭한 li요소들에게 on클래스가 추가됩니다.다시 클릭을 해야 제거되겠죠? 2. 개선된 코드const navMenus = document.querySelectorAll(".nav..

안녕하세요 찐망고입니다. 오늘은 CSS에 clip-path를 이용하여 사다리꼴 이미지 형태의 선택영역을 만들어볼 건데요.이전에는 상상도 할 수 없던 디자인들이 요새는 쏟아져 나오네요. 😀  a와 b섹션이 나뉘어 있고, 각각 클릭하면 새창으로 넘어갑니다.선택영역을 사다리꼴모양과 일치하게 만들어야 하는 거죠그 이전엔 불가했던 작업이지만,아! 이미지 맵을 쓰면 되었으려나.. 하지만 이미지 맵은 반응형으로 만들 수 없어요 바로 작업해 볼까요 각 단락에 해당하는 링크를 걸어주고  * { margin: 0; padding: 0;} body { background-color: #f0f0f0;}.container { width: 100%; height: 100dvh; positi..

안녕하세요 찐망고 입니다.오늘은 `:where()`셀렉터 관련 포스팅을 해볼건데요.  `:where()`와  `:is()`는 둘다 CSS4초안에 소개된 새로운 기능입니다.이전글에서  `:is()`셀렉터 관련 포스팅을 보고 오시길 추천합니다. CSS의 :is() 클래스 활용하기안녕하세요 찐망고입니다. CSS의 `:is()` 함수는 CSS의 단점이었던반복되는 셀렉터의 형태를 더 간결하게 그룹화하는 의사클래스입니다. 아래 예시를 볼까요?ul li,ol li {}:is(ul, ol) li {} 위에 있는uiweb.tistory.com  `:where()` 셀렉터는 여러개의 셀렉터를 한꺼번에 그룹화 할 수 있으며, 셀렉터의 구체성을 0으로 만듭니다.셀렉터를 한꺼번에 그룹화한다 그건  `:is()`와 같죠 저번  ..

안녕하세요 찐망고입니다. CSS의 `:is()` 함수는 CSS의 단점이었던반복되는 셀렉터의 형태를 더 간결하게 그룹화하는 의사클래스입니다. 아래 예시를 볼까요?ul li,ol li {}:is(ul, ol) li {} 위에 있는 각각의 li요소를 선택할 때 :is() 클래스를 사용하면 묶어서 처리가 가능합니다.  다중선택에 특화된 셀렉터이죠:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { color: #BADA55;}section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article..

안녕하세요 찐망고입니다. CSS의 `:not()` 함수는 특정요소를 제외한 나머지 요소들을 선택할 수 있는 선택자입니다. 아래 예시를 볼까요? list01 list02 list03 list04.list li:not(.list02) { background-color: orange;} list02 클래스를 가진 두 번째 li요소를 제외한 나머지 li요소들에게 오렌지색 배경이 지정됩니다.   다음 예시를 보면not실렉터를 이용하여 하나의 클래스가 아닌 여러 개의 클래스를 선택할 수 있습니다.body :not(h1, h2, h3, h4, h5, h6) { color: gray;}body요소 중 제목요소들을 제외하고 컬러를 그레이로 지정합니다.   not실렉터를 이용하여 특정 타입의 입..