반응형

HTML&CSS 16

[CSS] 웹사이트 사파리 브라우저에서 명조체로 보일 때 해결방법

사파리 브라우저에서 웹사이트 기본 폰트가 명조체로 보일 때 웹사이트를 사파리 브라우저에서 볼 때 가끔 고딕체나 특정 폰트로 지정한 부분이 기본 명조체로 보여질 때가 있습니다. 사파리의 고유 기본 폰트명을 고딕체로 설정해주지 않아서 생기는 이슈인데요. 크롬 브라우저에서는 'Noto Sans'로만 지정되어있어도 텍스트가 고딕 폰트로 정상적으로 노출되지만, 사파리 브라우저에서는 이렇게 기본 명조체로 나타나게 됩니다. 해당 부분의 css 소스에서 'Apple SD Gothic Neo'를 추가하면 해결됩니다. .text {font-family:'Noto Sans KR','Apple SD Gothic Neo',Sans-serif; } 위처럼 설정 시 '' 안에 들어간 폰트 순서대로 해당 폰트가 없는 경우 다음 폰트..

HTML&CSS 2021.09.18

[cafe24 팁] 카페24 상단 띠배너 추가 설치 수정하기

아래로 스크롤 시 사라지고 닫기버튼으로 끌 수 있는 상단 띠배너 설치 방법입니다. 모든페이지 또는 특정페이지에 노출되도록 설정이 가능하고 즉각적인 POP로 활용하기 좋아 쇼핑몰 디자인에 자주 활용됩니다. 1. cafe24 쇼핑몰 관리자 > 프로모드 > 디자인관리 > 쇼핑몰 디자인 수정 접속하여 HTML 편집창을 열어줍니다. 2. 띠배너를 넣고자 하는 페이지를 열어 해당 코드를 추가합니다. 코드의 위치는 페이지 내 어디에 넣으셔도 상관 없습니다. 3. common.css 에 해당 코드를 추가합니다. layout / basic / css / common.css / * 띠 배너 css * / .promotionBanner { position:relative; overflow:hidden; text-align:..

HTML&CSS 2021.08.10

[CSS] 배경 이미지가 크롭된 텍스트 스타일 만들기 CSS

배경이미지가 텍스트 컬러로 적용되는 크롭 스타일의 텍스트 디자인 적용 예제입니다. 텍스트를 많이 입력하여 스크롤이 생기면 백그라운드 이미지를 고정시켜{background-attachment:fixed;} 텍스트만 스크롤되는 패럴랙스 스타일로도 적용해볼 수 있습니다. People will throw stones at you. Don't throw them back. Collect them all and build an empire. VIEW DEMO

HTML&CSS 2021.06.09

[풀스택디자이너] 아톰 에디터 ftp 연결하기

[Full stack Designer - Publishing] 풀스택 디자이너가 되기 위한 첫 걸음, 퍼블리싱 공부를 저는 cafe24 에디터로 이것저것 수정하면서 자연스레 익히게 됐어요. 하지만 cafe24 에디터는 cafe24에서만 사용하는 코드들이 있고, 공개되어있지 않은 소스들도 많아서 자유로운 수정에는 한계가 있습니다. 무료 호스팅이기 때문에 수정의 범위가 제한되어있는 것은 당연하겠죠. 그래도 무료 호스팅에서 이만큼의 기능을을 모두 무료로 사용할 수 있다는 것은 큰 장점입니다. 많이들 아시겠지만 cafe24는 쇼핑몰에 특화된 무료 이미지호스팅으로 관리자와 ftp까지 제공하는 혜자로운 서비스입니다. 최근에는 스마트모드와 에디봇이라는 더 쉽고 편리하게 UI가 개선된 형태의 서비스를 제공하고 있어 진..

HTML&CSS 2020.03.18
반응형