eunyo의 it이야기

스캔 이미지 텍스트로 변환 전공책이나, 기타 출력된 문서의 이미지 파일을 텍스트로 변환하는 방법을 알아보겠습니다. 완전 간단하게 변환이 가능하니, 필요하신분들은 따라해보세요 :) 1. 구글 드라이브로 이동 drive.google.com 상단의 링크에 접속하여 구글 드라이브로 이동해줍니다. 2. 내드라이브로 이동 구글 드라이브의 홈화면에 있는 내 드라이브 폴더에 들어가줍니다. 3. 폴더 업로드 드래그를 해서 파일을 끌어주거나, 오른쪽 버튼을 눌러 파일을 업로드해줍니다. 4. 이미지 텍스트 변환 그 다음, 업로드한 파일에 마우스 오른쪽 버튼을 눌러 연결 앱 > google 문서를 눌러줍니다. 그러면 위와 같이 텍스트로 변환이 완료됩니다!! 100% 정확하게 출력되지는 않은 것 같지만 정말 유용하게 사용할 수..

무료 차트(chart) 플러그인 웹을 제작하다 보면, 차트가 필요한 경우가 종종 있습니다. 간단한 막대그래프같은 경우에는 html, css로 그려내도 되지만, 보통은 chart의 플러그인을 사용하여 구현합니다. 그럼 무료로 사용가능한 차트 플러그인에 대해 알아보겠습니다. 1. chart.js (www.chartjs.org/) 차트플러그인 중에서 유일하게 사용해본 chart.js 입니다. 차트플러그인 중에서 꽤 유명한 편이라 국내에서도, 해외에서도 예제들을 많이 찾아볼 수 있습니다. 간단한 차트를 표현하기에는 좋지만, 커스텀하기가 불편해서 정말 간단한 차트만 그리기 좋은 차트입니다. 2.C3.js (c3js.org/) c3는 생성할 때 각 요소에 일부 클래스를 제공하여, 사용자 정의 스타일을 적용할 수 있..

[CSS] div 가운데 정렬하기 div와 같은 block형태의 태그는 보통 margin:auto를 사용하여 가운데 정렬을 합니다. 텍스트나 inline-block 같은 경우에는 text-align:center를 사용하여 가운데 정렬을 합니다. 그러면 세로 가운데 정렬은 어떻게 해야할까요? 여러가지 방법을 알려드리겠습니다. 1. line-height와 text-align line-height를 사용한 가로, 세로 가운데 정렬은 div안에 있는 텍스트를 가운데 배치할때 주로 사용됩니다. line-height의 값 : 감싸고 있는 부모태그의 높이값과 동일하게 해주시면 됩니다. text-align의 값 : 가운데 배치를 뜻하는 center로 적용해줍니다. [결과화면] [html] 가운데 정렬 [CSS] div..

CSS flexbox css에서의 flexbox는 보다 쉽게 레이아웃 구조를 잡을 수 있는 css 속성입니다. flex 박스는 요소의 크기가 정확하지 않거나, 반응형일 때 유용하게 사용할 수 있습니다. 정렬, 방향, 크기, 순서 모두 css만으로 유연하게 조절할 수 있기때문에 다양한 레이아웃을 보다 쉽게 구현할 수 있습니다. flexbox의 구성 flexbox는 상위 부모요소인 flex container와, 자식 요소인 flex item으로 구성되어 있습니다. flexbox 기본 구조 [html] Item1 Item2 Item3 Item4 [css] .container { display: flex; } flexbox css 적용방법은 부모요소인 container에 display:flex를 선언하면 됩니다..

특정 위치에서 시작하는 스크롤 네비게이션 특정위치에서 시작하는 스크롤 네비게이션입니다. a링크로 해당 섹션에 이동가능하고, 스크롤이 위치한 섹션에 맞춰 네비게이션 메뉴도 active 됩니다. 원페이지 홈페이지나, 랜딩페이지 제작할 때 유용하게 사용할 수 있을 것 같습니다. 필요하시다면 아래 코드확인해보시고 수정해서 사용하세요 :) [html] main section1 section2 section3 section4 section01 section02 section03 section04 [CSS] /*퀵메뉴*/ .quick_menu {left:5%;position: absolute;} .quick_menu.fixed {position: fixed;top: 5px; z-index:100} .quick_men..

