키자드에 등록된 총 341개의 포스트를 확인하실 수 있습니다.
회원가입 페이지의 유효성 검사에 대하여 알아보겠습니다. 유효성 검사 회원가입 양식을 작성할 때, 필수요소를 빼먹거나, 비밀번호나 전화번호 등이 정보를 잘못 입력했을 경우, 유효성 검사를 통하여 사용자가..
요즘에는 크몽, 숨고와 같은 프리랜서 마켓이 아주 핫한데요. 그 이유는 바쁜 현대인들에게 최대한 시간을 아껴줄 수 있도록 경제적인 비용으로 내가 필요한 분야를 전문가를 통하여 효과적으로 아웃소싱을 할 수..
웹의 타이틀에 자주 사용되는 ::before, ::after 사용법을 알아보겠습니다. ::before, ::after이 필요한 경우: 홈페이지 헤더나 푸터에 구분선을 삽입할 때 홈페이지 헤더: 로그인ㅣ회원가입ㅣ마이페이지ㅣ사이트..
오늘 소개할 무료 상업용 폰트는 빙그레체 입니다. 국민 모두가 즐길 수 있는 ‘바나나맛우유',‘투게더', '요플레',‘메로나'의, 그 빙그레 입니다. 1976년 창립되어 국내 식품 산업을 선도해 왔습니다. 이전에..
자바스크립트를 이용하여 이미지들을 사용하여 클릭할 때마다 이미지를 변경을 구현하겠습니다. 화면 출력내용 · 총 8개의 이미지· 총 8개의 이미지 사용 · 첫 화면에는 이미지 1번 나옴 · 버튼 2개 사용(다..
티몬 몬소리체는 몬스터 세계의 언어 '몬소리'를 컨셉으로 만들어진 언어입니다. 오늘은 소셜커머스 오픈마켓의 '티몬'에서 제작하여 배포중인 상업용 무료폰트 "몬소리체", "티움체"를 소개하겠습니다. 티몬 몬..
자바스크립트를 이용하여 버튼을 클릭할 때마다 화면 배경 색상 변경을 구현하겠습니다. 화면 출력내용 · 배경색상(backgroundcolor) 총 6개 배열 · 버튼 1개 사용 · 버튼 클릭시마다 색상값 중 1개가 랜덤으..
상업용 무료폰트, 스웨거 폰트에 대하여 알아보겠습니다. 스웨거 폰트(스웨거체, SWAGGER FONT) 남성 라이프 스타일 브랜드 스웨거에서 디자인 컨셉 및 시안 개발에 직접 참여하고, 국내 최대 폰트 개발사인 산돌..
배너 배경용으로 많이 사용하는 방사능 패턴을 만들겠습니다. 웹사이트에 사용할 배너를 만들때, 배너의 배경을 어떻게 할지 고민을 많이 합니다. 이럴 경우 사용하는 방사능 패턴입니다. 포토샵의 Define Patter..
국비 학원 시리즈 3탄!!입니다. 고용노동부 지정 우수 국비지원훈련기관 그린컴퓨터아카데미, 그린컴퓨터아트학원을 소개하겠습니다. 저는 이곳에서 작년에 UX/UI 디자인 웹 퍼블리셔 6개월 과정을 다녔고, 올해..
오늘의 무료폰트는 상업용 무료폰트 야놀자체(=야체) 입니다. 동글동글하게 친근하게 생긴 글자입니다. 특히 자음 "ㅇ"과 "ㄹ" 이 유난히 귀엽습니다. 야놀자체는 전국 숙박업체의 미니홈피 스타일의 홈페이지에..
홈페이지를 운영을 하다 보면, 꼭 필요한 이벤트나 공지 배너를 홈페이지 첫 창에 띄우는 일이 많습니다. 배너 이미지를 자바스크립트를 이용하여 팝업창에 띄우고, 창닫기를 구현해 보겠습니다. 먼저 팝업창에..
쇼핑몰 상세 페이지나 유투브에 폰트를 이용할때 상업적으로 사용이 가능한지 사전에 확인해야 합니다. 아무 폰트를 다운받아서 사용하면 추후에 저작권 법에 위반되어 거금을 벌금을 내야하거나, 양이 많을 경우..
자바스크립트, 제이쿼리의 setInterval, clearInterval 메서드를 이용하여 웹페이지에서 많이 사용되는 숫자 카운트업을 구현하겠습니다. 이전 카운트업 구현하기 포스트는 맛보기용 기초였고, 오늘은 실전편이라..
javascript를 이용하여 현재 날짜와 특정 날짜, 디데이를 구현합니다. 날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체를 생성합니다. 날짜 객체를 이용하면 달력과 특정 기념일 디데이 계산기를 만들 수..
오늘은 소개할 상업용 무료 폰트는 '배달의 민족 폰트'를 입니다. 제가 블로그 포스팅 첫 배너에 사용하는 폰트는 배달의 민족 도현체입니다. 배달의 민족 회사인 우아한 형제들에서 제약 없이 한글을 쓸 수 있도..
문자열 객체를 메서드를 이용하여 사용자로부터 입력받은 이메일 주소의 유효성을 검사하는 방법을 알아보겠습니다. 구현내용: · prompt를 이용하여, 사용자의 이름, 핸드폰 번호, 이메일 주소를 입력받음 · 이..
오늘은 셀프로 돈 안 들이고, 간단하게 인디자인을 이용하여 나만의 명함을 만들어 보겠습니다. 사전에 로고가 담긴 일러스트 파일이 필요하고, 기본적인 레이아웃 구상이 필요합니다. 1. 문서 설정하기 ctrl n..
이벤트 페이지 또는 상세 페이지를 작업할 때 많이 사용하는 리본을 만들겠습니다. 주로 페이지의 타이틀이나 중요한 파트 제목을 작업할 때 유용하게 사용합니다. 반듯한 일자 리본 & 아치형의 둥근 리본 모두..
티스토리에 구글 지도를 삽입하는 방법을 알아보겠습니다. 지도를 넣을때 보통 해외 장소는 구글맵을 이용하고, 국내는 다음 또는 네이버 지도를 이용합니다. 구글맵은 실제로 해외 여행을 다닐 때 정말 작은 식..
맛집이나 특정 장소를 소개하거나 후기를 쓰는 포스팅을 할 경우, 지도를 삽입합니다. 해외 장소의 경우, 구글맵을 이용하지만, 국내 장소 지도를 삽입할 경우는 다음 지도 또는 네이버 지도를 이용합니다. 티스..
실시간 미리보기 확장 플러그인 설치 방법을 알아보겠습니다. 저는 웹에디터를 braket, atom, visual studio code, noto pad++, dream weaver 를 사용해 보았는데, 최근에는 가독성과 UI 편리성의 이유로 visual..
긴 그림자 글자를 일러스트를 활용하여 만드는 법입니다. 배너를 만들 때 텍스트를 이용한 디자인을 많이 하게 됩니다. 일러스트 글자 그림자 만들기 일러스트에 배너 사이즈의 사각형 툴을 만들고, 색상을 넣어..
무료로 블로그 & 홈페이지 키워드를 분석하여 주는 사이트를 소개하겠습니다. 포스트에 글을 쓰고 혹은 웹페이지에 알맞은 조회수 높은 연관 키워드를 찾고자 할 때 이용합니다. 키워드가 상위 노출되어 조회수가..
숫자 카운트업 효과를 setInterval, clearInterval 메서드를 이용하여 구현하겠습니다. 실무에서 홈페이지 또는 배너에 숫자가 자동으로 올라가는 효과를 종종 사용합니다. setInterval() / clearInterval() 일정..
오늘은 온라인을 통하여 할 수 있는 홈페이지 홍보 방법을 알아보겠습니다. 우리가 새로운 블로그 · 홈페이지를 만들거나 리뉴얼할 때 관련 고객 또는 불특정 다수에게 홍보하는 방법을 찾게 됩니다. 제가 실제..
네이버에서 홈페이지 홍보하기 (version 2) 블로그 홈페이지 홍보하기 version1은 검색엔진 최적화(SEO) 방법으로 내 블로그·홈페이지를 홍보하는 방법을 알아보았습니다. 궁금하시면 아래 포스트를 확인해주세..
색상추출/색상조합 사이트를 추천합니다. 디자인 작업을 하다 보면 COLOR의 중요성을 아주 많이 느끼게 됩니다. 예쁜 색, 어울리는 컬러를 고르거나, 컬러 조합이 필요할 경우가 많은데, 색알못인 저는 이럴 때..
반응형 캐러셀 슬라이드를 구현합니다. swiper, slick slide, owl slide와 같은 자바스크립트 라이브러리를 사용하면 매우 편하지만, 자바스크립트와 제이쿼리를 이용하여 슬라이드를 직접 구현 합니다. 슬라이드..
인디자인에서 영문판에서 한글판으로 언어 변경하는 방법입니다. 포토샵과 일러스트레이터는 영문판을 주로 사용했기 때문에 디자인도 영문판으로 사용해야 하는게 아닐까 라고 생각하는 경우가 많은것 같습니다...
요즘 학원을 통해 인디자인을 배우고 있는데, 오늘 배운, 알고 나면 나중에 쓸 일 있을 인디자인으로 만들어보는 달력! 나만의 달력을 만들어 봅니다. 현재 6월이기 때문에 6월 달력을 예제로 만들어 보겠습니다...
인쇄물에 사용할 무료 폰트, kopub돋음체, kopub바탕체를 소개합니다. kopub 돋음체, 바탕체란? 한국출판회의에서 전자출판용 서체용으로 개발하여 저작권을 가지고 있고, 무료 배포를 하고 있습니다. 한국출판인..
반응형 사이트에서 javascript/jQuery를 이용한 가운데 정렬입니다. 반응형 웹에서 이미지 또는 컨텐츠를 같은 크기의 비율로 수직 수평 가운데 위치하는 것은 보기에는 쉬워보이지만 의외로 html, css 만으로는..
국비학원 시리즈 2탄이라고나 할까요. 오늘은 내돈내공 컴퓨터학원, 제가 현재 다니고 있는 이젠 아카데미 컴퓨터학원을 소개해보겠습니다. 두개의 과정을 듣고있는데, 하나는 프론트엔드 프로그램, 또 하나는 디..
css만으로 요소를 가운데 정렬하는 방법을 소개하겠습니다. 반응형 웹이 아닌 일반 pc 또는 mobile용 웹을 만들 때는 javascript, jQuery를 사용할 없이 css만으로 가운데 정렬을 할 수가 있어 간단합니다. css로..
국민내일배움 카드 신청과 사용방법에 대하여 이야기해보려고 합니다. 저의 경험과 재취업에 꼭 필요한 유익한 정보를 바탕으로 경력단절여성용 취업지원제도를 이용한 경력단절여성 재취업 가이드 전자책을 발..
국비지원 컴퓨터학원 3곳 후기 및 학원별 평점 입니다. 저는 2019년부터 현재까지 6군데 이상 고용노동부 국비지원 훈련기관에 대하여 사전조사를 하고, 이 중 3군데를 다녔습니다. 국비지원 훈련기관은 내일배움..
몇달전부터 워드프레스를 알아보고, 호스팅과 도메인 신청을 위한 사이트인, 블루호스트에 가입하고, 1년치 구독을 신청하였습니다! Total 가격은 $196.20(한화로 약 23만원) 이렇게 부픈 꿈과 나만의 블로그 또..
경단녀 탈출을 위한 십 년 만의 토익 재도전! 대학교 때 취준생 때 보았던 토익을, 10년이 지난 후 재취업을 위하여 도전하였습니다. 1년 동안 백수로 지냈던 저는 어느새 경단녀(경력단절녀)가 되었고, 재취업을..
javascript/jQuery를 이용한 탭메뉴를 구현하기 홈페이지에서 메인 페이지 또는 서브 페이지에 수시로 사용되는 탭 메뉴입니다. javascript/jQuery를 이용하여 구현하겠습니다. 구현방법: · 첫번째 탭제목에 컬..