본문 바로가기
[js] 디데이 시간 날짜 카운트 계산하기 (ft. 자동 날짜 구하기) javascript를 이용하여 현재 날짜와 특정 날짜, 디데이를 구현합니다. 날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체를 생성합니다. 날짜 객체를 이용하면 달력과 특정 기념일 디데이 계산기를 만들 수 있습니다. 자바스크립트 날짜 메소드 getFullYear() : 연도 정보를 가져옴 getMonth() : 월 정보를 가져옴(현재 월 -1) getDate() : 일 정보를 가져옴 getDay() : 요일 정보를 가져옴(일:0~토:6) getDay/getHours/getMinutes/getSeconds() : 시/분/초 정보를 가져옴 getTime : 1970년 1월 1일부터 경과된 시간을밀리초로 표기함 디데이 계산기 만드는 방법 날짜 정보 객체를 이용하여 현재 날짜 정보와 특정 날짜 정보를 가..
[일러스트] 블렌드툴 이용하여 긴그림자 글자 만들기(ft. 글자 그림자) 긴 그림자 글자를 일러스트를 활용하여 만드는 법입니다. 배너를 만들 때 텍스트를 이용한 디자인을 많이 하게 됩니다. 일러스트 글자 그림자 만들기 일러스트에 배너 사이즈의 사각형 툴을 만들고, 색상을 넣어줍니다. 원하는 텍스트를 넣어 글자를 디자인하세요. 제가 적용한 글꼴은 HY헤드라인M, 사이즈 70pt입니다. 마지막에 사용하기 위하여 텍스트를 복사하여 붙여 넣기 한 후, 텍스트 alt 드래그를 하여 대각선 아래에 위치시킵니다. 왼쪽 메뉴바 도구에서 blend tool을 선택합니다 상단 메뉴바에서는 object-blend-blend option을 선택합니다 Spacing: Specified Steps 클릭-200 수치 입력(설정한 간격에 200번 반복 설정)-ok 클릭 아래 텍스트 부분 클릭-대각선 아래..
[vscode] 비주얼스튜디오코드 실시간 미리보기(ft. live server 플러그인 ) 실시간 미리보기 확장 플러그인 설치 방법을 알아보겠습니다. 저는 웹에디터를 braket, atom, visual studio code, noto pad++, dream weaver 를 사용해 보았는데, 최근에는 가독성과 UI 편리성의 이유로 visual studio code 또는 braket을 주로 사용하고 있습니다. Visual studio code는 마이크로소프트사에서 개발되었고, 요즘 Atom과 함께 개인 뇌피셜로 가장 인기있는 에디터입니다. emmet기능이 자동 내장되어있고, 자동으로 닫는 tag가 setting에서 설정이 가능하여 바로 프로그램 설치 후에 사용하기 쉽습니다. 다만, braket에는 있지만, vscode에는 웹에서 실시간 미리 보기 기능을 제공하지 않아 확장 플러그인, Iive s..
[티스토리 새에디터] 다음지도. 네이버지도 삽입 맛집이나 특정 장소를 소개하거나 후기를 쓰는 포스팅을 할 경우, 지도를 삽입합니다. 해외 장소의 경우, 구글맵을 이용하지만, 국내 장소 지도를 삽입할 경우는 다음 지도 또는 네이버 지도를 이용합니다. 티스토리 에디터를 이용하여 다음과 네이버 지도 삽입하는 방법을 알아봅니다. 다음지도 삽입 티스토리는 기본적으로 다음 지도를 제공하기 때문에 외부 소스 삽입 없이 메뉴 버튼에서 더보기-지도를 클릭하면 간편히 삽입이 가능합니다. 원하는 장소를 검색한 다음 크기(기본형/미니형/와이드형/사용자지정형)를 선택하고, 이모티콘을 이용하여 꾸밀 수가 있어요. 첨부를 누르면 아래와 같이 지도가 바로 삽입됩니다. edit 아이콘 클릭시, 위치나 디자인 수정을 할 수 있어요. 네이버 지도 삽입 티스토리에서는 다음 지도만 제공하..
[티스토리 새에디터] 구글맵. 구글지도 삽입 티스토리에 구글 지도를 삽입하는 방법을 알아보겠습니다. 지도를 넣을때 보통 해외 장소는 구글맵을 이용하고, 국내는 다음 또는 네이버 지도를 이용합니다. 구글맵은 실제로 해외 여행을 다닐 때 정말 작은 식당 하나까지 찾아주기 때문에 제가 정말 애정 하는 툴입니다. 그럼 구글맵을 검색하시고 아래와 같이 따라해 주세요. 1. 구글맵에서 원하는 장소 검색 2. 지도 HTML 복사 오른쪽 메뉴에서 공유 클릭-지도 퍼가기 클릭-사이즈 (작게/중간/크게/맞춤 크기) 선택-HTML 복사 클릭 3. 에디터에 HTML 삽입 글쓰기 기본모드-HTML 클릭 에디터 안에 HTML 붙여 넣기 에디터 안에 구글맵 삽입된 것을 확인할 수 있어요. 사이즈 조정을 원하시면, 붙여 넣기 한 HTML 코드 안의 width, height의 ..
[네이버] 셀프 홈페이지 홍보 방법·네이버 홈페이지 마케팅 네이버에서 홈페이지 홍보하기 (version 2) 블로그 홈페이지 홍보하기 version1은 검색엔진 최적화(SEO) 방법으로 내 블로그·홈페이지를 홍보하는 방법을 알아보았습니다. 궁금하시면 아래 포스트를 확인해주세요. https://goddino.tistory.com/21 [WEB]에서 하는 내 블로그, 홈페이지 홍보 방법 우리가 새로운 블로그 · 홈페이지를 만들거나 리뉴얼할 때 관련 고객 또는 불특정 다수에게 홍보하는 방법을 찾게 됩니다. 오늘은 온라인을 통하여 할 수 있는 홈페이지 홍보 방법을 알아보겠�� goddino.tistory.com version1은 블로그·홈페이지의 내부 소스를 이용하는 방법이었습니다. 지금부터는 네이버를 기준으로 마케팅을 이용하여 홍보하는 전략을 확인해 보겠습니다. 네이..
[WEB] 웹에서 하는 내 블로그, 홈페이지 홍보 방법 오늘은 온라인을 통하여 할 수 있는 홈페이지 홍보 방법을 알아보겠습니다. 우리가 새로운 블로그 · 홈페이지를 만들거나 리뉴얼할 때 관련 고객 또는 불특정 다수에게 홍보하는 방법을 찾게 됩니다. 제가 실제로 재직 중인 회사에서 직접 연구하고, 실행한 방법이니 여러분들과 꼭 유용하게 사용하시길 바랍니다. 매우 간단한 코드 수정이니, 컴알못 이라도 괜찮으니 따라 해 주세요. 제가 설명드리는 방법은 모든 홈페이지에서도 적용이 가능하지만, 직접 보여드리기 위하여 티스토리 블로그를 가지고 예시 작업을 하겠습니다. 블로그 · 홈페이지 홍보방법 검색엔진 최적화(SEO) 검색엔진(구글, 네이버, 다음, 야후등)이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하고, 결과 페이지에서..
[js/jQuery] 기본편_카운트업 숫자 올라가는 효과 구현 (ft. 숫자 자동 증가) 숫자 카운트업 효과를 setInterval, clearInterval 메서드를 이용하여 구현하겠습니다. 실무에서 홈페이지 또는 배너에 숫자가 자동으로 올라가는 효과를 종종 사용합니다. setInterval() / clearInterval() 일정한 시간 간격으로 코드를 실행하는 메서드는 setInterval()과 setTimeout()가 있습니다. setInterval과 clearInterval은 서로 짝꿍이라서 보통 같이 사용합니다. setInterval()은 일정한 시간 간격으로 코드를 반복적으로 실행하고, setTimeout()은 일정한 시간 후에 코드를 한 번만 실행하고 종료됩니다. setInterval() : - 코드를 일정 시간 간격으로 반복 실행 - 기본형: setInterval(functi..
연관 키워드 무료 추출 사이트 추천(ft. 웨얼이즈포스트, 블랙키위넷) 무료로 블로그 & 홈페이지 키워드를 분석하여 주는 사이트를 소개하겠습니다. 포스트에 글을 쓰고 혹은 웹페이지에 알맞은 조회수 높은 연관 키워드를 찾고자 할 때 이용합니다. 키워드가 상위 노출되어 조회수가 높게 하는 것이 목적이기 때문에 우리는 키워드 분석 사이트를 활용하여 효과적으로 키워드를 추출할 수 있습니다. 더 나아가 이 연관 키워드를 이용하여, 블로그 또는 홈페이지를 홍보하는데 이용할 수 있습니다. 키워드 분석 사이트 이용 효과: · 키워드 검색 조회수 확인 · 연관, 유사 키워드 도출 · 키워드 콘텐츠 발행량 확인 · 해당 키워드로 인기 많은 블로그 확인 · 기간별/성별/나이별/요일 검색 동향 분석 · 네이버 해당 키워드 섹션 배치 순서로 광고 키워드에 활용 한번 키워드 분석 사이트를 확인해봅시..
[상업용무료폰트] 출판용서체 코펍체 (kopub돋음체, 바탕체) 다운로드 인쇄물에 사용할 무료 폰트, kopub돋음체, kopub바탕체를 소개합니다. kopub 돋음체, 바탕체란? 한국출판회의에서 전자출판용 서체용으로 개발하여 저작권을 가지고 있고, 무료 배포를 하고 있습니다. 한국출판인회의는 출판의 자유를 신장시키고, 출판의 문화적 진흥과 산업적 발전을 위해 민족문화의 창달에 기여함을 목적으로1998년 11월 2일 설립된 대한민국 문화체육관광부 소관의 사단법인입니다. 현재 명칭은 KoPubWorld 돋음체, KoPubWorld 바탕체입니다. 여기서 Kopub는 Korea Publishers(한국 출판인)의 약자입니다. kopub 돋음체 : 고딕체의 글꼴이고, 굵기에 따라 Light, Medium, Bold 3가지로 구분 주로 본문 내용에 사용 kopub 바탕체 : 명조체의 ..
[인디자인] 나만의 달력. 셀프 달력 만들기 요즘 학원을 통해 인디자인을 배우고 있는데, 오늘 배운, 알고 나면 나중에 쓸 일 있을 인디자인으로 만들어보는 달력! 나만의 달력을 만들어 봅니다. 현재 6월이기 때문에 6월 달력을 예제로 만들어 보겠습니다. 1. 문서 설정 ·새문서설정: 페이지수:12 페이지마주 보기체크해제 폭:210mm,높이:210mm 여백:전체10mm ·설정 후 아래와 같이 새 문서를 만듭니다. 2. 페이지 패널에서 마스터 선택하여 꾸미기 ·페이지 패널에서 A-마스터를 선택(더블클릭) 3. 마스터 페이지를 이용하여 월(Month) 꾸미기 이제 마스터에 달력을 작업해 봅니다. ·문자 삽입을 위하여 T 클릭하고 드래그 드롭하여 달을 입력할 곳의 영역을 잡아줍니다. ·메뉴의 문자-특수 문자 삽입-표시자-다음 페이지 번호(X)를 클릭 · ..
[인디자인] 영문판에서 한글판으로 변경하기(ft. cs6와 cc 비교) 인디자인에서 영문판에서 한글판으로 언어 변경하는 방법입니다. 포토샵과 일러스트레이터는 영문판을 주로 사용했기 때문에 디자인도 영문판으로 사용해야 하는게 아닐까 라고 생각하는 경우가 많은것 같습니다. 하지만 국내에서는 영문보다는 국문 편집을 할 상황이 많기 때문에 한글 편집에 필요한 기능(세로 쓰기, 문자 회전, 자간 세트, 합성 글꼴, 루비, 할주 등)을 제공하는한글판을 사용하는 걸 추천합니다. 이 기능들은 영문판에서는 사용할 수 없기 때문입니다. 또한 한글 폰트명이 영문으로 표기되고 영문이 우선 순위로 배치되어 한글을 편집하기에 한글판보다 불편한 점이 많습니다. 한자를 읽는 방법을 표기하는 루비나 중요한 글자를 강조하는 권점, 주석이나 보충설명을 2줄로 쉽게 표기할 수 있는 할주 등의 기능 또한 한글판..
[js/jQuery] 반응형 캐러셀(carousel) 슬라이드 구현하기 반응형 캐러셀 슬라이드를 구현합니다. swiper, slick slide, owl slide와 같은 자바스크립트 라이브러리를 사용하면 매우 편하지만, 자바스크립트와 제이쿼리를 이용하여 슬라이드를 직접 구현 합니다. 슬라이드 작동 조건: 1. 반응형 슬라이드: 창 크기에 맞추어 슬라이드의 이미지 사이즈 자동 조정 2. 자동 플레이 슬라이드: 일정 시간마다 슬라이드 좌에서 우로 이동 3. 슬라이드 변경 시, 아래 페이지 버튼 색깔 변동 4. 페이지 버튼 클릭마다 각 해당 슬라이드로 바로 이동 이제 시작해 볼까요! 아래의 이미지 파일을 만들어 사용하였습니다. 슬라이드의 배열과 동작 순서는 아래와 같습니다. 캐러셀 슬라이드(carousel slide) 예제 html css * {margin: 0;padding:..
색상추출 색상조합 컬러추천 무료 사이트 추천 색상추출/색상조합 사이트를 추천합니다. 디자인 작업을 하다 보면 COLOR의 중요성을 아주 많이 느끼게 됩니다. 예쁜 색, 어울리는 컬러를 고르거나, 컬러 조합이 필요할 경우가 많은데, 색알못인 저는 이럴 때마다컬러 선택에 어려움을 겪습니다. 컬러리스트는 자격증이 왜 나왔는지 이해가 됩니다. 심지어 자격증 취득이 쉽지 않다고 합니다! 저는 컬러 선택을 해야할 순간마다 매번 사이트에서 도움을 받는데요. 1. Adobe Color https://color.adobe.com/ko/create/ https://color.adobe.com/ko/create/ color.adobe.com 대중적으로 매우 유명한 컬러 조합 사이트 어도비 컬러입니다. #로 시작하는 헥스 색상 코드를 직접 입력하고 왼쪽 상단 유사/단색..
고용노동부 국민내일배움카드 신청하기(ft. 경단녀, 국비학원) 국민내일배움 카드 신청과 사용방법에 대하여 이야기해보려고 합니다. 저의 경험과 재취업에 꼭 필요한 유익한 정보를 바탕으로 경력단절여성용 취업지원제도를 이용한 경력단절여성 재취업 가이드 전자책을 발행하였습니다. 현재 아래의 사이트에서 판매중입니다. 필요하실 경우, 아래의 사이트를 이용해주세요! https://smartstore.naver.com/goddino/products/5595218885 경력단절여성를 위한 재취업 가이드 : 갓디노 경단녀를 위한 취업지원제도를 이용한 재취업 노하우를 알려드립니다.(국민내일배움카드) smartstore.naver.com 국민내일배움카드란, 실업자·재직자·특수형태근로종사자·자영업자(일정소득 이하) 등 취업여부나 직종에 관계없이 직업훈련이 필요한 이들에게 지원되는 카드로,..
[css] css 이미지, 컨텐츠 가운데 정렬 2가지 방법 css만으로 요소를 가운데 정렬하는 방법을 소개하겠습니다. 반응형 웹이 아닌 일반 pc 또는 mobile용 웹을 만들 때는 javascript, jQuery를 사용할 없이 css만으로 가운데 정렬을 할 수가 있어 간단합니다. css로 가운데 정렬하는 2가지 방법을 소개하겠습니다. 1. 부모 요소로 감싸주었을 경우 img를 삽입할 경우, 보통 div인 부모 요소로 감싸줄 때가 많습니다. 이 경우, 부모 요소인 div 또는 p 태그에 text-align: center를 해줍니다. css div{text-align: center;} text-align text-align 속성이란 문단의 텍스트 정렬 방법을 지정합니다. 종류: text-align: start / end / left / right / center..
이젠 아카데미 국비지원 컴퓨터 학원 후기(ft. 국민내일배움카드) 국비학원 시리즈 2탄이라고나 할까요. 오늘은 내돈내공 컴퓨터학원, 제가 현재 다니고 있는 이젠 아카데미 컴퓨터학원을 소개해보겠습니다. 두개의 과정을 듣고있는데, 하나는 프론트엔드 프로그램, 또 하나는 디자인과 관련된 수업을 듣고 있습니다. 두 과정 모두 재직자 훈련 과정으로 국민내일배움카드를 이용하여 약 절반정도의 수강료를 납부하였고, 60시간 과정이며, 프로그램은 주중 저녁 3시간, 디자인은 토요일 8시간 수업입니다. 둘 중, 프로그램 수업은 평일 3일, 퇴근 후 저녁 시간에 듣고, 내용이 어려운 편이라 집중이 필요하므로 사실 많이 힘겨운 상황이고, 디자인 수업은 토요일 8시간 풀로 진행되기 때문에 힘들 것 같지만 프로그램보다는 내용이 많이 쉬운 편이고 50분 수업, 10분 쉬는 시간 중간에 1시간은 ..
[js/jQuery] 자바스크립트 이용한 반응형웹 이미지 가운데 정렬 반응형 사이트에서 javascript/jQuery를 이용한 가운데 정렬입니다. 반응형 웹에서 이미지 또는 컨텐츠를 같은 크기의 비율로 수직 수평 가운데 위치하는 것은 보기에는 쉬워보이지만 의외로 html, css 만으로는 구현하기 쉽지 않습니다. 현재 구글링 정보를 통하여 그때그때 적용할 순 있어도, 사용자의 기기에 따라 다르게 반응하는 반응형 웹에서 자바스크립트 사용없이 쓰기에는 무리가 있습니다. 그래서 반응형 웹에서 사용할 수 있는 자바스크립트, 제이쿼리를 이용한 반응형 웹에서 이미지 수직 수평 가운데 정렬을 구현하겠습니다. 반응형 이미지 수직 수평 가운데 정렬 방법 반응형웹 적용을 위한 필수 요소 viewport 삽입 사이에 아래 메타태그를 추가하세요. html (css는 inline스타일로 적용)..
[js/jQuery] 탭메뉴 구현하기 javascript/jQuery를 이용한 탭메뉴를 구현하기 홈페이지에서 메인 페이지 또는 서브 페이지에 수시로 사용되는 탭 메뉴입니다. javascript/jQuery를 이용하여 구현하겠습니다. 구현방법: · 첫번째 탭제목에 컬러가 들어가있고 탭박스가 오픈된 상태 · 다른 탭을 클릭시 이전 탭제목 컬러 없어지고, 해당 탭제목의 컬러가 들어감 · 동시에 이전 탭 박스는 감추고, 해당 탭의 박스가 오픈 · addclass, removeclass, hide, show 메소드 이용 아래의 html, css, javascipt 소스를 그대로 넣으시면 됩니다. html tab1 tab2 tab3 tab1_content tab2_content tab3_content css .container { width: 500p..
경단녀, 3주 만에 토익 900점대 달성후기(ft. 토익 900점 꿀팁) 경단녀 탈출을 위한 십 년 만의 토익 재도전! 대학교 때 취준생 때 보았던 토익을, 10년이 지난 후 재취업을 위하여 도전하였습니다. 1년 동안 백수로 지냈던 저는 어느새 경단녀(경력단절녀)가 되었고, 재취업을 하기 위해서는 토익은 바라보기도 싫었지만, 어쩔 수 없는 선택이었습니다. 10년 전에 공부하던 기억을 더듬었을때, 단기간에 900점 돌파를 위해서는 무조건 해커스 토익! 묻고 따지지도 않고 해커스! 해커스 토익책(기본서, 실전서)으로 벼락치기를 준비합니다. · 스케줄 관리 방법 2주: 해커스 토익 기본서 RC, LC (RC를 위주로) 짬나는 시간 마다, 유튜브로 LC 동영상 1주: 해커스토익 실전 1000제 리딩, 리스닝 하루에 한 세트씩 토익은 영어실력이 아닌 전략입니다. 무조건 높은 점수가 중..
블루호스트(워드프레스호스트) 탈퇴 환불받기 몇달전부터 워드프레스를 알아보고, 호스팅과 도메인 신청을 위한 사이트인, 블루호스트에 가입하고, 1년치 구독을 신청하였습니다! Total 가격은 $196.20(한화로 약 23만원) 이렇게 부픈 꿈과 나만의 블로그 또는 홈페이지를 꿈꾸고 시작하였으나 블루호스트를 통한 워드프레스로 블로그 제작시 UI, UX가 불편하고 어렵게 되어 있고, 이것저것 바꾸고 업데이트 할때마다 시간이 오래 걸려서, 결국 워드프레스 포기! 워드프레스는 제 경험상 이것저것 하나씩 들여다보고 익혀 사용하면 쓰임새가 무궁무진 하겠지만, 짧은 시간동안 워드프레스를 통해 적용된 테마를 커스텀하는 첫 사용부터 어렵게 느껴졌습니다. 그리하여 신청한지 하루 만에 블루호스트 환불받기를 실행하였습니다. bluehost는 외국사이트이고 탈퇴 및 환불을..
고용노동부 국비지원 컴퓨터학원 3곳 후기 학원별 비교(ft. 국민내일배움카드) 국비지원 컴퓨터학원 3곳 후기 및 학원별 평점 입니다. 저는 2019년부터 현재까지 6군데 이상 고용노동부 국비지원 훈련기관에 대하여 사전조사를 하고, 이 중 3군데를 다녔습니다. 국비지원 훈련기관은 내일배움카드를 이용하여 국비 지원을 받아 원하는 훈련과정을 신청하여들을 수 있는 학원입니다. 다니면서 느낀 개인의 주관적 후기이고 현재 국비지원 학원을 고려하시는 분들에게 작은 도움이 되었으면 좋겠습니다! 제가 다녔던 학원 리스트입니다. 학원명 지점 기간 과정 국비종류 그린컴퓨터학원 강남 20년 7월~ 20년 8월 php 프로그래밍 재직자 이젠컴퓨터학원 강남 20년 5월~ 20년 7월 광고편집디자인(인디자인/포토샵/일러스트) 재직자 이젠컴퓨터학원 강남 20년 4월~ 20년 6월 프론트엔드 react.js 재..
웹디자인 기능사 자격증 합격후기(ft. 합격꿀팁! 실기시험 문제 소스 구현) 안녕하세요. 2019년 9월 초에 이틀에 걸쳐 웹디자인 기능사 자격시험을 치르고, 약 20일 후에 합격소식을 전해 들었습니다. 코알못으로 시작하여 6개월동안 국비지원 학원을 다니며 공부하면서 고생아닌 고생을 하였는데 기능사 자격증 합격으로 그동안의 고생이 다 보상되는 느낌을 받으면서 스스로에게 너무 뿌듯하였습니다! 그래서 오늘은 저의 웹디자인기능사 자격증 합격후기와 실기시험 4가지 문제 구현 소스를 오픈하겠습니다. 저는 고용노동부 훈련기관에서 과정평가형 UX/UI 디자인 웹퍼블리셔 과정을 수료하였고, 그 과정의 마지막 코스인 기능사 시험까지 지원하였습니다. 시험은 첫날 필기 시험과 간단한 면접을 보고, 이튿날은 시험의 메인 가장 중요한 실기 시험을 보았습니다. 먼저 필기와 면접은 기출문제 및 교재를 보고..
반응형

티스토리툴바