요즘 개발자들이 많이 사용하고 있는 Github 블로그 만드는 방법입니다. 장단점이 확연한데 본인의 성향에 맞게 사용할지를 결정하면 될 것 같습니다. 뭐든 그렇지만 필요하면 만들어 쓰면 그만입니다. 장점(요약 : 내 맘대로다) 1. 자유도가 엄청나게 높습니다. 블로그의 모든 것을 내 마음대로 바꿀 수 있다는 것이 큰 장점입니다.티스토리도 물론 자유도가 높은 편이지만 github는 더욱 세세한 부분까지도 바꿀 수 있습니다. 디자인을 중시한다면 github를 이용한 블로그를 쓰는 것이 좋을 것 같습니다. 2. 오직 나에게만 집중할 수 있습니다. 일단 만들어 놓으면 이거 해야하고 저거 신경쓸 필요가 없다는 뜻입니다. 구독자 신경 안써도 되고 이웃 품앗이 안해도 됩니다. 그런 기능이 없으니깐요. 오직 본인의 의..
윈도우에서 ruby 설치하는 방법입니다. 주로 github에 블로그 만들려는 용도로 설치를 하기 때문에 거기에 맞게 설치를 32bit 기준으로 했습니다. 1.루비 설치파일을 받습니다. 다운로드 페이지 : https://rubyinstaller.org/downloads/ Downloads Which version to download? If you don’t know what version to install and you’re getting started with Ruby, we recommend that you use the Ruby+Devkit 3.1.X (x64) installer. It provides the biggest number of compatible gems and installs th..
구글 애드센스에 계좌 등록을 하려면 영문 은행 이름과 은행식별코드(BIC)를 알아야 합니다. 그런데 어디서 알아야 할지 난감합니다. 영문이름을 평소에 쓰는 것도 아니고 은행식별코드도 일상적인 것이 아니라서 여러모로 알아내기가 어려운데 이걸 검색할 수 있는 곳이 있습니다. 바로 스위프트 닷컴에서 가능한데요. SWIFT는 국제 은행 간 통신 협회의 약어로 해외에 돈이 오갈때 빠르게 서로를 인증해주는 곳이어서 외화송금이 가능한 국내은행의 정보가 등록되어 있습니다. 스위프트 홈페이지에서 등록된 은행정보를 찾아보면 됩니다. 식별코드 검색방법 먼저, 스위프트 닷컴에 들어갑니다. https://www.swift.com/ Homepage | SWIFT - The global provider of secure finan..
블로그를 운영하다보니 어느덧 수익금이 100달러를 넘기게 되었습니다. 처음이라 적은 금액이지만 나름 시간을 내서 한 보람이 있는 것 같습니다. 구글 애드센스에서 수익금을 지급할 수단을 등록하라는 메일이 와서 계정을 등록했습니다. 외화계좌가 있어야만 계좌 등록을 할 수 있어서 괜찮은 계좌를 알아보았는데 다들 SC제일은행 외화계좌를 만드는게 가장 좋다해서 계좌를 만들었습니다. SC제일은행은 100달러 미만 출금 시 외환 수수료 1만원을 면제해주기 때문에 다른 은행에 비해 수수료비용이 덜 든다고 합니다. 요즘은 신분증만 있으면 SC제일은행 앱으로 계좌를 개설할 수 있습니다. 먼저 국내계좌를 개설한 후 외화계좌를 개설하면 됩니다. 앱으로 외화계좌를 개설한 후 구글 애드센스에서 결제 수단 추가를 눌러 계좌를 등록..
따로 설정을 하지 않으면 파워포인트는 맞춤법 검사를 합니다. 그러면 글자에 빨간밑줄이 생기는데 이게 가끔 불편할 때가 있습니다. 큰 문제는 없지만 그냥 신경이 쓰이는 경우죠. 다행히도 이를 간단히 없앨수가 있습니다. 1. 파워포인트를 실행시킨 후 파일 - 옵션으로 갑니다. 파일을 누르면 아래와 같이 나옵니다. 여기서 옵션을 갑니다. 2. 옵션 - 언어교정 - 입력할 때 자동으로 맞춤법 검사를 해제시킵니다. 체크를 없애고 확인을 누르면 맞춤법이 틀렸다며 있었던 빨간줄이 없어진 걸 볼 수 있습니다. 이상으로 ppt를 만들 때 아무 영향은 없지만 보기 편하기 위한 작은 팁이었습니다.
티스토리 썸네일을 어떻게 해야하는지 몰랐는데 최근에 그림판으로 썸네일 하는 방법을 배웠습니다. 업자가 아니라서 엄청 쉬운 글씨 쓰기 정도이지만 간단하게 할 수 있어서 방법을 기록겸 공유겸 포스팅하고자 합니다. 제동생이 그림을 간단히 만들어주어서 이 그림을 가지고 해보도록 하겠습니다. 썸네일 만들기 1. 그림을 그림판으로 엽니다. 선택을 누른 후 그림 아무데서 오른쪽 마우스 클릭해 크기 조정을 누릅니다. 크기는 정사각형을 만듭니다. 크기 조정에 들어가면 픽셀이 있는데 가로세로 비율유지를 해제하고 자신이 원하는 픽셀 크기를 써 넣습니다. 보통 250으로 한다고 합니다. (저는 잘몰라요..) 300, 400도 될지는 모르겠네요. 아무튼 정사각형으로 크기조정을 해야한다고 합니다. 자신의 그림보다 크게하면 그림이..
티스토리에서 수학기호를 바로 쓸 수 있는 방법이 있습니다. Mathjax 라는 것인데요. 아래와 같이 html 코드를 입력하면 티스토리에서 수식을 적용할 수 있습니다. Mathjax는 LateX 문법을 따르고 있어서 마크다운에 쓰던 기호 그대로 쓸 수 있어서 편합니다. Mathjax 설치 [관리]-[꾸미기]-[스킨편집]-[html편집]의 안에 다음 코드를 넣으면 적용시킬 수 있습니다. 아래 그림처럼 적용을 시키면 됩니다. 사용방법 티스토리에서 x^2을 쓰려면 아래와 같이 '$' 표시한후 씁니다. $x^2$ $x^2$ $를 아무대나 쓰면 텍스트도 적용되니 엉뚱한 곳이 LaTeX로 바뀌지 않도록 주의하세요. 달러 표시를 두번 쓰면 가운데 정렬이 됩니다. $$텍스트도 적용되니 구분을 잘해서 쓰세요~!$$ $$..
JavaScript 는 HTML 에 넣을 수 있는 스크립트 언어라고 했었다. 스트립트 언어이면 우리가 어떤 지시사항을 넣으면 그걸 해석해 작동되는 방식이다. 이런 JavaScript 의 특징을 가지고 다양한 방식으로 지시를 내려서 우리가 원하는 것이 나올 수 있도록 만들 수 있다. 이를 이용해 일종의 인과관계를 넣어 동작을 지시하려고 한다. 예를 들어, '마우스 커서가 위에 있으면 이미지가 바뀐다' 나 '이미지를 클릭하면 다른 사이트로 이동한다' 같이 어떤 조건을 만족시키면 동작을 취하는 것들을 말한다. 여기서, '마우스 커서가 위에 있다' 나 '이미지를 클릭한다' 같이 조건에 해당하는 것을 이벤트라고 하고, 인과관계를 지정하는것을 이벤트핸들러 라고 한다. 이벤트 핸들러의 종류 이벤트 핸들러에는 다음과 ..
highlight.js 티스토리에서 pre 태그와 code태그를 이용해 코드블록을 작성할 수 있는데 해본 사람은 알겠지만 초록색에 글씨체가 이쁘지 않게 나온다. 이걸 해결하기 위해 상당히 애를 썼는데 답은 간단했습니다. 티스토리 블로그 설정에 플러그인란에 보면 syntax hilighter 라는 곳을 가면 스킨바꾸듯 코드블록의 글씨체나 글씨색 배경색 등을 변경할 수 있습니다. 기본보다 굉장히 뛰어난 모양을 제공하지만 저는 왜 다른 블로거들과 다른 느낌일까라는 의문으로 여기저기 찾다가 hilight.js 라는 것을 알게 되었습니다. hilight.js 의 장점이라 하면 테마와 사용 가능한 언어가 많습니다. 테마는 커스텀마이징을 하지 않아도 될만큼 많고 깔끔하다. 다운방법 highlight.js를 적용하는 ..
블로그를 쓸 때 매번 Visual Studio 켜서 쓰고 결과 확인해서 붙여넣는 걸 반복하니 귀찮기도 하고, 그림이 들어가면서 글 전체 모양도 안 좋아지는 것 같아 어떻게 할까 하다 와 태그를 알게 되었다. 아직 html이 익숙하지 않아서 애를 먹고 있었는데 너무나도 유용한 태그를 알게 되어 기쁘다. 태그 html에서는 아무리 내가 Enter를 쳐도 줄바꿈이 일어나지 않는다. html 안에서는 를 하거나 를 써야만 줄바꿈을 할 수 있다. 하지만 태그 안에서는 일일히 태그를 쓰지 않아도 문서에서 다루는 Enter, Tap, Space 기능을 쓸 수 있다. 예 줄바꿈을 br 없이 하려면 pre를 이용하세요~! html 내에서 줄바꿈을 해도 pre를 쓰지 않은 상태에서 실행을 하면 이와 같은 결과가 나온다. ..
스크립트(Script) 언어 스크립트 언어를 알면 JavaScript를 이해하는데 도움이 되어서 먼저 설명한다. 스크립트란 말은 연극용어에서 유래되었는데 그 뜻을 찾아보면 '각본·대본' 이라고 되어있다. 각본과 대본이 하는 역할을 생각해보면 프로그래밍 분야에서 왜 스크립트 언어라는 용어를 쓰게 되었는지 이해가 될 것이다. 각본·대본의 내용을 보면 배우들이 어떻게 하는지 지시되어 있어있다. 대사나 배우들의 표정, 등장과 퇴장, 배우 위치 등을 표시해놓는다. 배우들은 스크립트를 보고 어떻게 할지 구상하고 스크립트를 바탕으로 관객 앞에서 표현한다. 즉, 스크립트가 배우들을 통해 완성되어 관객들에게 전달되는 과정이 나타난다. 이와 마찬가지로 프로그래밍 분야에서 스크립트 언어라고 하면 우리가 쓰는 소프트웨어 안에..
HTML 을 작성하다 보면 색상이 많이 필요하다. 또, 단순한 색상이 아니면 색상을 RGB 로 표현하거나 코드로 표현해야 하는데 뭘 써야 하는지 모를 때가 있다. 색상 코드를 알아내고 싶다면 Color Cop 을 사용해 외부에 있는 색의 코드를 알아내면 된다. 스포이드를 클릭한후 드래그해서 원하는 색상에 놓으면 알아서 코드와 RGB좌표를 알려준다. 설치하려면 다음 링크로 들어가면 된다. 프리웨어~ 마음껏 쓸 수 있다. http://colorcop.net/download/ download The easiest way to install Color Cop is to download the self-installing version. If you use the installer it's easy to remo..
오늘은 float 과 clear 를 소개하려고 한다. 웹페이지를 만들 때 이미지를 넣고 글을 쓰는 경우가 종종있는데 글이 이미지를 둘러쌀지 말지 결정하는 속성이다. float float 은 둘러싸기를 지정하는 속성이다. 둘러싸는 방식에는 왼쪽으로 이미지를 놓고 뒤에 계속되는 요소는 오른쪽으로 둘러싸게끔 하는 left 오른쪽에 이미지를 놓고 뒤에 계속되는 요소는 왼쪽에 둘러싸게끔 하는 right 둘러싸기를 하지 않는 none 이렇게 세가지 방식이 있다. float을 쓰려면 에서 쓰면 되고 이건 이미지에 대한 속성 부여이므로 img{float:right;} 으로 쓰면 된다. class는 레이아웃이나 전체 틀을 보정하거나 글자의 속성부여하는 것이고 img 는 이미지에 대한 속성을 부여한다는 것을 알아두면 헷갈..
CSS 에서 중요한 개념인 박스에 대해서 알아보자. 사실, 모든 요소는 박스라는 틀 안에 있어서 박스를 조정한다는 것은 요소를 이루고 있는 틀을 변경한다고 볼 수 있다. 박스의 폭과 높이 박스의 폭과 높이를 지정하려면 width 와 height 를 사용하면 된다. 박스가 그려지는지 보기 위해서 테투리에 선을 추가해서 보이겠다. .mybox 에 폭 200px, 높이는 100px 로 지정하였다. 다음과 같이 나온다. '리스트' 바깥에 테두리가 설정되었다. 테두리만큼의 박스가 형성됨을 알 수 있다. 폭(width)과 높이(height)는 아무 지정을 안 하면 auto(자동) 로 지정된다. 여백, 패딩, 테두리 박스의 여백과 패딩 테두리를 설정할 수 있는데 설정값이 많을 뿐 크게 어려운 건 없다. margin ..
list-style-type list-style-type은 리스트의 마크를 지정한다. none 마크 없음 disc 검정 동그라미(●) circle 흰 동그라미(○) square 검정 사각(■) decimal 숫자 decimal-leading-zero 맨앞에 0를 붙인 숫자(01,02,...) lower-roman 소문자 로마 숫자 upper-roma 대문자 로마 숫자 lower-latin, lower-alpha 소문자 알파벳 upper-latin, upper-alpha 대문자 알파벳 armenian 아르메니아 숫자 geogian 그루지아 숫자 많은 마크가 있다. 그 중에 쓰고 싶은 것을 쓰면 된다. class로 먼저 만들어서 쓰거나 ul 안에 style태그를 넣어서 쓸수 있다. 하나는 class 로 해보..