태그 form태그란? 웹사이트에서 사용자 정보를 입력받아, 사용자로부터 할당된 데이터를 서버로 전송합니다. 회원가입이나 로그인, 검색창과 같은 입력받은 데이터를 서버로 전송이 필요한 기능에 form태그가 사용됩니다. form의 구조 form의 구조는 위의 코드와 같습니다. action속성은 폼 데이터를 서버로 보낼 때, 데이터를 전달받을 url을 지정합니다. method속성은 폼데이터를 서버로 제출할 때 사용되는 HTTP 메소드를 지정합니다. method 속성의 속성값에는 'GET'과 'POST'가 있습니다. - GET 방식은 브라우저에 의해 저장되기 때문에 '보안의 취약점'이 존재합니다. 또한 데이터 길이의 제한이 있습니다. - POST 방식은 브라우저에 의해 저장되지 않기 때문에 '보안성'이 높습니다..

홈페이지 무료 제작, 반응형 홈페이지 만들기 일단적으로, 업체에서 제작해주는 홈페이지 비용은 비쌉니다. 사용자 맞춤사이트를 만들게 되면 설계부터, 디자인, 퍼블리싱, 개발까지 진행해야되니 인건비때문에 당연히 가격이 비싸질 수 밖에 없습니다. 그렇기때문에 무료 홈페이지제작을 위해서는, 템플렛이 이미 만들어져있는 무료 홈페이지 빌더를 사용하셔야합니다. 지금부터 무료로 홈페이지를 제작할 수 있는 사이트들을 소개시켜드리겠습니다. 1. 워드프레스(wordpress.com/ko) 아마 홈페이지 빌더 사이트중에 가장 유명하지 않을까 싶습니다. 무려 CMS 시장 점유율이 58%나 된다고 하니 어마어마하네요. 외국 사이트다 보니, 테마나 플러그인의 양이 어마어마합니다. 워드프레스는 커스터마이징이 쉬운편은 아니지만 그만큼..

국내 무료 웹 호스팅 사이트 사실 현재는 무료 웹 호스팅을 중단한 곳이 많이 있습니다. 물론 무료이다보니 계정의 용량과, 성능은 유료보다는 떨어지지만, 트래픽이 많지않은 사이트나, 포트폴리용 사이트를 제작할 때 무료 웹 호스팅을 사용하면 좋겠죠. 오늘은 국내의 무료 웹 호스팅 서버 사이트를 알려드리겠습니다. 1. 닷홈 (www.dothome.co.kr/) 아마, 국내의 무료 호스팅 업체중 가장 유명할 거 같아요 :) 바로 닷홈입니다. 창업부터 지켜온 약속이라고 하니, 평생 무료로 이용하실 수 있으실 것 같습니다. 디스크용량은 200MB, DB용량은 200MB, 트래픽은 일 300MB네요 :) [닷홈 서비스사양] 닷홈의 웹서버의 사양은 위와 같습니다. 닷홈의 무료호스팅의 특징입니다. 평생 무료호스팅이 사용..

* 본 포스팅은 어떠한 업체와도 무관함을 알려드립니다 . 웹호스팅/도메인 이란? 우선 홈페이지를 제작 예정인 분들에게는 생소할 '웹호스팅'과 '도메인'에 대해 간단하게 설명해드리겠습니다. 웹호스팅이란 홈페이지(웹사이트)를 업로드할 공간을 임대하는 서비스입니다. 그러므로 홈페이지를 제작할려면 웹 호스팅은 필수적입니다. 도메인은 'www.naver.com', 'www.daum.net' 과 같은 사용자가 접속할 수 있는 홈페이지 주소를 말합니다. 호스팅업체에서 도메인을 구매하지 않는다면, 'www.eunyo.호스팅업체명.co.kr' 과 같은 주소를 갖게 될 것 입니다. 이러한 주소는 사용자·이용자에게 직관적이지 않습니다. 그러나 도메인을 구매하여 사용한다면 'www.eunyo.co.kr' 이러한 형태의 주소를..

HTML video 태그 사용법HTML5에서는 video태그를 사용해 웹페이지 안에 동영상을 올릴 수 있습니다. 태그는 웹 문서에 동영상 파일의 링크만 연결시켜주면 간단하게 동영상 구현이 가능합니다.video 태그에서 지원하는 파일은 mp4, webM, avi, ogg가 있습니다.브라우저마다 지원하는 파일이 다르기 때문에 모든 브라우저의 호환성을 맞추기 위해서는 여러가지 파일을 동시에 사용하여야 합니다. 브라우저 별 호환성 BrowserMP4WebMOggInternet ExplorerOXXChromeOOOFirefoxO from Firefox 21 from Firefox 30 for LinuxOOSafariOXXOperaO From Opera 25 OO지원하는 브라우저와, 브라우저별 지원하는 비디오파일 ..