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

안녕하세요 찐망고입니다.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 버튼 그라데이션 애니메이션은 영상으로 확인해주세요 (클론한 작업물) 마우스를 올리면 위에 그라데이션이 왼쪽에서 오른쪽으로 지나..

안녕하세요 찐망고입니다.간만에 swiper관련 포스팅을.. 이번반 학생이 클론 하는 사이트인데요.이 사이트에서 세로형태로 슬라이딩되는 섹션을 swiper를 이용해 구현했습니다.이를 통해 배경이 부드럽게 전환되며, 동시에 탭 버튼이 해당 배경과 연동되도록 만들었죠사용자는 텍스트 버튼을 클릭해 직접 원하는 슬라이드로 이동할 수 있습니다.   지금은 충전중 │ 현대자동차모두의 삶이 한층 더 편해지는 현대자동차 ACR을 통해 여행의 행복을 선물합니다. 현대자동차와 자유로운 제주로 지금 바로 떠나보세요.acrtrip.com 아래 캡처된 이미지는 Swiper를 활용해 세로방향으로 슬라이드 되는 섹션을 구현한 모습이구요텍스트버튼(탭)은 Swiper와 연동되어 해당 슬라이드에 맞는 텍스트가 강조됩니다.선택된 버튼은 배..

안녕하세요 찐망고입니다.이전에 SEO(검색엔진최적화)작업에 대한 포스팅을 했는데요. SEO(검색 엔진 최적화)작업안녕하세요 찐망고입니다. 마케팅에서 SEO(검색 엔진 최적화)가 필수라고들 하죠?그런데 정작 "SEO를 어떻게 작업하고, 실제로 무슨 일이 벌어지는지" 궁금한 분들이 있을거라 생각합니다. 오늘은uiweb.tistory.com 그렇다면 현재 마크업하는 입장에서 우리는 멀 체크하며 작업을 해야할 지 알아봐야겠죠? 물론 그동안 계속 포스팅을 하긴 했지만 정리차원에서1. HTML 마크업에서 체크해야 할 요소  1. 시맨틱 태그 사용콘텐츠 구조를 명확히 하고 검색 엔진이 쉽게 이해할 수 있도록 합니다.예: , , , , 등의 시맨틱 태그 사용. SEO란 무엇인가? 검색 엔진 최적화는...    2..

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

안녕하세요 찐망고입니다.오랜만에 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..

안녕하세요 찐망고입니다.CSS의 너무 기초적인 부분을 포스팅하려고 합니다. CSS(Cascading Style Sheet)란 웹 페이지의 겉모습을 정의하고 꾸미는 데 사용되는 스타일 시트 언어인데요. 주요 기능은 다음과 같습니다:  레이아웃 정의: 페이지의 구조와 배치를 지정합니다.스타일 설정: 텍스트의 글꼴, 색상, 크기 등을 지정합니다.디자인: 배경, 테두리, 여백 등을 설정하여 페이지의 시각적 디자인을 조정합니다.반응형 디자인: 다양한 장치(데스크톱, 태블릿, 스마트폰 등)에 맞게 레이아웃과 스타일을 조정합니다.   CSS는 기본적으로 선택자(Selector)와 선언(Declaration)으로 구성되며, 선언은 속성(Property)과 값(Value)으로 이루어집니다. h1 { color: ..

안녕하세요 찐망고입니다. 오늘은 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..