본문 바로가기

분류 전체보기174

제이쿼리 플러그인 owl carousel2 (슬라이드 이미지) Owl carousel2 올빼미 슬라이드 반응형 슬라이더 레이아웃 종류 설치방법 홈페이지에서 플러그인 다운로드 압축 해제 후 dist 폴더 안에 css 위치를 확인 안에 css 경로 입력 다음에 스크립트 경로 입력 제이쿼리 CDN 입력 반응형도 적용되어, 모바일로 볼때는 썸네일 한개만 보여지도록 한다. 데모중 Animate 효과를 적용하면 일반적으로 알고있는 1개씩 흘러가는 슬라이드가 가능하다~ owlcarousel2.github.io/OwlCarousel2/ Home | Owl Carousel | 2.3.4 Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you.. 2020. 12. 31.
책넘기는 효과 제이쿼리 플러그인 제이쿼리 플러그인 - BOOKLET 웹사이트 소책자, 브로슈어, 신문, 기업 홍보물 등에 종종 쓰이는 책장 넘기는 효과. 제이쿼리로 만들어져서 모바일에서도 볼 수 있다는 장점이 있다. 라이센스 MIT 라이센스로 수정, 배포가 자유로우며 실무 혹은 상업적으로 이용 가능 ( *단 저작권 표시및 허가 표시를 소프트웨어의 복제물 또는 중요한 부분에 기재한다) 사용방법 HTML Yay, Page 1! Yay, Page 2! Yay, Page 3! Yay, Page 4! 홈페이지를 방문하거나 데모를 다운 받으면 다양한 효과를 확인 할 수 있다. 너비/높이/속도/읽는방향,속도/페이지순서,패딩/그림자/자동시작/탭/화살표...등등 여러가지 옵션들을 선택 가능 활용 샘플 : 서울여자 간호대학 브로셔 다운로드 2021-07.. 2020. 12. 29.
반응형 웹사이트 단위 vh/vw vh = Viewport Height vw = Viewport Width 현재 뷰포트란? 현재, 보여지는 영역을 의미 1vh = 뷰포트 높이의 1% 1vw = 뷰포트 너비의 1% 뷰포트가 현재 가로세로 100px 이라면 height:1vh = height:1px width:1vw = width:1px height:100% (부모 높이를 반드시 지정해줘야함) See the Pen full size section_% by lionbum (@lionbum) on CodePen. height : 100vh See the Pen full size section_vh by lionbum (@lionbum) on CodePen. 2020. 12. 27.
빙그레체- 레트로 느낌 가득~ 무료 상업 폰트 레트로한 감성이 물씬 나는 빙그레체! 인쇄물, 광고, 온라인 등 상업적 목적으로 사용이 가능하다고 한다. 굵기가 굵어 타이틀로 쓰기에 적합한 서체! 레귤러와 볼드체 두가지 다 있어서 적절히 사용하면 좋을듯 다운로드 www.bingfont.co.kr/bingfont.html 빙그레 서체 2020 갑붕싸? 빙그레 싸만코체 출시! www.bingfont.co.kr 라이센스 빙그레 서체(빙그레체, 빙그레체Ⅱ, 빙그레 따옴체, 빙그레 메로나체, 빙그레 싸만코체)의 지적 재산권은 빙그레(www.bing.co.kr)에 있습니다. 빙그레 서체는 개인 및 기업 사용자를 포함한 모든 사용자에게 무료로 제공합니다. 빙그레 서체는 인쇄물, 광고물, 온라인 등 상업적 목적으로 사용할 수 있습니다. 단, 글꼴 자체를 유료로 판매.. 2020. 12. 17.
네이버 마루부리 서체(완성본), 무료 상업용 폰트 특징 궁서체 이면서 심하게(?) 진지하지 않으면서 클래식한 느낌을 가져가고 있는 서체 활용예제 -한때 미스터 선샤인에 폭 빠져서 만들어본 - 마루 부리 외 네이버 글꼴 설치하러 가기 https://hangeul.naver.com/ 네이버 한글한글 아름답게 6만여 명의 사용자와 만든 마루 부리 5종을 배포합니다. hangeul.naver.com 2020. 12. 15.
[JS 활용]이미지맵속 내용 복사하기, 해시태그 내용 복사하기 스크립트 html 버튼 클릭 -> 지정한 내용 복사 (해시태그내용 복사) 사용되는 요소 이미지 맵 태그안에 usemap 속성 / 제이쿼리 소스 html 제이쿼리 소스 $('.hashtag').click(function(){ var urlAddress= $('#hashtagTxt'); urlAddress.css('display','block').select(); document.execCommand("Copy"); urlAddress.css('display','none'); alert('해시태그가 복사되었습니다'); return false; }); 결과 일전에 이미지맵 클릭시 새창 띄우기와 함께 같이 병행해서 사용하면 좋을듯 https://lionbum.tistory.com/37 이미지 맵 클릭시 새창 팝업 띄우기 이미지 .. 2020. 12. 15.
도스명조체 폰트, 게임폰트, 픽셀아트 폰트 - 무료상업용 폰트 마인크래프트와 같은 게임에서 쓰이는 도트아트 느낌이 담긴 도스 명조체. 게임 관련 디자인과 같은 것들을 할때 사용하면 좋을 서체. 이런식의 도트 아트 느낌과 어울리는 폰트! 다양하게 활용가능하다. 폰트 라이센스 개인 및 기업사용자에게 무료로 제공. 웹디자인/출판/웹폰트/CI,BI 제작/ 영상제작 및 자막 등 자유롭게 사용가능 유료판매행위는 금지. 폰트 사용 가능 범위 인쇄 브로슈어, 포스터, 책, 잡지 및 출판용 인쇄물 등 웹사이트 웹페이지, 광고 배너, 메일, E-브로슈어 등 영상 영상물 자막, 영화 오프닝/엔딩 크레딧, UCC 등 임베딩 웹사이트 및 프로그램 서버 내 폰트 탑재*, E-book 제작 BI/CI 회사명, 브랜드명, 상품명, 로고, 마크, 슬로건, 캐치프레이즈 폰트 다운로드 경로 http.. 2020. 12. 13.
[JS 활용]버튼을 누르면 보이기/감추기. 토글 함수를 사용 버튼을 누르면 보였다가 안보였다 하는 효과가 필요할 때가 있다. 이벤트나 그외 적용이 가능한 효과! 제이쿼리 토글 소스를 활용하여 간단하게 해결 HTML토글버튼 다시버튼 누르면 안보임 제이쿼리 - 토글 $(function (){ $("#btn_toggle").click(function (){ $("#Toggle").toggle(); }); }); 결과*Result 를 눌러주세요 2020. 12. 13.
행복 고흥 서체, 신년인사 서체 캘리 폰트! (무료, 상업사용 가능) 캘리그래피와 어울릴만한 폰트! 새해 인사나 연하장을 보낼때 사용하면 좋은 서체 일듯하다. 약간 변형하면 더욱 예쁘게 사용할 수 있을 듯 하다. 폰트 라이센스 개인 및 기업사용자에게 무료로 제공. 영상, 매체, 인터넷, 모바일 등 다양한 매체에서 자유롭게 사용 가능. 웹디자인/출판/웹폰트/CI,BI 제작/ 영상제작 및 자막 등 자유롭게 사용가능 유료판매행위는 금지. 폰트 사용 가능 범위 인쇄 브로슈어, 포스터, 책, 잡지 및 출판용 인쇄물 등 웹사이트 웹페이지, 광고 배너, 메일, E-브로슈어 등 영상 영상물 자막, 영화 오프닝/엔딩 크레딧, UCC 등 임베딩 웹사이트 및 프로그램 서버 내 폰트 탑재*, E-book 제작 BI/CI 회사명, 브랜드명, 상품명, 로고, 마크, 슬로건, 캐치프레이즈 폰트 다운.. 2020. 12. 13.
카페 24 고운밤 서체 감성적 느낌이 가득한 폰트 카페 24고운밤 폰트. 부드러운 느낌. 홈메이드 느낌의 디자인과 잘 어울리는 폰트로 주로 베이킹/사진 등의 디자인에 살짝 얹어 주면 너무 예쁘게 어울리는 느낌의 폰트이다. 부리가 있어 궁서체와 닮았지만 궁서체 만큼 진지하지 않고 적당히 부드러운 느낌의 폰트. 자연주의 느낌과도 잘 어울리는 폰트. 갬성 블로그나, 음식, 베이킹 등의 사진들과 정말 잘 어울리는 폰트 이다. 비슷한 느낌으로 쓰인 폰트 레퍼런스 폰트 라이센스 개인 및 기업사용자에게 무료로 제공. 웹디자인/출판/웹폰트/CI,BI 제작/ 영상제작 및 자막 등 자유롭게 사용가능 유료판매행위는 금지. 폰트 사용 가능 범위 인쇄 브로슈어, 포스터, 책, 잡지 및 출판용 인쇄물 등 웹사이트 웹페이지, 광고 배너, 메일, E-브로.. 2020. 12. 13.
정선 아리랑 서체 정선 아리랑 혼체 정선 아리랑혼체의 경우, 붓글씨 혹은 캘리같은 느낌을 주는 폰트로 안정감 있는 캘리 폰트로 사용될 수 있을 듯 하다. 연하장이나, 감사카드 등에 쓰면 좋을 만한 폰트. 그외에 아리랑체는 일러스트에서 조금 변형하여 쓰면 포인트 있는 타이틀을 만들기 좋을 폰트! 정선군 전용서체 라이선스 정선군 전용서체(정선아리랑체, 정선동강체)의 지적 재산권은 정선군 (www.jeongseon.go.kr)에 있습니다. 정선군 전용서체는 개인 및 기업 사용자를 포함한 모든 사용자에게 무료로 제공합니다. 정선군 전용서체는 인쇄물, 광고물, 온라인 등 상업적 목적으로 사용할 수 있습니다. 단, 글꼴 자체를 유료로 판매하는 것은 금지하며 정선군 전용서체는 수정 및 재배포를 할 수 없으며, 배포되는 형태 그대로 사.. 2020. 12. 11.
[JS 활용]이미지 맵 클릭시 새창 팝업 띄우기 이미지 맵 클릭시 새창 팝업 띄우기 이미지 상에 어떤 영역을 클릭했을때, 새창을 띄우는 스크립트! 이미지 맵에서 활용해야 하므로 이미지 맵 태그 사용 출처 : www.w3schools.com/html/html_images_imagemap.asp 1. 이미지 맵으로 지정될 영역을 coords 로 잡기 2020. 12. 11.
아웃룩, 이메일 HTML 코딩 시 꼭 알아야 할 3가지 유의사항 간혹 이메일 코딩을 하게 됩니다. 하지만 이 이메일폼 퍼블리싱의 경우 몇가지(꽤나..) 제약 사항들이 있습니다. ㅠㅠ 해당 사항들을 지키지 않으면 저처럼 수십번 테스트 메일을 보내다가 멘붕에 빠지게 될수 있어요. 그래서, 메일폼 퍼블리싱 할때 꼭! 알아야 할 유의 사항 3가지로 정리해 봤습니다. 1. 테이블로 코딩 아웃룩에선 div 사용이 안됩니다. 테이블을 중첩해서 사용해줘야 해요. 아래처럼 초기화 후 작업 합니다. 2. 여백은 패딩으로 여백을 주기 위해 마진과 패딩을 사용하지만, 메일폼에서는 패딩만 하용합니다.. (네이버 메일은 마진이 사용되긴 하는데, 아웃룩안 안돼요.. 😭) *단축속성(padding: 10px 10px 8px 5px;) 보다는 풀어서 써주는게 확실해요. 3.스타일링은 인라인으로 t.. 2020. 12. 10.
[무료파일]sns아이콘 png 파일, 주요 앱아이콘 원본 AI SNS 아이콘 이미지. 투명 배경 PNG 파일 작업하다가, 최신 아이콘 앱 이미지가 없어서 다시 정리완료. 아이콘 앱 컬러 등이 조금씩 바뀐다.. 그라데이션이 있다가, 없다가 등등 가끔씩 필요한 투명 배경의 SNS 아이콘들. 네이버 밴드 앱 아이콘 / 유투브 앱 아이콘 / 인스타그램 앱 아이콘 페이스북 앱 아이콘 / 카카오톡 앱 아이콘 / 카카오 스토리 앱 아이콘 / 트위터 앱 아이콘 다운로드 PNG 이미지 파일 일러스트 원본 파일 2020. 12. 7.
디자인 디테일 게임, Cantunsee. cantunsee.space/ Can't Unsee A game where you need to pick the design that is most correct. Test your attention to details! cantunsee.space A game where you need to pick the design that is most correct. Test your attention to details.. 오.. 심심할때 하면 재밌을 수도 있고 짜증날 수도 있겠다. 그래도 사실 디자인 할때 이런 사소한 부분들이 굉장히 고민될때가 있는데 이게 정답인지는 확실히 알길이 없지만 여하튼 방향을 잡아주는데는 도움이 되는 것 같다. 근데.. 하다가 이쯤 되니까 이제 ㅋㅋㅋ 진짜 잘 ㅁ르겟.. 마치 틀린.. 2020. 12. 6.
지마켓 폰트, 상업적 용도로 사용 가능한 무료 폰트! 무료폰트중에서 상업적으로 사용이 가능하면서도 가독성도 뛰어난 폰트! 너무 예쁘게 나온 이 폰트가 무료라니! 썸네일이나, 이벤트 타이틀 등에 사용해도 충분히 눈에 띌 만한 굵기를 가진다. 필요에 따라 아주 굵게, 혹은 아주 얇은 폰트로 사용이 가능하다 폰트 다운로드 사이트 G마켓 - Gmarket Sans 첫 닿자, 홑자, 받침자로 조합 가능한 모든 한글 표현이 가능하도록 제작되었습니다. 깨짐 현상이 없고 인쇄, 웹, 모바일에서 모두 잘 보이도록 글자를 만들어 어느 환경에서나 편하게 사용할 수 company.gmarket.co.kr 같은 폰트는 아니지만 아래 SSG 이마트 쓱 시리지의 디자인들에서 비슷한 느낌을 찾을 수 있다. 심플한 배경에 제품과 폰트만 살리는 디자인에 사용되면 좋은 폰트인듯. G9 사이.. 2020. 8. 11.
구글 폰트_Berkshire Swash_handwriting Berkshire Swash 아이스크림처럼 달콤하고 여성스러운 느낌의 폰트 License These fonts are licensed under the Open Font License. You can use them freely in your products & projects - print or digital, commercial or otherwise. However, you can't sell the fonts on their own. This isn't legal advice, please consider consulting a lawyer and see the full license for all details. 구글 폰트에 가면 무료로 다운 및 웹 폰트로도 사용 할 수 있는 폰트 잘 어울리는 .. 2020. 8. 4.
폰트 TTF, OTF 뭘 설치하지? (폰트별 특징) 보통 컴퓨터 사양에 맞게 다운로드 받는데, 종종 TTF만 있는 경우도 많다. 뭘 설치해야 하지? - 둘중 하나만 설치함 - TTF 타입이 용량이 적은경우 많음 - OTF 타입이 디자인적으로 서체 표현이 유리, 인쇄/출판에 많이 쓰임 - 레티나/고해상도 스크린이라면 OTF - 일반 용도라면 TTF - OTF에는 한자 표현이 어려울 수 있음 두 폰트의 특징 TTF(True Type Font) 1980년대 마이크로소프트와 애플이 어도비에 대항하기 위해 만든 글꼴 저장형식 일반적인 글꼴 저장 형식으로 모든 응용 소프트웨어에서 사용가능 OTF보다 속도가 빠른편 그래픽 작업 보다는 일반적 문서/사무작업에 사용 2차원(2개의 점) 베지어 곡선 사용 OTF(Open Type Font) 1996년 마이크로소프트와 어도비.. 2020. 8. 3.
구글 폰트- 구글 웹폰트 사용방법, (저작권) 디자인 무료폰트 디자인 할 때 사용 가능한 무료 폰트 찾기 구글 폰트 : 웹폰트 적용도 가능하고, 디자인 하기위해 다운로드도 가능한 무료 폰트 디자인에 큰 비중을 차지하 폰트입니다. 하지만 저작권과 관련하여 이슈가 생길 부분이 많기에 사용하기 전에 잘 알아봐야 합니다. 저작권과 관련해서 자유로운 Noto Sans 주로 사용하지만,, 종종 다른 폰트를 사용해야할때, 애용하는 폰트 사이트입니다. 저작권 관련 해서는 아래와 같이 이야기 하고 있어요. 번역기 돌려보면... 대충 아래와 같은 말인데 중요한건 모든 글꼴은 무료이며 공개 소스 라는 것! 멋진 타이포그래피를 통해 웹을 더욱 아름답고 빠르며 개방적으로 만듭니다.웹 사이트와 제품에 개성과 성능을 제공하는 가장 좋은 방법은 훌륭한 디자인과 기술을 이용하는 것입니다. 우리의.. 2020. 7. 25.
[JS 활용]티스토리 카테고리 별로 갤러리형/리스트형 목록 다르게 출력 html에 (리스트형 목록) 와 내 (갤러리형 목록)을 추가. 이때 두 목록의 클래스 값은 다르게 설정. (searchList vs thumbList) ..리스트 치환자 등 생략.. ..썸네일 치환자 등등 생략.. ..생략.. ▶ 위에 아래의 스크립트 추가. ▶ 특정 카테고리 글 본문 출력됐을때 특정 div 스타일 다르게 주기 출처 : https://heeyat.tistory.com/9 2020. 7. 24.
구글 머터리얼 가이드 컴포넌트 https://material-components.github.io/material-components-web-catalog/#/ Material Components Web | Catalog material-components.github.io MATERIAL COMPONENTS FOR THE WEB MA 다양한 리소스와 함께, 구글 머터리얼 디자인을 기반으로 하는 html 코드 소스를 제공하고 리액트 소스도 함께 볼 수 있는 사이트. 컴포넌트 종류는 Home Button Card Checkbox ChipsData Table Dialog Drawer Elevation FABIcon ButtonImage ListLayout GridLinear Progress IndicatorListMenuRadio But.. 2020. 7. 15.
css background CSS 배경 웹 페이지뿐만 아니라 HTML 요소는 모두 각자의 배경을 가지고 있다. CSS의 background 속성은 이러한 각 요소의 배경에 다양한 효과를 줄 수 있게 해준다. CSS background 속성 속성설명 background 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음. background-color HTML 요소의 배경색을 설정함. background-image HTML 요소의 배경 이미지를 설정함. background-repeat 설정된 배경 이미지의 반복 유무를 설정함. background-position 반복되지 않는 배경 이미지의 상대 위치를 설정함. background-attachment 배경 이미지를 스크롤과는 무관하게 해당 위치에 고정시킴. ba.. 2020. 6. 18.
SVG <라인> SVG 라인- 요소는 라인을 만드는 데 사용됩니다 : x1 속성은 x 축에서 선의 시작을 정의합니다 y1 속성은 y 축에서 선의 시작을 정의합니다 x2 속성은 x 축에서 선의 끝을 정의합니다 y2 속성은 y 축에서 선의 끝을 정의합니다 2020. 5. 7.
CSS 이미지 스프라이트 이미지 스프라이트 이미지 스프라이트는 단일 이미지에 넣은 이미지 모음입니다. 이미지가 많은 웹 페이지는 여러 서버 요청을로드하고 생성하는 데 시간이 오래 걸릴 수 있습니다. 이미지 스프라이트를 사용하면 서버 요청 수가 줄어들고 대역폭이 절약됩니다. 이미지 스프라이트-간단한 예 세 개의 별도 이미지를 사용하는 대신이 단일 이미지 ( "img_navsprites.gif")를 사용합니다. #home { width: 46px; height: 44px; background: url(img_navsprites.gif) 0 0; } -src 속성은 비워 둘 수 없으므로 작고 투명한 이미지 만 정의합니다. 표시된 이미지는 CSS에서 지정한 배경 이미지가됩니다. width: 46px; height: 44px; -사용하려.. 2020. 4. 8.
728x90
반응형

티스토리툴바