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

min(), max(), clamp() - 활용 예제

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

[퍼블리싱] 그라데이션 버튼 애니메이션 만들기 - 인크루트웍스 클론하기

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

안녕하세요 찐망고입니다.더보기진짜 제가 CSS도 그렇구 HTML도 그렇구 피그마도 그렇고꽤 포스팅을 하는데왜 폰트만 검색되는거죠? 😭😭😭😭하지만 수업 내용을 공유하는게 목적인 블로그니까..  sticky 포스팅을 작년에 했는데요또해요.. 또맞아요 먼가 적용방법을 쉽게 설명하지 않은 것 같아 또..이건 이전에 쓴 포스팅입니다. CSS position: sticky 완벽 사용법 & 적용 가능한 사이트예시안녕하세요 찐망고입니다. 오늘은 position속성 중 sticky를 써볼 건데요..position관련 CSS를 포스팅 해놓은 게 없네요? 이런;; html에서 포지션역할은 여러 가지가 있습니다.잘 쓰면 너무 좋은 데 absoluuiweb.tistory.com  sticky는 본인 요소를 고정할때나 (..

안녕하세요 찐망고입니다. 결국 제가 구글머터리얼 심볼(Material Symbols)에 대해서  또 포스팅을 하게 되었네요.솔직히 Customize 기능이 넘 사라 좀 쓸만하죠? 이전 발행글이 하나 있는데 css로 적용했던 방법을 포스팅 하였습니다. 새로운 구글 머티리얼 심볼 활용법: 웹아이콘의 모든 것안녕하세요 찐망고입니다. 이전에 xeicon관련 포스팅을 했었는데요.드디어 다음 포스팅을.. 2021.07.23 - [WEB/CSS] - 웹에서 사용가능한 웹아이콘 적용방법 - XEIcon 웹에서 사용가능한 웹아이콘 적용uiweb.tistory.com  이번 포스팅은 수업 중 클론 코딩을 하다가 저 펭귄그림 있는 부분에 아이콘들을구글 아이콘을 html요소로 적용해보자로 시작해서포스팅으로 마무리를 해봅니다 ..

안녕하세요 찐망고입니다.스레드를 시작하다 보니 포스팅을 안 하게 되는 것도 있고..ai로 지정된 댓글들도 보기 싫고ai로만 이루어진 글이 판을 치면서 내용도 없는 글들의 애포가 날로 성장하는 게 배가 아프고(아 이건 아닌가)거두절미하고 오늘은 CSS의 filter속성에 대해서 포스팅해 봅니다 filter속성은 이미지, 텍스트, 요소 전체에 다양한 그래픽 효과를 적용하는 CSS속성인데요. 기본적으로는 이렇게 씁니다..element { filter: 효과이름(값);} 여러 개의 필터를 사용할 땐 공백으로 구분하여 연속 적용이 가능합니다..element { filter: blur(5px) brightness(0.8) contrast(1.2);}  주요 fiter효과에 대해서 알아볼까요1) blur(..

안녕하세요 찐망고입니다 2025년을 대비해 프론트엔드 개발에서 새롭게 등장한 HTML과 CSS의 기능들을 소개하고, 이런 기능들이 얼마나 개발을 쉽게 만들어주는지 알려주려는 글이 있어 포스팅(번역) 해봅니다. New Front-End Features For Designers In 2025 — Smashing MagazineSearching for the most flexible front-end workflows and toolkits, it’s easy to forget how powerful some of the fundamentals on the web have become these days. This post is a journey through new front-end features and..

안녕하세요 찐망고입니다.드디어..드디어 CSS가 추가로 지정되는 속성 없이 코드 한 줄로 요소를 수직정렬하는 기능이 생겼네요. 과거 요소들을 수직정렬하기 위해(특히 center) 행했던 수많은 수직정렬의 역사들이 주마등처럼 스쳐 지나가네요. 새로 코드가 생긴 건 아니고, 원래 flex나 grid에서 사용했던 CSS코드였는데요.flex나 grid 없이 사용이 가능하게 되었습니다. (와! 짝짝짝)align-content: center; 테스트를 여러 번 해보니 기본 좌우 정렬해서 수직정렬하는 건flex나 grid를 사용하면 될 것 같고a링크요소들처럼 버튼처리해서 만드는 요소들은 수직정렬하기가 편하겠어요. center 외 start, end로 값을 지정할 수 도 있겠지만 안 쓸 거 같죠..?크롬 123, 파이..

안녕하세요 찐망고입니다. CSS에서 min() 함수와 max() 함수는 반응형 웹 디자인에서 매우 유용하게 사용할 수 있는데요.vw단위를 많이 쓰고 있는 이 시점에서 CSS속성 값을 동적으로 계산할 수 있게 도와줍니다.  min() 함수 역할: 주어진 값들 중에서 가장 작은 값을 반환합니다. 주로 너비나 높이 혹은 폰트사이즈에서 최솟값을 지정할 때 사용합니다.사용예시:.tit { font-size: min(3vw, 20px)} min(3vw, 20px)은 3vw와 20px 중 더 작은 값을 폰트 크기로 사용한다는 뜻으로, (vw는 뷰포트 너비의 1%를 의미합니다.) 화면이 너무 넓어서 3vw가 20px보다 크게 된다면, 폰트 크기는 20px로 고정될 거고, 반대로 화면이 좁아서 3vw가 20px보다..

안녕하세요 찐망고 입니다. 히어로 섹션에 동영상을 삽입하는 건 이젠 기업 웹사이트의 트렌드가 되었잖아요?그만큼 동영상은 웹사이트의 첫인상을 좌우하는 중요한 요소가 되었습니다. 그래서 제가 관련 포스팅도 몇 개 했었죠? iOS 에서 동영상 재생이 안되나요?안녕하세요 찐망고입니다.아주 간단하지만 제법 많이 질문하는 부분이라 미리 포스팅을 해볼까해요.요즘 기업사이트 추세가  히어로섹션에 영상을 많이 넣더라구요.거의 국룰이랄까..영상을uiweb.tistory.com  youtube iframe 연결하여 자동 재생하기안녕하세요 찐망고입니다. 전에 ios에서 동영상 재생 관련 포스팅을 했었는데요. 읽어보시는 걸 추천합니다. iOS 에서 동영상 재생이 안되나요? 안녕하세요 찐망고입니다. 아주 간단하지만 제법uiweb..

안녕하세요 찐망고입니다.오랜만에 reset문서를 수정해 봅니다.  1. 기본 HTML 요소의 초기화목적: 모든 기본 HTML 요소의 여백과 패딩을 제거하고, 기본 글꼴 스타일을 초기화.코드:html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strong, sub, sup, var,b, u, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,arti..