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

안녕하세요 찐망고입니다. 거두절미하구 포스팅 시작! https://www.imele.co.kr/ 아이멜리 건강하고 아름다운 삶을 위한 라이프 케어, 아이멜리 www.imele.co.kr 학생이 여기 있는 Best Product섹션의 슬라이드를 따라하고 싶어해서 만들어보았습니다. 아 저 사이트는 slick을 사용하였는데 이번반 slick적용하는 수업을 안했음.. 그래서 swiper로 만들어 볼게요~ 일단 두개의 swiper를 만들어서 swiper.controller.control를 이용해서 연결해보려고 했는데.. 실패했습니다. 계속 충돌해서 swiper-slide-active가 움직이지 않고 고정되는 바람에.. 🤣🤣 그래서 사용한 방법 // HTML 피부에 전하는 청귤 세럼의 빛 2주 잡티 이별 세럼 청귤..

안녕하세요 찐망고입니다. 제가 벌써 나흘째 포스팅을 꾸준히 하고 있어요.. 예약포스팅이긴 하지만.. 오늘이 마지막이긴 하지만.. 오늘은 자바스크립트를 이용하여 페이지가 로드 되었을 때 타이핑 하며 나오는 텍스트를 만들어 볼거에요.. 일단 일반 타이핑 예제랑은 다르게 텍스트가 위쪽은 테두리만... 아래쪽은 면색이 포함되어서 요소가 두개로 분리되어야 하는 상황 학생 포트폴리오 - 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 ..

이번 반 예제 클론 코딩은 https://www.century21cc.co.kr/ 였는데... 개인적으로 사이트 내 단점을 수정하면서 예제로 쓰고있다. 반응형 예제로 쓰기엔 나쁜 레이아웃이지만 뭐 마크업이 불가능한 레이아웃은 아니므로... 저 섹션 부분 왼쪽 그림이 swiper를 이용해서 fade처리되면서 세번 넘어가게 작업 되어 있길래 따라해 보았습니다. 참고 swiper demo link swiper-effect-creative CodeSandbox is an online editor tailored for web applications. codesandbox.io // HTML // CSS .food-sec .img-slider { float: left; max-width: 60%; padding-..

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

1) 라임 영역 잡아 얼음레이어 위에 올려 놓기 2) 백그라운드 얼음레이어 Ctrl + J 맨위로 올리기 - Screen Mode 3) 라임에만 적용 될 수 있게 클리핑 마스크 - Alt + Ctrl + G 4) opacity 조절 사진출처 Unsplash의Hao Zhang 사진출처 Unsplash의Andres Hernandez

포토샵 텍스트 합성 1) Quick Selection Tool 이용 Select and Mask...클릭 - Output To New Layer 2) type도구 글씨 쓰고 ctrl + j 3) 레이어 위아래로 글씨 위치 잡고 맨 위 글씨에 fill: 0 4) Layer Style Stroke주기 05) 글씨레이어 동시에 잡고 이동

01) Clone Source 패널 선택 후 Flip Horizontal 클릭 - Window > Clone Source 02) 도장툴 선택 후 alt + 클릭 - 반대쪽에 문질러 주기 03) Quick Selection Tool 이용 영역 잡아서 ctrl + j 04) 백그라운드레이어에서 배경정리하기 사진 출처 Unsplash의Nain Patel

배경에 구름이미지 합성하기 01) 배경이 되는 이미지에 구름이미지를 가져온다. - Ctrl + T 크기조절 02) 조정레이어에서 Black & White - Blue 슬라이드 조절 - 포인트는 배경을 검정색으로 맞추는 것 03) 구름이미지에 클리핑 구름 이미지를 Screen모드 사진출처 Unsplash의C Dustin 사진출처 Unsplash의Sam Balye 사진출처 Unsplash의henrique setim