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

안녕하세요 찐망고입니다.아주 간단하지만 제법 많이 질문하는 부분이라 미리 포스팅을 해볼까해요.요즘 기업사이트 추세가  히어로섹션에 영상을 많이 넣더라구요.거의 국룰이랄까..영상을 넣을거다 라고 하면HTML요소로는 VIDEO요소가 있고내가 다른 서버에 있는 영상을 좀 가지고 쓸거다 라고 하면  IFRAME요소로도 가능합니다  // VIDEO요소 메인에 영상만 넣으면 멈춰있는 상태로 들어가요그래서 자동재생(autoplay) 하는게 좋은데 자동재생 속성을 넣어도 멈춰있단 말이죠.사용자입장에서 처음  가보는 페이지에 접속하자마자시끄러운 소리와 함께 (나름 고르고고른 bgm이라 할지라도) 영상이 재생되면 당황하겠죠?그래서 음소거(muted)를 하는 거고, 음소거가 되야 자동재생이 됩니다.한번 재생하고 멈출거 아니..

안녕하세요 찐망고입니다. 얼마전 setInterval()을 이용하여 숫자 카운팅하는 포스팅을 했었는데요 2023.06.28 - [WEB/JS코드] - JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString(); JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString(); 안녕하세요 찐망고 입니다. 이전 포스팅에 숫자 카운팅 하는 코드를 올려봤는데요.. 이번엔 한개가 아닌 두개나 세개의 요소에 동시에 숫자가 카운팅되게 코드를 짜볼거에요 일단 이전포스팅을 uiweb.tistory.com 아무래도 저런 작업을 main문서에 넣다보면 스크롤 이벤트도 막 하고 싶잖아요? 다알아요 하고싶은거.. 물론 스크롤이벤트가 가능한 플러그인..

안녕하세요 저는 찐망고이고 오늘은 마우스 커서를 따라다니는 이미지 효과를 만들어 볼건데요.. 이벤트는 mousemove를 사용하고 좌표값을 알 수 있게 pageX와 pageY를 체크하시면 되요 작년 10월에 SELECTO COFFEE 웹사이트가 업데이트 되었는데.. https://www.selecto.co.kr/brand/main.asp 셀렉토커피 커피전문점,카페창업,아메리카노 전문점,브런치 카페,입맛에 따라 골라먹는 커피전문점등 www.selecto.co.kr 요 귀여운 친구가 마우스를 따라다니더라구요~~ 머 아주 간단한 코드로 가능하니까 작업해볼께요 일단 이미지를 넣어야하는 요소가 필요하고 그 요소에 이미지를 담을거고 그친구를 mousemove이벤트를 이용하여 움직일겁니다. // html // jav..

안녕하세요 찐망고 입니다. 이전 포스팅에 숫자 카운팅 하는 코드를 올려봤는데요.. 이번엔 한개가 아닌 두개나 세개의 요소에 동시에 숫자가 카운팅되게 코드를 짜볼거에요 일단 이전포스팅을 참고하시고~~ 2023.06.07 - [WEB/JS코드] - JS) 숫자 카운트 setInterval(), setTimeout() JS) 숫자 카운트 setInterval(), setTimeout() 웹페이지 접속 할 때 숫자 카운팅 되면서 움직이는.. 그런것들을 만들고 싶었다면? // HTML 0 // JS // 숫자 카운트 const counter = ($counter, max) => { let now = max; const handle = setInterval(() => { $counter.innerHTML = Ma ..

스크롤의 위치에 따라 실행되는 애니메이션을 만들어볼건데요~ 스크롤 이벤트라고 하죠? 스크롤을 내릴 때마다 svg애니메이션이 돌아가게 하는 결과물이구요 svg애니메이션은 나중에 또 따로 포스팅을 하기로 해요 실은 순서대로 하는게 맞는데 그러다보니 자꾸 밀려서;;; 일단 html구조 자체를 한섹션씩 짜버리게 했습니다. 이미지 + 텍스트박스 + cass svg 를 한 박스로 묶어서 네개를 만들고 svg는 absolute처리를 했구요 // SVG HTML h a n m a c // SVG CSS /*svg*/ @keyframes stroke { 0% { stroke:#fff; stroke-width: 1px; stroke-dashoffset: 326px; } 70% { fill: transparent; } 98..

안녕하세요 찐망고입니다. 제가 벌써 나흘째 포스팅을 꾸준히 하고 있어요.. 예약포스팅이긴 하지만.. 오늘이 마지막이긴 하지만.. 오늘은 자바스크립트를 이용하여 페이지가 로드 되었을 때 타이핑 하며 나오는 텍스트를 만들어 볼거에요.. 일단 일반 타이핑 예제랑은 다르게 텍스트가 위쪽은 테두리만... 아래쪽은 면색이 포함되어서 요소가 두개로 분리되어야 하는 상황 학생 포트폴리오 - OB리뉴얼 사이트 // HTML // CSS .text-box { display: flex; justify-content: center; align-items: flex-start; height: 200px; } .text-box > span { display: block; -webkit-text-fill-color: transpa..

안녕하세요 찐망고 입니다. 제목짓는거 왜이리 어렵죠? 헤메고있는 누군가에게 조금이라도 도움이 되길 바라며 오늘도 시작해볼게요. 네비게이션에 보면 각 메인메뉴에 마우스를 올리면 아래 depth들이 한번에 나오고 각 메뉴이름에 맞춰 depth가 나오는 배경아래 하단에 text가 나오는 작업을 해보려고 합니다. 저는 개인적으로 html과 css로 셋팅을 끝내놓은 후 JS작업을 하였습니다. 이런 류의 메뉴 디자인은 웹접근성을 생각하며 작업을 하기가 참.. // HTML COMPANY BRAND ESG NEWS&MEDIA CAREER 제목 히든제목 COMPANY ... BRAND ... ESG ... NEWS&MEDIA ... CAREER ... // CSS .nav-bg { position: absolute; ..

웹페이지 접속 할 때 숫자 카운팅 되면서 움직이는.. 그런것들을 만들고 싶었다면? // HTML 0 // JS // 숫자 카운트 const counter = ($counter, max) => { let now = max; const handle = setInterval(() => { $counter.innerHTML = Math.ceil(max - now); // 목표수치에 도달하면 정지 if (now { // 카운트를 적용시킬 요소 const ..

안녕하세요 찐망고입니다. 아.. 정말 매일매일 포스팅하시는 분 리스펙 바쁘니까 바로 본론에 들어가서 적응형 사이트를 만들다보면 pc와 mobile사이트를 따로 작업하게 되는데, pc의 해상도 기준을 최소 1366정도 잡거든요.. 그 이하 해상도에선 가로스크롤이 생기게요~ 문제는 header가 position: fixed인 경우 width길이만큼 고정이 되어버린다는 거죠~ 가로 스크롤을 이동해도 헤더는 움직이지 않습니다 저걸 무시하고 마크업 하는 분들도 있고, 움직이게는 했는데 전체 메뉴가 보이지 않게 셋팅한 사이트들도 많더라구요 이렇게 가로스크롤을 해도 nav가 제대로 보이는 게 좋겠죠? // HTML 제목 // CSS header { position: fixed; width: 100%; z-index:..