본문 바로가기

분류 전체보기137

[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
반응형

티스토리툴바