본문 바로가기
그린컴퓨터아카데미 국비 컴퓨터 학원 후기(ft. 국민내일배움카드) 국비 학원 시리즈 3탄!!입니다. 고용노동부 지정 우수 국비지원훈련기관 그린컴퓨터아카데미, 그린컴퓨터아트학원을 소개하겠습니다. 저는 이곳에서 작년에 UX/UI 디자인 웹 퍼블리셔 6개월 과정을 다녔고, 올해 현재 php 프로그래밍 수업을 듣고 있습니다. 작년 그린아카데미에서 웹퍼블리셔 과정을 수료하면서 웹디자인 기능사 자격증을 취득하였고, 이로 인하여 취업도 수월하게 하게되어 사실 저에게 좋은 이력을 남긴 학원입니다. 현재 다니고 있는 프로그래밍 과정은 총 60시간 재직자 훈련 과정으로 국민내일배움카드를 이용하여 약 절반 정도의 수강료를 납부하고,월요일부터 목요일까지 저녁 3시간, 한달 동안 진행되는 수업이라 매우 타이트한 스케줄입니다. 저는 국비지원 컴퓨터 학원 총 3 군데, 5개의 과정를 거친 고용노..
[포토샵] 배너 배경. 방사능 패턴 만들기 배너 배경용으로 많이 사용하는 방사능 패턴을 만들겠습니다. 웹사이트에 사용할 배너를 만들때, 배너의 배경을 어떻게 할지 고민을 많이 합니다. 이럴 경우 사용하는 방사능 패턴입니다. 포토샵의 Define Pattern과 Filter 메뉴의 Polar Coordinates 기능을 이용하겠습니다. 포토샵에서 패턴을 만들어 등록할때 Define pattern 메뉴를 강조 효과를 주기 위해 Polar Coordinates 기능을 사용합니다. 새문서 설정 먼저 ctrl n 또는 file-new로 배너용 새문서 창을 오픈해주세요. · 문서 크기: 700X700px (적당한 크기로 만들어주세요.) · Resolution: 72 · Background Contents: Tranparent(투명) 패턴용 새문서 설정 패턴..
[상업용무료폰트] 스웨거 폰트 다운로드 상업용 무료폰트, 스웨거 폰트에 대하여 알아보겠습니다. 스웨거 폰트(스웨거체, SWAGGER FONT) 남성 라이프 스타일 브랜드 스웨거에서 디자인 컨셉 및 시안 개발에 직접 참여하고, 국내 최대 폰트 개발사인 산돌커뮤니케이션의 노하우를 통해 2015년 1월에 완성한 폰트입니다. 이렇게 공들여 만들어진 폰트를 2016년 10월 9일 한글날을 맞아 한글을 사랑하는 모든 분들이 자유롭게 사용하실 수 있도록 무료로 배포합니다. 스웨거체를 기획하게 된 계기 영어가 아닌 한글을 활용하여 가장 스웨거스럽고 젊고 트렌디한 디자인 로고를 만들기 위해 고민하던 중 국내에서 영문 로고로 판매 중인 상품을 한글 로고로 대체하는 것을 목표로 삼아 디자인을 하기 시작했다고 합니다. 스웨거 영문 로고의 곡선 느낌이 스웨거 폰트에..
[js/jQuery] 응용편_카운트업 숫자 올라가는 효과 구현. 숫자 자동 증가 자바스크립트, 제이쿼리의 setInterval, clearInterval 메서드를 이용하여 웹페이지에서 많이 사용되는 숫자 카운트업을 구현하겠습니다. 이전 카운트업 구현하기 포스트는 맛보기용 기초였고, 오늘은 실전편이라고 생각하시면 됩니다. 이전 포스트가 궁금하신 분은 아래 링크로 이동해주세요. https://goddino.tistory.com/20 [js/jQuery] 카운트업 숫자 올라가는 효과 구현하기 홈페이지 또는 배너에 숫자가 자동으로 올라가는 효과를 종종 사용합니다. 이 효과를 javascript, jQuery를 이용하여 간단하게 구현하도록 해보겠습니다. 아래 소스를 확인해 주세요. 1. html 99 2. css .n goddino.tistory.com setInterval() / clear..
[상업용무료폰트] 고도체 다운로드 쇼핑몰 상세 페이지나 유투브에 폰트를 이용할때 상업적으로 사용이 가능한지 사전에 확인해야 합니다. 아무 폰트를 다운받아서 사용하면 추후에 저작권 법에 위반되어 거금을 벌금을 내야하거나, 양이 많을 경우 폰트를 갑자기 바꾸어야 하는 바람에 속앓이를 할 수 있기 때문에 폰트 선택이 중요합니다. 이런 걱정 없이 상업적으로도 이용 가능한 또 하나의 무료폰트, 고도체를 소개하려 합니다. 고도체는 엔에이치고도(주)에서 상품을 돋보이게 하고 쇼핑몰의 정보와 개성을 효율적으로 표현하기 위해 개발하였습니다. 이 폰트는 개인은 물론 기업에서도 상업적으로 이용이 가능하기 때문에 여러분의 직장 홈페이지, 쇼핑몰, 유투브, 블로그 등에 자유롭게 사용할 수 있습니다. 엔에이치고도(주)에서 제공하는 폰트는 고도체/godo roun..
[js] 홈페이지 배너 팝업창 띄우기, 창닫기 홈페이지를 운영을 하다 보면, 꼭 필요한 이벤트나 공지 배너를 홈페이지 첫 창에 띄우는 일이 많습니다. 배너 이미지를 자바스크립트를 이용하여 팝업창에 띄우고, 창닫기를 구현해 보겠습니다. 먼저 팝업창에 띄울 배너를 만들어야겠지요? 저는 아래의 이벤트 배너를 사용하겠습니다. (사이즈: 500X500 px) window.open() 메서드를 이용하여 팝업 창을 나타내고, 이를 위해서는 2개의 웹페이지가 필요합니다. 하나는 배너가 들어간 팝업 창으로 나타낼 페이지이고, 또 하나는 팝업 창을 띄우도록 해주는 오픈 페이지입니다. 팝업 창 띄우기를 시작하기 전에 여러분의 브라우저(크롬 또는 익스플로러)에서 팝업 창이 차단되어 있으면 팝업 창을 나타낼 수 없습니다. 브라우저의 환경설정에 들어가서 팝업 창이 차단되어 ..
[포토샵] 일자 리본, 둥근 리본 만들기 이벤트 페이지 또는 상세 페이지를 작업할 때 많이 사용하는 리본을 만들겠습니다. 주로 페이지의 타이틀이나 중요한 파트 제목을 작업할 때 유용하게 사용합니다. 반듯한 일자 리본 & 아치형의 둥근 리본 모두 만들어 보겠습니다. 1. 파일 오픈, 문서 설정 먼저 ctrl + n 또는 file new로 새 파일을 오픈해주세요. 사이즈는 넉넉하게 width 700px, height 700px, resolution 72입니다. (사이즈는 자유롭게 해 주세요.) 2. 사각형 그리기 도구 모음에서 rectangle tool 클릭 후 영역 드래그하여 사각형의 도형을 만들어 주세요. Fill은 원하는 컬러, stroke(테두리)는 0으로 지정해 주세요. 3. 둥근 아치형 모양 만들기(일자 리본에는 적용 안 함) 도구 모음..
[인디자인] 셀프 명함 만들기 오늘은 셀프로 돈 안 들이고, 간단하게 인디자인을 이용하여 나만의 명함을 만들어 보겠습니다. 사전에 로고가 담긴 일러스트 파일이 필요하고, 기본적인 레이아웃 구상이 필요합니다. 1. 문서 설정하기 ctrl n 또는 파일-새로만들기-문서를 선택합니다. · 문서설정 사이즈: 폭 90mm, 높이 50mm 페이지 수: (앞/뒤) 2 페이지 페이지 마주 보기: 체크해제 여백: 모두 3mm 배경 컬러가 있는 명함이라면 재단 선보다 2~3mm 여유 있게 만들어야 됩니다. 명함이 만들어지는 과정을 살펴보면, 인쇄 후 재단 시에 1mm의 오차가 발생할 수 있기 때문입니다. 그러면 아래와 같이 명함을 작성할 문서가 2페이지 나옵니다. 2. 명함 전면, 로고 붙이기 도구상자에서 그림상자를 클릭 후 로고를 붙일 영역을 드래그..
[js] 개인정보 이메일 유효성 검사 후 출력하기 문자열 객체를 메서드를 이용하여 사용자로부터 입력받은 이메일 주소의 유효성을 검사하는 방법을 알아보겠습니다. 구현내용: · prompt를 이용하여, 사용자의 이름, 핸드폰 번호, 이메일 주소를 입력받음 · 이메일 주소안에 @, 도메인 주소가 포함되어 있으면 정상 · 정상일 경우, 정상 메시지 출력 · 비정상일 경우, 비정상 메시지 출력 · 여기서 핸드폰 번호 뒤 4자리는 정보가 노출되지 않도록 '*'로 출력 문자열 객체 메서드 종류 설명 charAt(index) 문자열에서 인덱스 번호에 해당하는 문자를 반환 indexOf("찾을 문자") 문자열 왼쪽에서 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환 (만일 찾는 문자가 없으면 -1을 반환) match 문자열에서 왼쪽부터 ..
[상업용무료폰트] 배달의민족체 폰트 다운로드 오늘은 소개할 상업용 무료 폰트는 '배달의 민족 폰트'를 입니다. 제가 블로그 포스팅 첫 배너에 사용하는 폰트는 배달의 민족 도현체입니다. 배달의 민족 회사인 우아한 형제들에서 제약 없이 한글을 쓸 수 있도록 한나체·주아체·도현체·연성체·기랑해랑체·한나체 Air·한나체 Pro·을지 로체를 만들어 무료로 배포하고 있습니다. 대표적인 배달의 민족 폰트, 도현체/한나체/을지로체/주아체/연성체를 확인해 보겠습니다. 배달의 민족_도현체 제가 정말 애용하는 도현체는 옛 간판을 모티브로 한 서체이고 자음과 모음의 획이 서로 이어지는 것이 특징입니다. 도현체는 글자의 조합에 따라 형태가 달라집니다. 폰트 스타일이 군더더기 없이 깔끔하고 반듯하며, 가독성이 좋아 제가 제일 마음에 들어합니다. 배달의 민족_한나체 한나체는..
[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스타일로 적용)..
반응형

티스토리툴바