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

안녕하세요 찐망고 입니다. 웹개발의 가장 기본 문법인 자바스크립트 관련하여 블로그에 쓰여진 내용과 실습한 내용을 정리하여 인터렉티브한 사이트를 만들었습니다. 순서대로 업데이트 중이고 01. JavaScript 역사JavaScript의 탄생브라우저 전쟁DOM과 BOM모던 JavaScript02. JavaScript 변수 변수란? (선언, 할당, 참조) var / let / const의 완벽한 차이 중복선언, 재할당, 스코프 03. JavaScript 데이터타입String (문자열)Number (숫자)Boolean (불린)null vs undefinedtypeof 연산자04. JavaScript 연산자산술 연산자 (+, -, *, /)문자열 연결대입 연산자 (+=, -=, etc)증감 연산자 (++, --..

안녕하세요 찐망고입니다. 요즘은 tailwind 많이 쓰자나요.그렇다고 그거 다 외우는 건 쉽지 않고익스텐션 도움을 받을 텐데요.이게 또 수업하다 보니 어느 자리는 되고 어느자리는 안되어서 해결방법을 공유합니다. Tailwind IntelliSense 익스텐션이고설치하게 되면 아래처럼 거의 모든 tailwind를 확인할 수 있습니다. 안 되는 자리가 있는 경우 따로 셋팅이 필요합니다. 첫 번째! CDN작업 시 같은 root폴더에 파일 만들기파일이름은 tailwind.config.js로 저장하고파일 내용은 아래 코드 참고하기 module.exports = { content: ["./**/*.html"],} CDN 써도 IntelliSense가 이 파일 보고 Tailwind 프로젝트라고 인식함. ..

CSS Study Note Background 요소에 배경 색상과 이미지를 자유자재로 다루기 01 — 개별 속성 6가지 background-color 기본값: transparent 배경 색상을 지정합니다. 이미지와 함께 쓸 때 이미지 뒤에 깔립니다. red rgb() #hex transparent background-image 기본값: none 배경 이미지를 지정합니다. 스크린리더가 읽지 못하므로 의미 있는 이미지는 im..

CSS Study Note Position 브라우저 동작 원리를 이해하는 position 완전 정복 01 — 5가지 position 속성 static position 기본값. 일반 문서 흐름(normal flow) 그대로 유지. left/top/right/bottom 적용 안됨. 기본값 flow 유지 방향값 무시 position: static; /* 기본값 */ relative 자신의 원래 위치 기준으로 이동. 원래 자리는 공간 유지. absolute 자식의 기준점 역할로 많이 사용. 자기 기준 공간 유지 기준..

보호되어 있는 글입니다.

안녕하세요 찐망고 입니다.폰트관련 카드 뉴스를 만들다가 내용이 길어져서 블로그 포스팅으로 먼저 정리해보려고 합니다. 😊 현재 웹이나 앱을 디자인 하는 직종에 있는 사람이라면기본적으로 어떤 폰트를 많이 쓰고 있는지 알고 있을 텐데왜 이폰트를 많이 사용할까? 왜 이폰트가 트렌드가 되었을까에 대해 고민해본적이 있을까 싶다.이게 나름 다 이유가 있고 앞으로 주목할 폰트까지 정리해 보았으므로 포스팅을 쭉 한번 읽어보길 바라는 마음에 시작! 1. 노토산스의 시작처음 노토산스(Noto Sans) 가 출시됐을 때, 기존 유료 고딕 폰트의 대체제로 큰 주목을 받았다.한국어·중국어·일본어를 모두 지원하는 다국어 호환성과 무료 배포가 강점이었다.자간이 다소 넓지만, 웹에서는 letter-spacing을 조절하면 충분히 ..

안녕하세요 찐망고입니다올해 회사사이트를 하나 만들었는데 그때 사용한 폰트가 Gmarket Sans였는데굵기가 세개밖에 없는건 너무 아쉬었어요프리텐다드랑 섞어 쓰면 참 이쁨지마켓폰트와 비슷하지만 좀 더 굵기가 다양해진 폰트가 있는데요페이퍼로지 폰트입니다2024년에 출시되었으며, PPT 유튜버 ‘페이퍼로지’ 김도균과 디자이너 이주임이 공동으로 제작하였습니다한글은 G마켓산스, 영문은 Montserrat 폰트를 결합한 구조입니다. 한글과 영문의 시각적 조화를 의도적으로 추구하여, 한/영 혼용시 자연스럽고 세련된 결과물을 낼 수 있죠상업적 이용이 가능한 무료 폰트이며, SIL 오픈폰트라이선스(OFL)에 따라 판매·라이선스 변경을 제외하면 수정·재배포·상업적 사용이 모두 가능합니다파워포인트 전용으로 기획된 만큼, ..

안녕하세요 찐망고입니다.오늘도 클론 프로젝트를 하던 중 귀찮지만 막상 구현하면 보기 좋은 헤더 애니메이션작업과정을 공유해 드릴 건데요. 디테일은 귀찮아서 못하는 거지 막상 하면 만족도가 높..조만간 이런 공유들을 영상으로 보여드리고 싶은데.. (말만 몇 년째) 해당사이트 학생이 클론작업한 링크입니다 (3개월 유지예정) KRDS대한민국 정부 디자인 시스템 KRDS는 누구나 쉽게 정부 서비스를 경험할 수 있도록 가이드라인과 디자인 리소스 및 디자인 시스템 구축을 위한 모든 자료와 최신 정보를 제공한다.www.krds.go.kr  KRDS 클론 코딩  이 애니메이션의 핵심은 헤더를 줄이거나 헤더를 이동하는 게 아니고전체적인 콘텐츠를 위로 당긴다고 생각하면 되는데요처음 스크롤할 때 배너가 사라지고 헤더가 fix..

안녕하세요 찐망고입니다.CSS에서 min(), max(), clamp() 함수는 반응형 웹 디자인에서 매우 유용하게 사용할 수 있는데요. 이 함수들을 활용하면 보다 유연하고 직관적인 스타일링이 가능합니다. 특히 vw 단위를 많이 사용하는 요즘, CSS 속성 값을 동적으로 계산할 수 있다는 점에서 큰 장점이 있습니다.CSS비교함수관련 포스팅을 작년에 했었는데 해당사이트를 번역하고자 추가 포스팅을 해봅니다. 일단 이전글 링크 CSS min(), max(), clamp() 함수로 반응형 웹 디자인 완성하기안녕하세요 찐망고입니다. CSS에서 min() 함수와 max() 함수는 반응형 웹 디자인에서 매우 유용하게 사용할 수 있는데요.vw단위를 많이 쓰고 있는 이 시점에서 CSS속성 값을 동적으로 계산할 수 있게u..

안녕하세요 찐망고입니다.이번에 인크루트웍스 클론 프로젝트를 진행하는 학생이 만든 사이트를 보다가 발견한 버튼인데요.민산스 폰트를 포스팅하게 만든 그 사이트가 맞구요!마우스오버효과를 주면 버튼 색상이 부드럽게 바뀌는게 너무 예쁘더라구요!그래서 직접 HTML, CSS, JavaScript로 구현해 보았습니다  학생이 클론한 사이트 입니다. (3개월 후 삭제예정) AI로 검증하는 채용솔루션, 인크루트웍스인크루트웍스 채용솔루션으로 더 똑똑하고 빠르게 채용하세요! 기업채용에 최적화된 지원자관리,평가관리,면접관리,인재검증 등 다양한 솔루션을 제공합니다.phj00006.mycafe24.com 버튼 그라데이션 애니메이션은 영상으로 확인해주세요 (클론한 작업물) 마우스를 올리면 위에 그라데이션이 왼쪽에서 오른쪽으로 지나..