전체 글 211

상세 페이지 디자인의 비밀: 효과적인 구매 유도를 위한 디자인 전략

안녕하세요 찐망고입니다. 디자인 어렵죠? 이론적인 게 머리에 충만해도 막상 흰 창을 보면 머부터 시작해야 할지 막막하고 그래서 조금 쉽게 풀어보고자 해요. 제품상세페이지디자인! 상세디자인이라고 하는 그 이미지들. 기억나네요.. 2006년인가 지마켓에 옥수수 판매 상세페이지를 만들어달라던 농부님.. 그때 당시엔 뭣도 모르고 내 눈에 이쁘고 내 눈에 이쁘면 그만이지 하는 마음으로 작업했는데.. 지금 생각해 보면 참.. 그 이후로 상세디자인 작업을 종류별로 참 많이 해봤는데요.. 이번 포스팅엔 전체적인 구성을 기획하여 작업하면 좋을지에 대해 포스팅해볼게요.. 레퍼런스는 각종 채널에서 확인이 가능하죠? 저는 와디즈와, 네이버스토어, 쿠팡을 많이 보는데요. 특히 와디즈 베스트 펀딩 상세페이지들은 정말 좋은 레퍼런..

이미지에서 폰트 찾기: 산돌구름 사용기

안녕하세요 찐망고입니다. 가끔 이벤트 상세디자인이나 배너들을 보다 보면 어떤 폰트를 사용했는지 궁금한 디자인들이 있더라고요 저만 그런 거 아니죠? 저 폰트는 뭘까 하고 고민하면서 구글링 해보니 비슷한 폰트를 찾아주는 사이트가 있어 포스팅해 봅니다. https://www.sandollcloud.com/#schpop 산돌구름 폰트가 필요할 때 언제 어디서나! www.sandollcloud.com:443 링크에 접속하면 이미지를 업로드하거나 url을 입력하라는 창이 뜹니다 저기에 이미지를 업로드하고 해당 폰트 영역을 선택하면~~~ 짠~~ 이렇게 리스트 형태로 뜹니다. 이 이미지를 업로드해서 쿼터 이상 구매 시라는 텍스트 박스를 눌러봤거든요. 프리텐다드 폰트가 딱? 물론 정확한 폰트가 아닐 확률이 더 높긴 하지..

다양한 웹사이트 내비게이션 스타일 소개

안녕하세요 찐망고 입니다. 오늘은 웹내비게이션에 대해 알아보려 합니다. 웹사이트에 접속한 사용자가 현재 위치와 이동경로를 파악할 수 있도록 돕는 내비게이션은 매우 중요합니다. 이는 사용자가 빠르게 원하는 목적을 달성할 수 있도록 도와주죠. 내비게이션은 그 구성에 따라 여러 단계로 나누어집니다. 예를 들어 사이트는 노란색 컬러에 해당하는 1단 메뉴를 눌렀을 때 빨간색에 해당하는 2단 메뉴가 나오고 빨간색을 기준으로 파랑계열의 3단 메뉴가 나옵니다. 이처럼 3단계 내비게이션은 깊이가 있지만, 너무 많은 단계는 사용자에게 혼란을 줄 수 있어 피하는 게 좋습니다. 반응형 사이트를 설계할 때는 PC와 모바일에서 내비게이션을 어떻게 표현할지 고민해야 합니다. 때로는 한 개의 내비게이션을 공유하고, 때로는 두 개의 ..

swiper pagination 커스텀 - 텍스트로 변경하기

