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

안녕하세요. 찐망고 입니다. 오늘은 보그코리아 웹사이트의 마지막 하단 섹션을 클론 해 볼 건데요. 보그 코리아 (Vogue Korea)컬렉션부터 스타일, 쇼핑, 뷰티, 라이프스타일, 셀러브리티까지 지금 가장 핫한 트렌드 소개www.vogue.co.kr 하단섹션은 왼쪽과 오른쪽으로 나뉘어서왼쪽 섹션은 grid나 flex를 이용한 리스트섹션, 그리고 오른쪽은 배너모양의 이미지가 한 장 있어요.스크롤 시 오른쪽 이미지가 고정되어 푸터섹션에 도착할 때까지 움직입니다.   오른쪽 배너이미지는 처음엔 absoulte였다가 다시 fixed로 변경할 예정이고,fixed변경 시 좌표값이 부모요소 기준에서 뷰포트 기준으로 변경되므로그 부분을 염려해서 CSS작업을 해볼 예정이에요 왼쪽과 오른쪽을 저렇게 fix클래스 요소로 ..

안녕하세요 찐망고입니다. 이번 포스팅에서는 자바스크립트의 getAttribute() 메서드와 HTML5의 data- 속성을 활용하여,마우스 이벤트에 반응하는 탭 구조를 만드는 방법을 소개하겠습니다. 아래 그림을 볼까요? 오른쪽 탭에 마우스를 올릴 때마다 왼쪽의 이미지가 바뀌는데요.HTML5의 data속성과 자바스크립트의 getAttribute() 메서드를 이용한 코드를 포스팅해볼까 해요 일단 getAttribute()는 JavaScript에서 사용되는 메서드로, HTML 요소의 속성(attribute)을 가져올 때 사용되는데요. 예를 들어, HTML 태그에 id, class, href 같은 속성이 있을 때, 해당 속성의 값을 가져오는 데 유용합니다.element.getAttribute(attributeN..

안녕하세요 찐망고 입니다.오늘은 함수에서 중요한 return을 이해해보도록 포스팅 할건데요 return이란?return은 함수의 결과를 함수 밖으로 돌려주는 역할을 하는데, 함수 내부에서 어떤 값을 계산하거나 처리한 후, 그 결과를 다른 곳에서 사용할 수 있게 해주는 것을 뜻합니다. 쉽게 말하면:함수를 하나의 기계라고 볼 때, 기계에 무언가를 넣어서 (입력값, 인자) 작업을 하고 나면, 기계는 그 작업의 결과(출력값)를 내놓는데, 그 결과를 밖으로 내보내는 게 바로 return입니다~~~~function addNumbers(a, b) { return a + b;}const result = addNumbers(5, 3); // 함수의 결과가 result에 저장됨console.log(result); // ..

안녕하세요 찐망고입니다. 이전에 쓴 SVG애니메이션에 스크롤이벤트를 이용하여 원하는 스크롤 위치에서 SVG애니메이션이 진행되게 작업해 보려고 합니다. 이전글 참고 SVG Animate: stroke-dashoffset, SVG Gradient안녕하세요 찐망고입니다.오늘은 SVG 애니메이션 관련 포스팅을 시작해 볼게요 SVG애니메이션의 핵심은 stroke-dashoffset인데요.stroke-dashoffset은 SVG에서 경로(패스)의 테두리에 적용할 수 있는 속성uiweb.tistory.com  를 먼저 걸어줍니다.  스크롤 관련 js를 추가합니다.window.addEventListener("scroll", function() { const svgElement = document.querySelect..

안녕하세요 찐망고입니다.오늘은 SVG 애니메이션 관련 포스팅을 시작해 볼게요 SVG애니메이션의 핵심은 stroke-dashoffset인데요.stroke-dashoffset은 SVG에서 경로(패스)의 테두리에 적용할 수 있는 속성 중 하나로,stroke-dasharray와 함께 사용되며 경로를 따라 선을 그릴 때의 시작지점을 조정하는 역할을 합니다.  stroke-dasharray는 선을 일정한 패턴의 대시와 공백으로 나누는 속성인데,  위와 같은 코드인 경우 설정된 선의 5px만큼 그 뒤로 10px만큼의 공백을 반복하는 형태를 뜻합니다.  stroke-dashoffset은 기본적으로 0으로 설정되어 있으며, 을 증가시키면 대시패턴이 이동하여 경로를 따라 선이 그려지는 위치가 변경됩니다. JS를 이용하면..

안녕하세요 찐망고 입니다.이포스팅은 Apple의 기본 영문 글꼴인 SF-Pro폰트를 Windows환경에서 사용할 수 있도록 돕기위해 작성하였습니다.디자인을 하다보면 Windows에서 Apple폰트가 필요할때가 있잖아요. https://developer.apple.com/fonts/ Fonts - Apple DeveloperGet the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps.developer.apple.com 물론 이사이트에서 폰트를 다운 받을 수 있지만,dmg파일은 또 따로 zip프로그램을 받아 압축을 풀어야 하는 점.. ttf파일을 공유합니다      otf파일은 용량이 큰 ..

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

안녕하세요 찐망고입니다.  오늘은 Gmarket Sans 폰트에 대해 이야기해보려고 합니다. 현대적이면서도 친근한 느낌을 주는 산세리프 폰트로, 특히 글자 간격이 넓어 가독성이 뛰어난 것이 특징입니다.  Gmarket Sans는 누구나 제약 없이 자유롭게 수정하고 재배포할 수 있는 오픈 라이선스 폰트인데요.이러한 라이선스의 자유로움 덕분에 다양한 프로젝트에서 부담 없이 사용할 수 있습니다.폰트 자체가 갖고 있는 장점으로 인해 브로슈어, 포스터 같은 다목적 디자인 작업에 적합하며, 텍스트의 가독성을 높이기 위해 고려할 만한 좋은 폰트 입니다. 그러나, 웹 관련 작업에서는 상황이 조금 다른데요.다양한 대체 폰트들이 등장하면서 Gmarket Sans의 사용이 상대적으로 줄어드는 경향이 있습니다. 웹 환경에서는..

안녕하세요 찐망고입니다.웹에서 쓰는 폰트 관련 글들이 조회수가 높더라고요..제가 또 친절하게 설치파일과 웹폰트를 공유하기도 해서 그렇겠죠? TTF 파일이나 OTF 파일은 로컬에 설치하는 글꼴 파일입니다.반면에, 웹에서 사용하는 폰트는 WOFF(웹 오픈 폰트 형식)과 WOFF2 같은 파일 형식을 사용해요.@font-face { font-family: 'SUITE'; font-weight: 300; src: url('./SUITE-Light.woff2') format('woff2');}@font-face { font-family: "Pretendard"; font-weight: 100; src: url(Pretendard-Thin.woff) format(woff);} 위 코드..