고수를 꿈꾸며

http://mathbang.net/377

블로그 속도 측정 - Google PageSpeed Insights에서 javascript를 압축하고 위치를 조절하면 블로그 속도가 빨라진다고 했어요. 어떻게 압축하고 어떻게 위치 조절을 하는 지 간단하게 소개할께요.

압축이라는 게 zip 파일같은 압축이 아니고 공백, 주석 등을 삭제해서 용량을 줄이는 거예요.

HTML이나 CSS도 같은 방법을 이용할 수 있는데 HTML이나 CSS는 수정을 많이 하기때문에 압축을 하는 것이 불편하죠. 그에 반해 javascript는 수정을 별로 하지 않으니 압축하는 게 효과적이고요.

Online Javascript compressor

이름에서 알 수 있듯이 javascript를 압축해주는 사이트입니다. 크게 두 부분으로 나눠져 있는데, 위에는 압축할 javascript, 아래는 압축된 javascript입니다.

Base62 encode와 Shrink variables 두 가지 옵션이 있는데, Shrink variables는 변수를 알파벳처럼 그냥 단순 문자로 바꾸는 걸 말해요. 보통 변수는 그 의미를 담은 단어들을 조합해서 만드는데, 이마저도 줄이고 싶을 때 사용하는 겁니다. 대게 블로거들은 javascript를 수정할 일이 없으니 이 옵션을 선택하는 것도 나쁘지는 않아요.

<script type="text/javascript"> 와 </script> 사이에 있는 내용을 윗칸에 입력하고 "compress"를 누르세요.

그러면 아래에 압축된 javascript가 나와요. 이걸 그대로 가져다 쓰시면 돼요.

그림 제일 아래에 보면 376/852 = 0.441 이 나오는데, 압축률이에요. 44%로 줄었다는 뜻이죠.

참고로 압축된 스크립트는 js 파일로 만들어서 사용하면 로딩속도가 더 빨라져요. 각 스크립트를 하나의 파일로 만들 지 않고 여러 javascript를 모아서 파일 하나로 합치면 효과 만점이지요.

js 파일을 스킨에 업로드 한 다음에 html/css 편집에서 맨 아래에 있는 </s_t3> 바로 위에 호출하시면 됩니다. 위치와 방법은 아래 그림을 참고하세요. 

블로그 html/css 편집에 바로 붙여넣을 때는 <script type="text/javascript"> 와 </script> 사이에 넣고, js 파일로 만드려면 그냥 복사한 내용만 파일로 만들면 됩니다.

사이트가 느리면 사용자들은 짜증을 내며 금새 다른 사이트로 이동하거나 브라우저를 닫아 버린다.
사이트를 좀더 빠르게 띄워 사용자들의 만족도를 높이는 것이 사이트 존재의 목적이나 마찬가지이다.
어떻게 하면 웹페이지 로딩 속도를 좀 더 빠르게 할 수 있는지는 여러가지 방법이 있다.

Keep-Alive 사용

위의 내용들을 클릭 한번으로 알려주는 훌륭한 툴이 있어 소개한다.
바로 구글에서 제공하는 PageSpeed라는 브라우저 플러그인이다.
크롬과 파이어폭스의 플러그인을 제공한다.

플러그인 다운로드 - https://developers.google.com/speed/pagespeed/insights_extensions

'생활 코딩'이란 곳인데 정말 자세히 설명해 주십니다. ^^

http://opentutorials.org/

선택자(selector)란?

CSS의 효과가 적용될 태그를 지정

Id 선택자

• id 속성은 전체 문서에서 하나의 태그를 식별하기 위해서만 사용됨
• 우선순위가 가장 높음
• css 선택자에서는 #을 사용해서 id임을 표시
• 다음 예제는 id값이 memo인 태그의 컨텐츠를 빨간색으로 표시하도록 함

span 태그

텍스트는 태그가 아니라 컨텐트이기 때문에 텍스트를 꾸며주기 위해서는 텍스트를 감싸는 태그가 필요하다. 줄바꿈 없이 일부 텍스트를 꾸며주기 위해서는 꾸미려는 텍스트를 <span> 태그로 감싸고 여기에 효과를 준다. 

색

텍스트에 컬러를 부여할 때는 color 효과를 사용한다. CSS에서는 색상을 지정하는 3가지 방법이 있는데 아래와 같다. 

텍스트를 정렬하기 위해서는 정렬하고자 하는 텍스트를 태그로 감싸고 이 태그에 text-align 효과를 지정한다. CSS에서는 4가지 형태의 정렬방식을 지원한다.

text-decoration

line-height

행간격을 지정한다. 참고

letter-spacing