안녕하세요 찐망고입니다. 오래간만에 swiper관련 포스팅을 하네요. 오늘은 pagination의 블릿 모양 대신 텍스트로 나오게 작업을 해볼까 합니다. 마녀공장을 클론코딩한 학생의 swiper슬라이더인데요. 텍스트를 클릭해서 화면을 넘기고 싶은 거죠 ㅎㅎ 여러 방법이 있으나 저는 배열을 이용해서 작업했습니다. const bullet = ['마녀공장', 'GS25']; const swiper01 = new Swiper ('.work-slider, { loop: true, pagination: { el: '.work-slider .swiper-pagination', clickable: true, renderBullet: function (index, className) { return '' + (bulle..

플러그인/swiper 2023.11.07

스크롤 바 css로 커스텀

브라우저에서 보이는 스크롤 자체를 css로 커스텀 할 수 있는데요. 요즘은 일부러 스크롤을 안보이게도 하던데.. 사용자경험 측면에서 스크롤이 없는게 과연 맞는것일까 잠깐 생각해보았습니다 ㅎㅎ https://m.manyo.co.kr/main/index.php m.manyo.co.kr 마녀공장 모바일 사이트 인데요 네비게이션 부분에 스크롤이 보이지 않아요 CSS로 커스텀 하는 경우 IE에선 소용이 없지만 그분은 운명하셨으므로 한번 써볼까요? ㅎㅎ /* 스크롤바 커스텀 css */ .navi-scroll::-webkit-scrollbar { width: 0; /* 스크롤바 너비 */ } .navi-scroll::-webkit-scrollbar-thumb { height: 100%; /* 스크롤바 길이 */ b..

WEB/CSS 2023.10.06

HTML문서에서 이미지 불러오기

안녕하세요 찐망고입니다. 오늘은 html문서에 이미지를 불러와볼 건데요. 문서에 이미지를 불러오는 요소들을 모두 포스팅해볼게요.. 이미지 맵은 따로 포스팅하도록 하겠습니다. 어떤 요소를 사용하든 이미지를 불러오려면 역시 경로가 중요합니다. 상대경로와 절대경로 안녕하세요 찐망고입니다. 오늘은 경로를 포스팅해볼까 하는데요. 경로를 사용하는 경우 대부분은 문서에 링크를 걸거나 이미지를 띄울 때 많이 사용합니다. 경로가 틀어지지 않아야 링크도 잘 uiweb.tistory.com 1. 요소 이미지요소는 경로를 통해 문서에 이미지를 불러올 때 사용하는 가장 기본적인 요소인데요. alt속성을 꼭 같이 넣어줘야 합니다. 웹접근성에 어긋나지 않기 위해서죠. 스크린리더기에서 해당 이미지를 alt속성에 사용한 값으로 읽어줍..

WEB/HTML기초 2023.09.18

<a>요소 - 링크를 걸어보자

안녕하세요 찐망고입니다. a요소는 문서와 문서를 연결하거나 이미지를 클릭하여 페이지가 넘어가거나 메일을 보내거나 같은 페이지끼리 위아래로 연결하려고 할 때도 사용합니다. a는 인라인 요소지만 블록요소를 포함할 수 있는 요소이며 블록요소를 포함할 땐 css를 이용하여 display: block; 혹은 inline-block을 지정해서 width, height, margin, padding을 적절히 잘 넣는 게 중요합니다. 일단 문서끼리 연결을 하려면 경로를 이해해야 하는데 경로 모르면 안 되니까 이전 포스팅 보고 오시길 바랍니다 상대경로와 절대경로 안녕하세요 찐망고입니다. 오늘은 경로를 포스팅해볼까 하는데요. 경로를 사용하는 경우 대부분은 문서에 링크를 걸거나 이미지를 띄울 때 많이 사용합니다. 경로가 틀..

WEB/HTML기초 2023.09.15

상대경로와 절대경로

안녕하세요 찐망고입니다.오늘은 경로를 포스팅해 볼까 하는데요. 경로를 사용하는 경우 대부분은 문서에 링크를 걸거나이미지를 띄울 때 많이 사용합니다.경로가 틀어지지 않아야 링크도 잘 걸리고 이미지도 잘 보이겠죠 ㅎㅎ당연히 css문서나 js문서를 연결할 때도 매우 중요하고요 상대경로의 기준은 현재 작업하고 있는 문서의 위치를 기준으로 연결한 문서들을 찾는 거고요절대경로의 기준은 현재 경로를 걸기 위한 문서 위치의 시작을 찾는 거예요. 예를 들어서D드라이브에 찐 망고폴더에 문서와 이미지폴더가 있는데문서에 이미지폴더 안에 있는 이미지를 연결하고 싶다고 하면 상대경로는 문서를 기준으로 이미지폴더를 찾는 거라이런 식으로 경로를 넣어주면 되지만 절대경로는 절대경로는 웹사이트의 루트 디렉토리를 기준으로 경로를 지정하는..

WEB/HTML기초 2023.09.12

HTML 인라인 요소: <strong>, <em>, <mark>를 통한 텍스트 강조 방법

안녕하세요 찐망고입니다.오늘은 강조를 뜻하는 인라인요소인 요소와 요소, 요소에 대해 포스팅해볼 건데요.  html마크업을 하면서 주의할 점은 요소의 의미를 파악하는 것입니다.브라우저에서 글자가 두꺼워지고 기울어지고 여백이 생기고 하는 것들은 css로 수정이 가능하니까요.  요소와 , 모두 강조의 의미를 뜻할 때 사용하는 요소인데요.각각 다른 방식으로 강조를 나타내요   요소 요소는 주로 중요한 텍스트의 의미를 나타내는데,해당 텍스트가 문서의 중요한 부분임을 강조하는 데 사용합니다.예를 들어, 금융상품의 가격이나 경고메시지와 같이 중요한 정보를 강조하는 데 사용하죠그리고 스크린 리더등 보조기술을 사용하는 사용자에게 중요한 내용임을 전달합니다.논리적으로 중요한 텍스트를 강조하죠주의: 이 상품은 ..

WEB/HTML기초 2023.09.07

boxmodel) margin과 padding 테스트 문제

안녕하세요 찐망고입니다. 수업중에 만들어본 boxmodel 테스트 문제인데요. 친구들이 풀면서 고생하길래 블로그에도 공유해봅니다. 아직 초보자 이신 분들 한번 풀어보세요. 아래 문제가 테스트 문제구요~ 제목요소 menu01 menu02 menu03 이용약관 ©copyright 결과이미지를 보고 똑같이 만드는 작업입니다 답은 여기요! 더보기 제목요소 menu01 menu02 menu03 이용약관 ©copyright 2021.12.30 - [WEB/CSS] - box model (박스모델) - border와 padding box model (박스모델) - border와 padding 안녕하세요 찐망고입니다. 오늘은 box model에 관련해서 포스팅을 하려고 합니다~ 카테고리를 HTML로 지정해야 할지 CS..

WEB/CSS 2023.09.06