로컬 폰트를 웹폰트로 적용하는 방법로컬에 설치된 폰트 파일을 웹사이트에서 사용하고 싶지만, 제공되는 웹폰트 링크가 없다면 다음과 같은 방법을 통해 웹폰트로 사용할 수 있습니다. 1. 웹폰트 적용 css 코드 작성먼저, 아래의 CSS 코드를 작성하여 웹폰트를 설정합니다 :@font-face {font-family: 'NanumSquare';font-weight: 400;src: url(NanumSquareR.eot);src: url(NanumSquareR.eot?#iefix) format('embedded-opentype'),url(NanumSquareR.woff) format('woff'),url(NanumSquareR.ttf) format('truetype');}이 코드를 'style.css' 또는 '..

내가 보고 있는 쇼핑몰 어떤 솔루션(카페24, 고도몰) 사용했는지 확인하는 방법 쇼핑몰 운영 담당자분들이 가장 많이 궁금해하시는 부분은 바로 내가 운영중인 쇼핑몰 솔루션에서 어느 범위까지 수정이 가능한가 입니다. 퍼블리싱 의뢰 또는 문의를 받아서 진행하다보면 '내가 원하는 기능은 이런 건데, 우리 사이트에서 수정이 가능한가요?', 또는 '여기 레퍼런스 사이트에서는 이런 게 되는데, 우리도 똑같이 수정하고 싶어요.' 가 많은데요. 쇼핑몰 솔루션에 따라 수정할 수 있는 범위나, 가능 여부, 수정 방식 등이 모두 상이하다보니 내가 보고 있는 쇼핑몰이 어떤 솔루션을 사용했는지 파악할 수 있다면 가능 여부에 대한 파악이 조금 쉬울 수 있겠습니다. 왜냐하면 솔루션에 따라서 카테고리로 사용하는 상품 분류나 게시판 분..

쇼핑몰, 사이트 내 가로로 흐르는 전광판 텍스트 만들기 최근 트렌디한 웹사이트에서 볼 수 있는 가로로 흐르는 전광판의 역할을 하는 텍스트를 CSS 만으로 만들 수 있는 방법을 소개해드립니다. moho design template glad moho design template glad moho design template glad moho design template glad moho design template glad moho design template glad 아래에서 예제를 확인해보세요. HTML 삽입 미리보기할 수 없는 소스 텍스트가 삽입된 사이트의 예시입니다. 적용된 사이트 확인하기 이 글이 도움되셨다면 댓글과 공감으로 응원해주세요 🥳 궁금하신 점은 댓글 남겨주세요.

cafe24 쇼핑몰 모자이크 룩북 슬라이드 갤러리 페이지 만들기 cafe24 브랜드 쇼핑몰을 오픈하려다 보면 이미지만 업로드해야하는 룩북 페이지가 고민인 분들이 많으실 것으로 생각됩니다. cafe24의 쇼핑몰 갤러리 게시판은 유료 템플릿에서도 크게 룩북 형태를 중심으로 고려되지 않은 디자인들이 많아 커스터마이징 요청사항으로 많이 들어오는 디자인 중 하나입니다. 또한 cafe24 쇼핑몰 솔루션에는 자체적으로 내부 스크립트가 내장되어있어 잘 되어있는 스크립트 라이브러리를 사용하더라도 적용이 어려운 부분이 많습니다. cafe24 쇼핑몰 사이트에 게시판을 사용하지 않고 별도의 룩북 갤러리 페이지를 만드는 방법을 알려드립니다. cafe24 쇼핑몰 룩북 페이지 디자인하기 우선 룩북페이지를 만들기 위해 룩북 이미지들..

cafe24 쇼핑몰 솔루션 이용 시 시스템에서 자동 발송되는 메일을 자동/수동으로 설정할 수 있습니다. 또한 아래 방법을 사용하여 이 자동메일 발송에서 메일의 내용이나 디자인도 변경이 가능합니다. 디자인 변경은 html을 사용하여 수정합니다. cafe24 쇼핑몰에서 자동 발송 메일 레이아웃 디자인 변경하기 1. 고객관리 > 자동메일발송설정 > 자동메일발송설정 메뉴로 접속합니다. 2. 자동메일 발송 리스트 중 수정하고자 하는 메일을 선택하여 우측의 '수정'버튼을 클릭합니다. 3. 수정 창이 뜨면 html 모드에서 디자인을 코드로 수정합니다. 자동 발송 이메일 디자인 활용 방법 자동 발송용 이메일의 템플릿 디자인도 구독용 이메일 템플릿의 방식처럼 웹사이트의 카테고리 링크를 넣어 미니 웹사이트처럼 제작하면 고..

cafe24 쇼핑몰 상세페이지 내 동영상 삽입하기 cafe24 쇼핑몰의 상세페이지를 전체 통이미지가 아닌 html로 작성하여 동영상을 삽입할 수 있습니다. iframe은 뒤쳐진 기술인 듯 최근 활발히 사용되는 태그는 아닙니다만 여전히 동영상 삽입 코드로 iframe이 사용되고 있습니다. 1. 삽입할 동영상의 url을 준비합니다. 동영상을 업로드하거나, 업로드된 동영상 하단의 '공유'버튼을 클릭하여 url을 추출합니다. 2. 상세페이지 이미지를 cafe24 쇼핑몰 관리자의 ftp에 업로드합니다. cafe24 쇼핑몰 관리자 접속 > ftp (상단 우측메뉴) > 파일 업로더 (좌측메뉴) 폴더는 별도로 생성하거나 사용하고 있는 이미지 폴더에 넣고 해당 경로를 포함한 이미지 URL을 추출합니다. 전체 상세페이지에..

쇼핑몰 디자인 트렌드로 메인페이지 내에 인스타그램 콘텐츠 연동을 많이 사용하고 있습니다. cafe24 쇼핑몰 무료 템플릿에는 인스타그램이 연동되어있지 않아 별도로 연동 설치가 필요한데요, 무료로 인스타그램 위젯 설치하고 연동하는 방법입니다. cafe24 쇼핑몰 인스타그램 연동하기 1. cafe24 쇼핑몰 관리자에 로그인합니다. 2. 스마트모드로 접속된 경우 좌측 상단에서 프로모드로 변경하고, 상단 메뉴의 제일 오른쪽에 있는 '앱스토어' 메뉴를 클릭합니다. cafe24 앱스토어란? cafe24의 앱스토어는 cafe24에서 무료로 제공하는 다양한 api를 앱의 형태로 설치하여 관리할 수 있는 플랫폼입니다. 다양한 기능으로 개발된 앱들을 검색하여 무료 또는 유료로 사용할 수 있습니다. 3. 앱스토어 페이지 내..

멋진 웹사이트는 인터랙션이 화려한 것이 특징이라면 특징입니다. 사용자의 행동에 따라 적절한 반응을 실시간으로 해준다면 웹서핑에 재미를 붙여 체류 시간을 더 높여줄 수 있죠. 그 중 멋져보이는 웹사이트의 특징이 되는 포인트 중 하나인 마우스커서 이미지 바꾸는 방법입니다. 웹 기본 커서 지정 속성 웹 기본으로 이미지 추가 없이 제공되는 커서 속성은 다음과 같습니다. cursor : help; cursor : wait; cursor : crosshair; cursor : not-allowed; cursor : zoom-in; cursor : grab; 하지만 제공되는 아이콘을 사용할 게 아니라, 별도의 디자인된 아이콘이나 사진 이미지로 적용하고 싶다면 url 설정이 필요한데요. 준비물은 png 또는 svg 이..

최근 마우스오버나 딤처리 배경에서 블러효과가 들어간 디자인을 많이 보실 수 있는데요, 나이키 공식 웹사이트에서는 gnb에서 메가메뉴를 펼쳤을 때 나머지 웹페이지의 배경을 어둡게 dim처리 하면서 블러효과를 주어 포커싱되는 인터랙션을 사용하고 있습니다. 이 배경 블러 효과를 사용하는 소스는 css 스타일 소스로 backdrop-filter 입니다. backdrop filter로 검색하시면 MDN 문서에서 다양한 적용 값을 확인해보실 수 있어요. 나이키 공식 웹사이트에서의 적용 사례입니다. gnb가 스크롤 시 상단 고정될 때 gnb 메뉴 자체의 배경에 blur 효과를 주어 배경이 100% 일 때보다 답답한 느낌을 줄이고 투명도로 인한 개방감을 준 사례입니다. div의 배경컬러를 지정할 때 함께 사용하는 속성..

최근 퍼블리싱 코딩 마크업 작업을 하던 중 기존에 작업했던 dbre 사이트의 디자인 중 일부에서 신기한 부분을 발견했습니다. 컬러 헥사코드에 opacity를 준 rgba 코드를 사용해서 배경 컬러를 작업했는데, 크롬 개발자도구에서 보니 헥사코드가 6자리가 아닌 8자리로 표기되는 것이었지요. 위 이미지에서 background 를 보시면 #0047FFCC 라고 8자리로 되어있는 것을 보실 수 있는데요, 보통 우리가 알고있는 컬러 지정 css 코드는 hex 코드 6자리와 rgba(255,255,255,0.8) 과 같은 rgb 형태입니다. rgb 형태는 (r값,g값,b값,1을 100%로 하는 opacity 소수점자릿수) 로 지정을 하게 되는데, 끝자리의 소수점자릿수가 투명도조절 값이 됩니다. 본래 해당 코드는 ..