문자와 문자사이의 간격을 지정한다. 참고

vertical-align

텍스트의 수직 정렬을 지정한다. 참고

white-space

줄바꿈되는 방식을 지정한다. 참고

Font Family

일반적인 방법으로는 웹페이지에는 글꼴을 포함할 수 없다. 그렇기 때문에 웹페이지에 지정된 글꼴을 사용자가 보기 위해서는 사용자의 디바이스에도 해당 글꼴이 포함되어 있어야 한다. 그래서 CSS에서는 font family라는 개념이 있는데, 글꼴의 우선순위를 정해서 여러개 지정하면 그 중에서 사용할 수 있는 폰트를 반영하게 된다. 예를들어 아래의 구문은 사용자 컴퓨터에 Times New Roman 글꼴이 있다면 적용하고 없다면 Times를 적용한다. 

p{font-family:"Times New Roman", Times, serif;}

고정폭, 가변폭?

일반적으로 글꼴을 디자인 할 때 문자의 폭을 문자의 모양에 따라서 다른 넓이를 갖게 된다. 이를테면 숫자 1과 문자 m의 폭을 같게 디자인하면 어색하게 느껴질 수 있기 때문이다. 이러한 방식을 가변폭이라고 한다. 반대로 데이터 분석이나 코딩과 같은 일을 하는데는 미려함 보다는 정확함을 더 중시하기 때문에 글자의 폭을 같게 디자인하는데 이러한 방식을 고정폭이라고 한다. 일반적으로 고정폭 글꼴은 굴림체처럼 폰트의 이름 뒤에 '체'를 붙인다. 아래는 NHN에서 제공하는 글꼴인 '나눔고딕'과 '나눔고딕코딩'의 글자간의 넓이를 비교한 그림이다. (참고)

Sans-serif VS serif

serif(세리프)란 문자의 디자인에 포함된 장식적인 요소로 아래 그림의 붉은색에 해당된다. 대표적인 글꼴로 바탕체, 궁서체, Time New Roman이 있다. 

sans-serif(산세리프)란 세리프의 장식적인 요소가 없는 디자인으로 굴림체, 돋음체, Arial, Verdana가 대표적이다.

font-family에 serif나 sans-serif를 지정하면 운영체제 내부적인 기준에 따라서 적당한 글꼴이 표시된다.

글꼴의 크기를 지정할 때는 font-size 효과를 사용한다. font-size 효과에서 자주 사용되는 단위는 px와 em이 있고,  W3C에서는 em의 사용을 권장하고 있다. em은 상대적인 크기인데, 폰트의 대문자 M의 폭을 16px로 계산하기 때문에 1em은 기본적으로 16px과 같다고 생각하면 된다. 하지만 em은 현재 엘리먼트가 상속하고 있는 폰트 크기를 기준으로 상대적으로 결정된다. (참고:em과 px를 변환해주는 서비스)

링크의 상태

링크는 아래와 같이 4가지의 상태를 가지고 있고, 각 상태에 따라서 시각적으로 다른 모양을 가질 수 있다.

엘리먼트의 배경

엘리먼트의 배경에 색상을 부여하거나 이미지를 표시하고 싶을 때 background 효과를 사용한다. 이 효과를 이용하면 배경에 사용된 이미지의 위치를 지정하거나, 반복 할 수 있다. 

배경색

background-color:색상값

background-image: url('이미지의 URL');

배경 이미지의 반복

background-repeat: 반복방식

참고 : w3school.com

배경 이미지의 위치

background-position: 위치값

참고 : w3school.com

단축속성

body {background:#00ffff url('image.png') no-repeat right top;}

http://druckit.wordpress.com/2013/10/26/generate-an-excel-file-from-an-ext-js-4-grid/

https://fiddle.sencha.com/#fiddle/17j

※ 문자열 함수 정리

1) Ascii() - 문자열의 제일 왼쪽 문자의 아스키 코드 값을 반환(Integer)

예) SELECT Ascii('abcd')

>> 결과는 a의 아스키 코드값인 97 반환

1-1) Char() - 정수 아스키 코드를 문자로 반환(Char)

예) SELECT Char(97) >> 결과는 a 반환 

1-2)Nchar() - 지정한 정수 코드의 유니코드 문자 반환

예) SELECT Nchar(65) 결과 >> A

1-3)Unicode() - 식에 있는 첫번째 문자의 유니코드 정수 값을 반환

예)SELECT Unicode('abcde') 결과 >> 97

3) Charindex() - 문자열에서 지정한 식의 위치를 반환 ????

예) SELECT Charindex('b','abcde') >> 결과 : 2 1,2,3 
SELECT Charindex('b','abcde',2) >> 결과 : 2
SELECT Charindex('b','abcde',3) >> 결과 : 0

