본문 바로가기

분류 전체보기45

[html] UIkit 아코디언 메뉴 accordion menu / 3단 아코디언 / 멀티 아코디언 1. Multiple open items 2. No Collapsing UIkit을 이용한 아코디언 메뉴 입니다. 위 css와 js를 추가하시고 1번과 2번의 HTML을 작성하시면 완성입니다. 2020. 8. 22.
[jQuery] 얼럿 / 컨펌 박스 띄우기 alert / confirm box 띄우기 / 경고창 안내창 띄우기 컴펌 박스는 확인과 취소 버튼이 있는 확인 창으로 간단하게 사용이 가능하다. 주로 취소 버튼 또는 어떠한 정보를 작성 완료 후 나오는 팝업창이라고 생각하면 쉽습니다. 얼럿은 간단하게 확인을 하고 넘어가는 경우에 주로 사용된다. 컨펌과 얼럿 2개 다 내용이 변경 가능하며, 버튼클릭 시 노출되는거 뿐만 아니라 다른 태그로 이용이 가능하다. 2020. 8. 17.
[CSS] 마진 과 패딩 차이 / Padding 과 Margin 차이 border를 기준으로 안쪽은 Padding 밖은 Margin으로 생각하면 된다. 검은색 선을 기준으로 회색 구역은 padding 영역이며 밖에 흰색 구역은 margin 영역으로 만약 border를 사용할때, 안쪽 구역을 줄이고 싶을때는 padding값을 줄여 border구역을 줄일 수 있으며, 반대로 넓히고 싶을때는 margin값을 줄이고 padding값을 높이면된다. 2020. 8. 16.
[html] input 회원가입 폼 / 회원가입 양식 / 회원가입 폼 소스 / 전화번호 정규식 - bootstrap bootstrap 4 기반 회원가입 From 아이디 비밀번호 비밀번호 확인 이름 전화번호 휴대번호 주민번호 메일주소 생년월일 2020. 8. 10.
가성비 스마트 워치/스마트 밴드 추천 1. (샤오미) 헤이로 헬로우 솔라 스마트워치 (정식 한글판) 디스플레이 : 1.28인치 TFT 스크린 해상도 240 X 240 배터리 용량 : 340mAh 배터리 지속기간 : 15일(24시간 심박수 측정ON) 방진방수등급 : IP68 운동모드 : 12가지 - 달리기, 걷기, 라이딩, 등산, 스피닝, 요가, 실내러닝, 카누, 체조, 축구, 농구, 트레이닝 출시일 : 2020년 6월 헤이로 헬로우 솔라 스마트워치 COUPANG www.coupang.com 2. 샤오미 스마트 미밴드 4 디스플레이 0.95inch 아몰레드 터치 스크린 디스플레이 해상도 120 X 240 배터리 용량 : 135mAh 배터리 지속기간 : 20일 방수기능 : 최대 수심 50m 방수 기능 운동모드 : 6가지 - 트레드밀, 운동, 러.. 2020. 8. 8.
[html] input 타이핑 후 div생성 삭제 및 클릭 시 수정 / bootstrap Tokenfield 이용법 오늘의 포스팅은 메일에서 자주 사용되는 bootstrap Tokenfield이다. bootstrap Tokenfield는 아래 이미지와 같이 더블 클릭 시 수정이 가능하며, 추가하기 영역에 클릭 후 타이핑 엔터를 하면 새로운 div가 생성되며 x를 누르면 삭제되는 기능이다. 부트 스트랩에서 지원하는 기능이므로, 부트스트랩 css링크와 js링크이용해야 사용할수있다. 자세한 내용은 아래 링크로 확인 할 수 있다. Tokenfield for Bootstrap tokens string, array [] Tokens (or tags). Can be a string with comma-separated values ("one,two,three"), an array of strings (["one","two","th.. 2020. 8. 3.
[html] 웹 에디터 편집기 / 추천 Quilljs웹 에디터 / WEB Editor 오늘 포스팅은 Quilljs의 웹에디터 포스팅 입니다. 아래 보는 이미지는 에디터 화면입니다. Quilljs웹 에디터의 기능들 입니다. 테마로 "버블"또는 "스노우"입니다. 유효하지 않거나 잘못된 값은 기본 최소 테마를 로드합니다. 테마의 특정 스타일 시트는 여전히 수동으로 포함해야합니다. Inline 배경색 - background 굵게 - bold 색깔 - color 폰트 - font 인라인 코드- code 이탤릭체- italic 링크- link 크기- size 취소 선- strike 위첨자 / 아래 첨자- script 밑줄- underline Block 인용구- blockquote 헤더 - header 들여 쓰기- indent 리스트- list 텍스트 정렬- align 텍스트 방향- direction.. 2020. 8. 2.
포토샵 jpg, png 빠른 저장/자동 저장 스크립트 주로 포토샵으로 jpg 또는 png를 저장하려면 Ctrl + Shift + S 를 눌러 다른 이름 저장을 통해 수많은 확자명들을 해처가며 png, jpg를 찾아 저장을 한다. 오늘의 포스팅은 빠르게 png, 또는 jpg를 저장하는 법이다. 포토샵에는 스크립트라는 좋은 기능이 존재를 한다. 이 영역은 디자이너로써는 이해하기 힘든 영역이니 패스를 하도록한다. 위 두 파일 받고 포토샵이 설치되있는 파일에 붙혀 넣으면 끝이다. C:\Program Files\Adobe\Adobe Photoshop 2020\Presets\Scripts 파일을 넣고 포토샵을 껐다가 켜보면 jpg와 png가 보인다. (옆에 F1, F2는 단축키 설정 시 보이는 키 입니다.) 단축키 설정은 편집>바로 가기 키 클릭 Ctrl + Shif.. 2020. 7. 27.
[Html] Font Awesome(폰트 어썸) 오류 해결법 Font Awesome을 사용 하다보면 사진과 같이 네모로 표기가 되는 경우가 있다. 이번 포스팅은 Font Awesome의 오류법을 해결하는 법이다. 1. 로컬파일 확인 간단한 방법이지만 놓치고 가는 경우가 많다. 로컬에서 Font Awesome의 font나 css, js가 하나라도 빠지면 오류가 나는 경우가 종종 발생한다. 놓치고 간 파일들을 로컬에 추가하면 해결이 된다. 2. CDN 로컬이 아닌 CDN으로 외부링크를 걸었을 경우 css 스타일 링크만 걸려있는 상태이므로, js가 빠질수도 있다. 이경우 js를 로컬로 연결할 경우 해결할수 있다. 3. font-weight 폰트굵기가 300, 500, 또는 700일 경우 오류가 생기는 경우가 종종 있다. .fa,.fab,.fad,.fal,.far,.fa.. 2020. 7. 25.
[Html] Font Awesome(폰트 어썸) 사용법 / 로컬 / 다운받아서 적용법 가장많이 사용 되고 있는 웹 아이콘 폰트는 Font Awesome입니다. Font Awesome이란 이러한 웹 아이콘 폰트를 모아놓은 라이브러리입니다. 이번 포스팅에서는 Font Awesome를 적용하는 법을 알려드리려고 합니다. 1. CDN 선언 CDN이란 간단히 말해서 내부 로컬에 저장을 하지 않은 상태에서 외부 링크를 달아 적용시키는 방식이다. 위와 같이 태그 사이에 추가를 하면 끝이다. link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevo.. 2020. 7. 25.
[Html] 폰트 굵기 조정 CSS / font-weight / 폰트 굵기 태그 normal : 보통 굵기입니다. 숫자 400과 같습니다. bold : 굵은 굵기입니다. 숫자 700과 같습니다. bolder : 상속된 값보다 굵은 굵기입니다. lighter : 상속된 값보다 얇은 굵기입니다. number : 100, 200, 300, 400, 500, 600, 700, 800, 900 initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 태그 이런식으로 b태그로 감싸면 bold효과를 낼수도 있습니다. 중간에 껴서 사용도 가능합니다. 태그 strong태그도 b태그와 마찬가지 입니다. 예제 font-weight normal font-weight bold font-weight 100 font-weight 200 font-weight 300 font.. 2020. 7. 21.
일러스트 블렌드 효과로 간단한 포스터 만들기 youtu.be/9eGyA4aWORA 디자인 입문자 및 비전공자를 위해 제작된 영상입니다. 디자인은 정답이 없으며, 이 영상 또한 정답이 아닐수도 있습니다. 시청해주셔서 감사합니다. 궁금하신 부분은 댓글로 달아주세요. 2020. 7. 19.
포토샵CC 2020 자동 누끼 따는 법 youtu.be/_QkKMnnrs80 2020. 7. 15.
킬링 플로어 2(Killing Floor 2) – 치트 사용법 / 치트모음 게임을 실행 한 우에 EnableCheats를 입력 합니다. 코드 효과 god 무적 모드 demigod 대미지는 입지만, 체력이 1 이하로 감소하지 않음 Spawnhumanpawn 0 1 AI가 없는 가짜 플레이어 생성하기 Killbots Spawnhumanpawn으로 생성한 모든 가짜 플레이어 처치하기 SpawnZed AI가 없는 Zed 생성하기 Spawnai AI가 있는 Zed 생성하기 Killzeds 맵의 모든 Zed 처치하기 OpenTraderMenu 상점 화면 열기 GiveWeapon 무기 획득하기 UpgradeWeapon 착용한 무기를 한 단계 업그레이드하기 Slomo 게임 속도 조절하기. Zed 타이 스킬은 정상 발동 Uberammo 대량의 탄약 획득하기 Healme 플레이어의 생명력을 입력.. 2020. 7. 13.
컴퓨터/노트북 캡처 하는 방법 3가지 첫 번째 - 윈도우 캡처 도구 시작 및 검색에서 캡처 도구를 클릭 후 캡처를 할 수 있다. 두 번째 - PRT SC(Print Screen) 프린트 스크린 키를 누른 후 포토샵 및 그림판에서 컨트롤+V를 누르면 복사됐던 화면이 노출된다. 세 번째 - 알캡처 (이스트소프트) 이 프로그램은 개인뿐만 아니라 기업도 무료로 사용할 수 있다. 키보드의 Print Screen SysRq을 누를 때 바로 실행된다는 점이 장점. 웹페이지 전체를 캡처하는 기능은 없지만 단순하게 화면 전체나 특정 구간을 캡처하는 데엔 편하게 쓸 수 있다. 프린트 스크린 키를 누르면 위와 같은 창이 뜬다. 다양한 방식으로 캡처가 가능하고 프린트 스크린을 눌렀을때 바로 사용가능한 장점이 있다. 하지만, 단점으로는 프로그램을 설치해야 된다는 .. 2020. 7. 13.
포토샵 누끼 개 꿀팁 방출 https://www.youtube.com/watch?v=JT8nhUmnjxI 디자인 입문자 및 비전공자를 위해 제작된 영상입니다. 디자인은 정답이 없으며, 이 영상 또한 정답이 아닐수도 있습니다. 시청해주셔서 감사합니다. 궁금하신 부분은 댓글로 달아주세요. 2020. 7. 10.
[KILLING FLOOR 2] 킬링 플로어 2 무료 다운로드 / 무료설치 7월 10일 ~ 7월 17일 KILLING FLOOR 2에서 플레이어들은 Zed가 가득한 유럽 대륙으로 내려가야 합니다. 괴기스럽고 잔인한 클론 Zed는 Horzine Corporation의 흉포한 악당에 의해 만들어졌습니다. 6인 플레이어 협동전 및 12인 플레이어 대 Zed 사살 작전. KILLING FLOOR 2는 에픽게임즈에서 7월 10일 ~ 7월 17일 무료로 배포 할 예정이다. 킬링 플로어 2 더블 피처 COUPANG www.coupang.com “파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음" 2020. 7. 8.
화장실 날파리 나방파리 제거 방법 파리목 나방파리과의 곤충. 누구나 화장실에서 한번쯤은 봤을 법한 바로 그 날벌레. 날파리, 화장실 벌레, 화장실 파리, 화장실 벽에 붙은 조그만한 벌레 화장실의 요정 등으로 불리며, 진정 이 벌레의 이름을 제대로 아는 사람은 적다. 공격력 : 1, 방어력 :1 날개는 하트 모양이며 털이 많이 나 있다. 색상은 진한 검정색, 회색, 황색, 드물게 적색 등으로 다양하다. 유충의 색깔은 검정색이며 크기는 아주 작고 가는 것부터 사람 손가락 한 마디 정도 되게 큰 것까지 다양하다. 유충들은 주로 화장실 구석에서 물때를 먹고 살기에 물때 청소를 해주면 좋다. 또 고인 물이 있을 경우 번식력이 좋아지기에 고인 물이 없게 해주어야 한다. 다른 방법으로는 하수구를 쉽게 막고 쉽게 물이내려가 막아주는 이 제품을 추천한다.. 2020. 7. 8.
포토샵으로 간단하게 투시/목업 합성하기 !! https://www.youtube.com/watch?v=QugRmdPjkMU 디자인 입문자 및 비전공자를 위해 제작된 영상입니다. 디자인은 정답이 없으며, 이 영상 또한 정답이 아닐수도 있습니다. 시청해주셔서 감사합니다. 궁금하신 부분은 댓글로 달아주세요. 이미지 : https://www.pexels.com/ko-kr/ bgm : 영상에 기록해놨습니다. 2020. 7. 7.
더 이스케이피스트2(The Escapists 2) 무료 다운로드 !! 감옥 탈옥 게임( 7월10일~7월17일 ) 목숨을 걸고 세상에서 가장 경비가 삼엄한 교도소에서 탈출하세요. 여태껏 보지 못했던 가장 큰 교도소를 탐험하세요! 여러분은 교도소의 규칙대로 생활하고, 점호 시간을 지키고, 노역하고, 엄격한 일과를 따라야 합니다. 탈출을 계획하면서 말이죠! 더 이스케이피스트2는 에픽게임즈에서 7월10일 부터 7월17일 까지 무료 다운로드를 받을 수 있습니다. 더 이스케이피스트 + 더 이스케이피스트2 (The Escapists + The Escapists 2) (PS4) COUPANG www.coupang.com “파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음" 2020. 7. 4.

티스토리툴바