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

안녕하세요 찐망고입니다.오늘은 favicon에 대해 포스팅 할겁니다.  파비콘이란?  모든 브라우저의 탭엔 제목이 있고 그옆엔 저렇게 파비콘이 붙어요.물론 없어도 큰일 나지는 않지만, 있으면 이뻐! 파비콘은 브라우저 탭, 북마크, 즐켜찾기 목록에서 웹사이트를 대표하는 작은 아이콘입니다.이를 통해 사용자는 쉽게 웹사이트를 인식하고 찾을 수 있어요.일관된 브랜드 이미지 구축에도 도움이 되구요. 파비콘의 중요성사용자가 여려개의 탭을 열어놓았을때, 탭이 아주 작아지는 경험들 다들 있으시잖아요?파비콘이 있으면 제목이 뭔지 몰라도 웹사이트를 빠르게 식별할 수 있습니다. 또한, 일부 검색 엔진은 파비콘을 검색결과에 표시하기도 합니다.당연히 사용자의 클릭률(CTR)을 높이는데 기여할 수 있죠 제일 중요한건 파비콘이 없..

안녕하세요 찐망고 입니다. 오늘은 현재 가장 인기있는 프로그래밍언어에 대해 포스팅을 해볼까 하는데요. 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)의 약자로,소프트웨어 개발을 위한 종합적인 도구..

안녕하세요찐망고 입니다. 오늘은 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실렉터를 이용하여 특정 타입의 입..

안녕하세요 찐망고입니다. CSS의 `:has()` 함수는 특정 자식 요소를 가진 부모 요소를 선택할 수 있게 해줍니다.이것은 이전 CSS선택자에선 할 수 없는 것들을 가능하게 해주는데요. 아래 예시를 볼까요? Child1 Special Child Child2 .parent:has(.special) { background-color: yellow;}  위 코드에서 `.special` 클래스를 가진  두번째 `.parent` 요소가 선택 되어 배경색이 바뀝니다.   다음 예시도 볼까요? menu depth.. menu depth.. menu ..

안녕하세요 찐망고입니다. 오늘은 position속성 중 sticky를 써볼 건데요..position관련 CSS를 포스팅 해놓은 게 없네요? 이런;; html에서 포지션역할은 여러 가지가 있습니다.잘 쓰면 너무 좋은 데 absolute를 남발하는 개발자들 보면 단전에서부터 화가..요즘은 그러신 분 안 계시죠?  sticky를 아직 안 써본 분이 계시려나..아마 ie에선 지원을 안 해서 쓰고 싶어도 못쓰는 그런일들이 있었죠. sticky속성은 relative와 fixed가 같이 적용된다고 생각하면 되는데요.   W3Schools online HTML editorThe W3Schools online code editor allows you to edit code and view the result in you..