-- 인수값이 3개일때 마지막은 abcde 에서의 문자열 검색 시작위치를 말하며

2인경우는 bcde 라는 문자열에 대해서 검색

3인 경우는 cde 라는 문자열에 대해서 검색 하게 된다.

5) Left() - 문자열에서 왼쪽에서부터 지정한 수만큼의 문자를 반환 1,2,3 이네.. mssql은

예) SELECT Left('abced',3) 결과 >> abc
Right() - 문자열의 오른쪽에서 부터 지정한 수 만큼 반환(Left() 와 비슷 )

예) SELECT Right('abcde',3) 결과>> cde

6) Len() - 문자열의 길이 반환

예) SELECT Len('abced') 결과>>5

7) Lower() - 대문자를 소문자로 반환

예) SELECT Lower('ABCDE') 결과 >> abcde

Upper() - 소문자를 대문자로 반환

예) SELECT Upper('abcde') 결과>> ABCDE

8) Ltrim() - 문자열의 왼쪽 공백 제거

예) SELECT Ltrim(' AB CDE') 결과>> AB CDE

Rtrim() - 문자열의 오른쪽 공백 제거

예) SELECT Rtrim(' ab cde ') 결과>> ' ab cde' <-- 공백구분을위해 ' 표시 

10) Replace - 문자열에서 바꾸고 싶은 문자 다른 문자로 변환

예) SELECT Replace('abcde','a','1') 결과>>1bcde

11) Replicate() - 문자식을 지정한 횟수만큼 반복

예) SELECT Replicate('abc',3) 결과>> abcabcabc

12) Reverse() - 문자열을 역순으로 출력

예) SELECT Reverse('abcde') 결과>> edcba

15) Space() - 지정한 수만큼의 공백 문자 반환

예) SELECT Space(10) 결과 >> ' ' -- 그냥 공백이 나옴

확인을 위해서 SELECT 'S'+Space(10)+'E' 결과 >> S E

16) Substring() - 문자,이진,텍스트 또는 이미지 식의 일부를 반환

예) SELECT Substring('abcde',2,3) 결과>> bcd

※ 기타 함수 Tip

19) Isnumeric - 해당 문자열이 숫자형이면 1 아니면 0을 반환

>> 숫자 : 1 , 숫자X :0

예) SELECT Isnumeric('30') 결과 >> 1

SELECT Isnumeric('3z') 결과 >> 0

20) Isdate() - 해당 문자열이 Datetime이면 1 아니면 0
lsdate(4444) >>결과 0 >> 날짜 : 1 , 날짜 X :0 

[출처] MSSQL 문자열 함수|작성자 빵호

간단한 회원가입을 한 후 프로그램을 설치하면 

PC와 스마트폰 사이에 파일 공유는 물론 백업 용도로 사용이 용이하다.

URL : https://copy.com?r=RMdkGt

<head></head> 안에다가 다음 추가

<meta http-equiv="X-UA-Compatible" content="IE=9" >

이클립스의 플러그인 다운로드에 대한 통계 사이트에서 Top 10 Eclipse Plugin들을 살펴보았습니다. 월 기준으로 가장 많은 다운로드된 플러그인들의 Top 10 사이트는 아래와 같습니다. 최근의 트렌드나 새로운 플러그인들을 보기위해서 가끔 들어가는데 업무에 필요한 플러그인의 정보를 알기 위해 이 사이트를 알아둘 필요가 있습니다.

1. Sysdeo Eclipse Tomcat Launcher
2. Lomboz
3. MyEclipse Enterprise Workbench
4. XMLBuddy
5. SWT/Swing Designer
6. UML2
7. EclipseVisualEditor
8. EclipseHTMLEditor
9. SQLExplorer
10. Hibernate Synchronizer

제가 가지고 있는 것은 Lomboz, MyEclipse Enterprise Workbench, EclipseHTMLEditor, SQLExplorer, Hibernate Synchronizer, Together Community Edition for Eclipse, Spring IDE for Eclipse, Checkstyle, Properties Editor, Mylyn, FreeMarker IDE가 있네요. 업무에 도움이 될 수 있는 것은 찾아서 설치해보세요. 업무에 많은 도움이 될 것입니다. 그런데 너무 많이 설치하면 이클립스 운영에 문제가 조금씩 발생하네요. 집중과 선택이 필요합니다. ^^

http://mimul.com/pebble/default/2007/12/27/1198765740000.html

Mimul's Interests : Cloud, Open Source, SNS, Identity/Payment Management

잘 정리되어 있습니다. ^^

http://snoopybox.co.kr/1296