본문 바로가기

분류 전체보기137

[JS 활용]한글, 타이핑 효과 주기 타이핑 효과는 여러 모로 쓰임이 많습니다~ 이전에 찾은 오픈 소스를 찾아 활용했는데, 기존 오픈소스에는 뒤에 깜빡임 커서가 없어서 추가 해주었어요! Html반짝이는 하루, 그게 오늘이야. intervalType:80 , 숫자가 높을수록 타이핑 속도가 빨라짐 Css @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap'); body{ background-image:url(https://images.unsplash.com/photo-1567653418876-5bb0e566e1c2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&.. 2022. 10. 31.
한글 타이핑 효과 라이브러리 (오픈소스) 한글 타이핑 효과를 만드신 분이 계시다..(감사하게도😂) 외국 타이핑 효과는 한글에 적용하면 어색해 져서 아쉬움이 가득했는데, 이 라이브러리를 만드신 분은 한글의 특징을 살려 타이핑 효과를 주었다. 한글 타이핑 효과 라이브러리 한글 두벌식 자판에서 한 글자씩 타이핑되는 과정을 보여줄 수 있는 라이브러리입니다. https://sduck4.github.io/type-hangul/#home type-hangul: ⌨️ 한글 타이핑 효과 라이브러리 한글 두벌식 자판에서 한 글자씩 타이핑되는 과정을 보여줄 수 있는 라이브러리입니다. sduck4.github.io 라이센스 type-hangul by SDuck4. The source code is licensed MIT. ​*MIT 라이센스 - MIT 라이센스란 수.. 2022. 10. 26.
sass란? 개념 및 사용 방법 Sass란? Css 전처리기(Css Preprocessor) 그렇다면,,, Css 전처리기는 뭐지? 말그대로 전에 처리해 버린다는 뭐 그런 뜻인 듯 왜 써야 할까? 👉 Css의 단점을 해소 Css 단점 - 불필요한 반복 - 가독성이 나쁨- 기타 등등... Css 장점 - 웹브라우저가 읽을 수 있다. - 사용하기 쉽다. Sass 처리 프로세스 Sass 장단점 Sass 장점 - 변수의 사용 → css 속성 통일 - 조건문과 반복문 사용 → 동적 css 관리 등등,, Sass vs Css /* Sass */ .circle $size: 100px width: $size height: $size border-radius: $size * 0.5 /* Css */ .circle { width: 100px; heigh.. 2022. 10. 26.
[CSS 활용]헤더가 고정 되는 테이블, html css 버튼 클릭 -> 지정한 내용 복사 (해시태그내용 복사) 사용되는 요소 이미지 맵 태그안에 usemap 속성 / 제이쿼리 소스 html 헤더 헤더02 헤더03 111111111 222222222 333333333 444444444 111111111 222222222 333333333 444444444 제이쿼리 소스.tableWrapper { border-top: 3px solid #168; width: 400px; height: 300px; overflow: auto; position: relative; } #userListTable { height:600px; } #userListTable th { width: 400px; position: sticky; top: 0px; } .bluetop { bord.. 2022. 4. 8.
일러스트와 포토샵 가장자리, 바운딩 박스, 테두리상자, 크기조절 박스 안보일때 포토샵 - 가장자리 테두리 상자(바운딩박스)가 보이지 않을 경우. 포토샵 작업 하다가,, 갑자기 뭐 잘못 눌러서 변형 하게 해주는 상자, 테두리가 안보일때가 있다. 단축키를 암기 ctrl+h 하면 좋지만 그마저도 생각이 안난다면 우선 보기 메뉴를 들어가서 표시자 를 선택해 주며 보인다. 일러스트 - 가장자리, 테두리 바운딩 상자가 보이지 않을 경우 이렇게 잘 보이던 테두리 상자가 갑자기 안보여서, 수정이 불편한 상황이 되었을때. 일러스트도 포토샵과 마찬가지로 단축키 ctrl+h 를 눌러주면 보인다. 바운딩 박스의 경우 ctrl+ shift + b 포토샵과 일러스트의 단축키가 살짝 다르다. 2022. 3. 30.
[JS 활용] 탭 영역 만들기 - 자바스크립트, css , html5 활용 다양하게 활용이 가능한 탭 부분 디자인 및 코딩 소스 제이쿼리로도 되지만, 스크립트로도 구현이 되는 부분이라 서칭 해서 정리 해 봄. 홈페이지 구성할때, 50% 이상 사용되는 디자인 및 기능이 아닐까 싶다. 네이버 메인 HTML 문의 사항 고객 문의 첫번째 탭 영역 문의 사항 등이 표기 되는 부분 두번째 탭 영역 고객 문의 등이 표기 되는 부분 CSS.wrap { padding: 10px; } .tab { border-top: 1px solid #E2E2E1; border-right: 1px solid #E2E2E1; width: 400px; } .tab .tabitems { width: 100%; position: relative; } .tab .tabitems .item { display: inlin.. 2022. 3. 29.
[일러스트, 포토샵]일러스트 왜곡, 둘러싸기 형태 아웃라인 따기 일러스트- 폰트 아치형 만들기 폰트를 쓴 뒤에 둘러싸기 효과를 주면 폰트를 아치형으로 바꿀 수 있다. 부채꼴 스타일로 주면 아치형의 글자가 완성! 텍스트에 따라 모양이 다소 부자연 스럽게 나오는 경우가 있다. 자간 간격을 주어도 해결이 안될 경우, 폰트 아웃라인을 따 줘야 한다. 오브젝트 - 둘러싸기왜곡 - 확장 메뉴 보통은 Ctrl+o 를 눌러 주면 텍스트의 아웃라인이 만들어 지지만, 둘러싸기 왜곡을 적용한 경우엔 위 메뉴로 들어가서 확장을 해줘야 한다! 계속 Ctrl+o 눌러 주다가.. 안대서 찾아봄... 후 .. 2022. 3. 25.
CSS 활용 - 라디오 버튼 커스텀 스타일 라디오 버튼 스타일 변경 하기 브라우저 별로 다르게 보이는 라디오 버튼 디자인 - 리셋하고 다시 스타일 주기! HTML 커스텀스타일1 커스텀스타일2 CSS .checks { position: relative; height: 20px; padding: 30px; line-height: 20px; } .checks label { font-size: 16px; color: #666; margin-right: 10px; vertical-align: middle; } .checks input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, .. 2022. 3. 23.
일러스트 활용 - 사진 이미지를 벡터(일러스트로) 바꾸기 + 색상 보정 사진 일러로 바꾸기 사진 이미지(jpb, png)등을 벡터(ai)로 바꿔야 하는 때가 종종 있다. 출력을 해야 하거나, 고해상도의 이미지를 원할때가 있기 때문에. 이미지 확대시 벡터 확대시 벡터 색상 보정 ** 일러에서도, 디테일하게 색상 편집과 보정이 가능하므로, 포토샵까지 가서 작업할 필요가 없다! 이미지 벡터로 변경 하기 1. 이미지 불러오기 2. 이미지 포함 시키기 * 포함을 눌러주면 X 자 모양이 사라짐 ( 이걸 안누르면 나중에 이미지가 안불러와 짐- 현재는 경로만 갖고온 상태 ) 3. 이미지 추적 - 충실도가 높은 사진 이미지 벡터화 진행 중 **색이 많은 이미지나, 배경이미지 같은 것으로 하면 너무 느려 지므로, 컴퓨터가 계산하는데 너무 오래 걸리므로 가급적 작은 이미지등에만 사용 하는게 좋.. 2022. 3. 20.
[CSS 활용] 화살표, css로 만들기 화살표 모양 이미지가 아닌 CSS 로 그리기 보통은 PNG 이미지로 사용하거나, 아이콘폰트를 사용하는 경우가 많지만, CSS 가상선택자를 이용해서 만들게 되면 사이즈, 컬러 등을 자유롭게 바꿀 수 있다. 위와 같이 단순한 선형태의 방향키 디자인이라면 CSS를 통해 만들어서 제어하는것이 편한것 같아서 종종 사용 하고 있다. HTML CSS .wrap { position: absolute; vertical-align: middle; top: 100px; left: 10px; } .wrap .arrow { position: relative; display: inline-block; width: 30px; height: 30px; overflow: hidden; vertical-align: middle; } ... 2022. 3. 17.
[JS 활용] 관련 사이트, family site 패밀리 사이트, 제이쿼리 활용 [토글] 패밀리 사이트나, 관련 사이트를 셀렉트 태그를 사용하는 것이 아니라 div를 사용해서 스타일링을 통해 좀더 다양한 방식으로 꾸밀 수 있다. (패밀리 사이트 선택하는 드롭 박스를 위로 올라가게 한다든지.. ) 제이 쿼리 토글과 CSS를 이용해서 꾸며 본다. 화살표 모양 이미지가 아닌 CSS 로 주기 HTML FAMILY SITE Naver Google Daum CSS .family { position: absolute; vertical-align: middle; top: 100px; width: 207px; background-color: #0d1621; left: 10px; } .family>a { display: block; position: relative; z-index: 10; height: 29.. 2022. 3. 15.
대쉬보드 소스/디자인 참고 사이트 종종 대쉬 보드 관련 디자인을 하게 될 때 참고하기 좋은 사이트들 구매를 하거나 해야 하는 사이트들도 있는데, 디자인만 참고하면 될듯ㅎ Dashlite - 어드민 템플릿 https://dashlite.net/demo1/crm/support.html CRM - Support | DashLite Admin Template Hello Ishtiyak, We are really sorry to hear that, you have face an unexpected experience. Our team urgently look this matter and get back to you asap. Thank you very much. dashlite.net 다양한 분야의 대쉬보드 형태를 볼수 있고, 컬러 등 다양한 레.. 2022. 2. 24.
주소 짧게, 단축 하게 해주는 사이트 bitly 주소 축소 웹 사이트 주소가 너무 길면, 클릭하기에 좀 망설여 질때가 있다. 또 주소를 입력해야할때, 주소가 길면 지저분해 보이므로 주소를 축소시켜 주는 사이트 큐알코드 만들기 1. httphttps://bitly.com/사이트에 접속한다. 2. 홈페이지 URL을 입력한다. 3. Shorten 을 누른다. 4. Copy 를 누른다. https://bitly.com/ Bitly | Custom URL Shortener, Link Management & Branded Links Shorten, create and share trusted, powerful links for your business. Bitly's url and link shortener helps you with industry-leadin.. 2022. 2. 23.
큐알 코드 제작- 무료 제작 사이트 큐알 코드 무료 제작 웹 사이트를 바로 갈 수 있게 해주는 큐알 코드! 요즘은 휴대폰 사진기능에서 큐알 코드만 인식이 되면 바로 해당 웹사이트로 연결 되기 때문에 QR 코드를 활용하는 경우가 종종 있다. 큐알코드 만들기 1. http://www.nfcqr.kr/qrc/ 사이트에 접속한다. 2. 홈페이지 URL을 입력한다. - 모바일 사이트가 있다면 모바일 주소를 입력(휴대폰에서 바로 연결) 3. 생성하기를 누른다. 4. 다운로드를 누른다. http://www.nfcqr.kr/qrc/ QR코드 발급 만들기 제작 무료 생성 NFCQR 무료 QR코드 발급 만들기 제작 생성 www.nfcqr.kr 2022. 2. 22.
2022, 봄 관련 광고 이벤트 카피 모음 2022, 봄 관련 광고 이벤트 카피 모음 출처 : https://www.i-boss.co.kr/ab-6141-54704 벌써 봄 이벤트 준비할 때! 마케터를 위한 광고카피 모음 겨울 광고카피 준비한 게 엊그제 같은데.. 벌써 봄 이벤트 준비할 때가 돌아왔습니다🌸최근 몇 년간 봄과 관련된 광고카피 문구를 모아봤는데 확실히 #새로움 #산뜻함 #설렘 #꽃 등의 키워... www.i-boss.co.kr 공공기관 · 기업PR · 봄, 남원으로 채우다 - 남원시청 · 맑은하늘, 맑은바다, 강릉에서 봄 - 강릉시청 · 봄, 경북에서 당신의 낭만을 만나세요! - 한국관광공사 · PINK DAY 축구장에도 봄이 왔나 봄 - 부산아이파크 · 올 봄엔 좋아하는것을 따라 떠나보세요 - 한국관광공사, 문화체육관광부 · 자꾸 .. 2022. 2. 21.
이벤트 참여하기 다양한 아이디어 1(소문내기/초성) 이벤트 참여를 통한 마케팅 업체나, 공기업, 회사 등 다양한 곳에서 이벤트를 통해 마케팅을 하고 있다. 시각적으로 눈에 띄기도 하고 사은품이 걸려 있으므로, 이벤트를 통해 마케팅을 하는 경우가 대부분이다. 참여 방법에 따른 이벤트 구분. 참여 방법 - 소문내기 이벤트 - 초성 이벤트 , 초성퀴즈 이벤트 - 특이한 게임이나 재미 요소가 가미된 이벤트 소문내기 이벤트 목적 : 이벤트 자체 홍보 방식 : 이벤트 공유(개인 SNS 나 Blog ) - > 댓글남기기 -> 추첨 초성 이벤트 목적 : 특정 제품/신제품/장소 등에 대한 홍보가 가능 방법 : 초성 2022. 2. 21.
CAN I USE ? 크로스 브라우징, CSS 사용 범위 확인 Can I use 사이트 보는 방법 https://caniuse.com/ 해당 사이트에 접속 해서 CSS 속성을 입력해 준다. text-decoration-style: wavy 텍스트 언더라인을 물결로도 줄 수 있다는 사실이 놀라워서 (잘 몰랐던 스타일) 어느 브라우저 까지 되는지 찾아 봤다. 빨간 글씨 IE 는 안됨. 해보니 진짜 안됌.. 엣지도 12-18 버전 에 해당하는 브라우저는 안된다.. 최신 엣지 버전에서 적용해 보니 잘 보여진다. 사용자 분포 확인 상단 두번째 탭을 보니, 사용자들이 주로 어떤 버전을 사용하는지 분포 비율을 한눈에 볼 수 있다. 모바일의 경우, 대부분 이 스타일이 무리없이 보이는 듯 하고, 크롬 브라우저를 사용하는 대부분 무리없이 보여진다.. 2022. 1. 21.
익스플로러, 엣지 브버전 확인 (IE, EDGE ) 익스플로러 & 엣지 브라우저별 버전 확인 크로스 브라우징을 위한 CSS 코딩을 하다 보면 크로스 브라우징을 위해 브라우저의 버전을 확인을 해야 하는 경우가 더러 있다. Can I USE 사이트를 통해 확인하려고 하니 대충 빨간색은 안되는거같고 녹색은 되는것 같은데..숫자는 뭣일지? IE 와 Edge 는 다른거? 간단하게 말하면 마이크로소프트에서 만든 것으로 IE 는 인터넷익스플로러 (구버전) Edge는 엣지(신버전) 2021 5월19일 마이크로소프트는 인터넷 익스플로러(IE)11 데스크탑 어플리케이션이 2022년 6월 15일 은퇴를 공지!! http://www.techdaily.co.kr/news/articleView.html?idxno=10303 마이크로소프트, 인터넷 익스플로러 퇴출 공식화 …"22년.. 2022. 1. 21.
[CSS 활용] 투명한 스크롤바 - 내용위에 오버레이 되는 스크롤바 스크롤바 평소엔 안보이다가, 길이가 길어진 경우 스크롤이 생기는데, 그게 너비값을 갖지 않도록 스크롤 생기는 박스 위에 투명하게 오버레이 되어 보이게 하기. 그래야, 너비값을 갖지 않고, 전체 레이아웃을 틀어지지 않게 한다. ** 단 이런 경우, 스크롤이 들어가는 위치에 뭔가 클릭을 해야하거나 하는 요소가 없어야 함. HTML 01 02 03 04 05 06 07 08 09 10 CSSdiv,ul,li{ padding: 0; margin: 0; box-sizing:border-box; } .scrollbar{ width:200px; height: 200px; overflow:overlay; border:1px solid #ddd; } .scrollbar::-webkit-scrollbar { width: .. 2022. 1. 17.
HTML&CSS 기초 - 요약 (의미,특징,사용법) HTML이란? 웹페이지는 모두 HTML을 사용하여 만들어짐 HTML의 의미와 특징 Hyper Text Markup Language의 줄임말 Hyper Text : 링크 의미 Markup Language : 프로그래밍 언어의 종류/ 정보를 구조적&계층적으로 표현 HTML 파일 확장자 : .html HTML의 역사 제안&개발 : 1990년대 영국의 물리학자 팀 버너스 초기 개발 목적 : 연구원들의 정보와 문서 공유 태그란? HTML은 태그들의 집합 태그로 코드 작성 -> 브라우저 인식 -> 내용 표현 태그 사용 방법 표현 방법 : ~ Hello, HTML 요소란? 태그를 포함한 전체 속성이란? 태그에 대한 추가 정보 제공, 태그 제어 설정값 지정. 속성을 사용하는 방법 시작태그 - 한칸 뛰고(공백) - 속성.. 2022. 1. 16.
[무료/상업이용] 타이틀로 좋은 가나초콜릿체 모든 사용자가 이용 가능한 가나초콜릿체 본문 용으로 쓰기엔 두껍고 타이틀 용으로 쓰기에 적합한 두께의 폰트. 폰트=가나초콜릿 브랜드 느낌이 너무 비슷하긴 한데, 레트로한 느낌도 좀 있고, 폰트 자체의 초콜릿의 부드러운 느낌도 들어있어서, 다양하게 활용이 가능한 폰트. 폰트 주요 특징 라이센스 다운로드 https://www.lotteconf.co.kr/prcenter/gana 가나초콜릿체 < 홍보센터 < 롯데제과 가나초콜릿의 분위기와 풍미를 살린 서체컨셉 www.lotteconf.co.kr 2021. 12. 2.
스크롤매직- 애플 홈페이지 구현하기 위한 플러그인 스크롤 매직 ScrollMagic은 사용자의 스크롤 위치에 반응하여 효과가 나타나게 함. 스크롤 하면 이미지가 나타나거나, 사라지거나 하는등의 효과를 구현할 수 있게 해주는데 대표적으로 애플 홈페이지 같은 느낌 만들기에 필요한 플러그인 사용방법 홈페이지에서 플러그인 다운로드 examples 폴더내에 index.html 열기 안에 css/script 경로 확인 홈페이지에서 다운로드 받아서 샘플을 보고 필요한 요소를 찾아 쓰면 된다. http://scrollmagic.io/ ScrollMagic The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user's current scro.. 2021. 11. 29.
웹디자인용 아이콘 폰트(서체,무료 아이콘 사이트) 웹디자인 할때 자주 쓰는 아이콘 폰트 XEICON 웹페이지나 product 디자인 등을 할 때 자주 사용하는 폰트 아이콘 이다. 폰트 아이콘이란? 일반적으로 쓰는 폰트 처럼 서체를 다운 받아 설치하고, (xeicon.ttf) 포토샵이나 일러스트에서 아이콘을 폰트 처럼 사용하는 것을 말한다. 서체 설치를 하고나면 이렇게 일러스트나, 포토샵 프로그램 글자 선택 창에 해당 폰트가 생긴다. 사용하기 http://xpressengine.github.io/XEIcon/library-2.3.3.html 위 페이지에 들어가서 사용할 아이콘을 복사한 뒤에 일러스트에서 텍스트 입력 툴을 누른뒤에 붙여넣기 해준다. 이렇게 아이콘을 폰트로 써서 그냥 사용하는 경우도 있고, 때에 따라, 굵거나 얇은 아이콘이 필요한 경우가 있는.. 2021. 11. 25.
맥)mac OS 주요 단축키 - 삭제 관련 Command + delete = 선택파일 삭제 선택 파일을 바로 휴지통으로 이동한다. 대화상자 없이 바로 삭제가 된다. Command +shift+ delete = 휴지통 비우기 휴지통 비우기 단축키 2021. 11. 22.
맥)mac OS 주요 단축키 - 종료관련 Command + Q = 앱,어플,finder창 종료 파인더 창을 닫아 버리거나, 어플을 완전히 종료(하단 아이콘 사라짐)를 위한 단축키 Command + W = 창 닫기 사파리, 크롬 등의 브라우저 창(or 탭) 닫는 단축키 Command + option + ESC = 앱 강제종료 앱을 강제 종료 하는 단축키. 앱이나 파인더가 사용하닥 멈추거나 할경우 사용하는 단축키 2021. 11. 22.
맥) 키보드 기호 및 단축 키 맥을 사용할때, 기본적으로 알아야할 단축키를 정리하려고 하는데 그에 앞서 키보드 기호를 알아두면 좋을 듯 하다! 애플 홈페이지- 맥 키보드 단축키 페이지 키보드 단축키를 사용하려면 하나 이상의 보조 키를 누른 상태에서 단축키의 마지막 키를 누릅니다. 예를 들어 command-C(복사)를 사용하려면 command 키를 누른 상태에서 C 키를 누른 다음 두 키를 놓습니다. command(또는 cmd) ⌘ shift ⇧ option(또는 alt) ⌥ control(또는 ctrl) ⌃ caps lock ⇪ fn 라고...상세히 설명해 주고 있지만, 윈도우랑 오며가며 사용하고 있어서 그런지 매번 헷갈린다... 실제로 자주 사용하는 단축키들이랑 자주 까먹는 단축키 몇개 골라서 업로드 할 예정. 2021. 11. 22.
[JS 활용]숫자가 카운팅/카운트 되게 하는 제이쿼리 소스 숫자가 자동으로 올라가거나 내려가게 하는 소스지정된 숫자에서 시작해서 지정된 숫자까지 카운팅이 필요한 경우 사용하면 좋을 소스 홈페이지 디자인할때 동적인 효과를 두드러지게 보여질 수 있게하는 요소중의 하나 연혁이나 팀원의 수 혹은 그외에 다양하게 사용 가능한 소스 HTML 마크업 Since 1700 CSS .title{ text-align:center; display:block; font-size: 30px; color: #222; margin-bottom:10px } .number { text-align:center; display:block; width:150px; height:150px; line-height:150px; margin: 0 auto; font-size: 40px; color: #3f.. 2021. 11. 17.
깜박이는 효과, on-air 라이브 중 상태 (가상요소,애니메이션효과) 깜박이는 효과 css로 나타내기 녹화중인 것 같은 상태를 보여줄 수 있게 깜박이는 점을 넣는 CSS 온에어, 라이브 방송 중.. 등과 같이 현재 상태를 나타내기에 좋은 css 효과이다. 사용되는 css 속성 가상 요소 - :after 애니메이션 - animation 키프레임 - keyframes animation 속성 상세 css @Keyframe 속성 상세 Html Live Css .on_now_tag{ font-size: 14px; color: #fd183a; padding: 2px 10px; margin-left: -7px; font-weight: 500; } .on_now_tag:after { content: ""; display: inline-block; width: 10px; height: 1.. 2021. 11. 17.
[무료/상업이용가능]쿠키런폰트 상업적 이용이 가능한 무료 폰트로, 쿠키런 게임 회사에서 만든 쿠키런 폰트~~ 그래서,, 게임 산업군에선 임베딩 등을 금지한다고 한다.. 아기자기한 디자인이나, 어린이날 등, 귀여운 폰트가 필요한 디자인을 해야할때 적합한 폰트. 주요 폰트 특징 폰트두께 귀여운 폰트 활용 예제 라이센스 쿠키런 폰트는 모든 사용자에게 무료로 제공되며 자유롭게 사용할 수 있습니다. 단, 게임산업군에 한하여 소프트웨어 임베딩 및 번들, 재배포를 금지합니다. * 자세한 사항은 LICENSE 가이드를 참고 ( https://www.cookierunfont.com/#section7) 다운로드 페이지 https://www.cookierunfont.com/#section7 쿠키런 폰트 쿠키런 글꼴을 이제 웹에서도 즐기세요. www.co.. 2021. 10. 17.
[HTML 태그 활용]버튼 클릭시 이미지 다운로드 되는 버튼 만들기 버튼 클릭시 이미지 다운로드 html 신청서나, 양식, 혹은 이미지를 다운 받아야 할경우, 간편하게 쓸수 있는 html 소스 Html 이미지 원본 다운로드 다운로드 할 이미지가 파일이 위치한 경로를 적어야 다운로드가 됩니다! ex) 2021. 10. 13.
728x90
반응형

티스토리툴바