'Howto'에 해당되는 글 18건

Howto

document.write, 혹은 document.writeln은 자바스크립트를 배울 때 가장 먼저 사용하게 되는 메소드인데, 

document.write는 문서가 모두 로드된 이후에는 작동하지 않는 특성이 있기 때문에

 document.write메소드가 들어있는 스크립트 파일을 동적으로 불러올 시 제대로 작동하지 않는 문제가 있습니다.

이때문에 될 수 있으면 document.write메소드를 사용하지 않는 편이 좋지만,

대안으로 사용되는 innerHTML은 사용자 삽입 스크립트로 인해 보안문제를 야기할 수 있기 때문에 개발 과정에서 사용을 배재하는 경우가 있는데,

이 경우 document.write메소드를 실행시키기 위해 write 메소드 자체를 redefine하는 편법을 사용할 수 있습니다.

아래 예문은 jQuery를 사용한 방법입니다.

 

function setDocumentWriteTo( selector ) {
    function write( args, end ) {
        $(selector).append(
            Array.prototype.join.call( args, '' ) + end
        );
    }
    document.write = function() { write( arguments, '' ); };
    document.writeln = function() { write( arguments, '\n' ); };
}
setDocumentWriteTo( '#writeHere' );
신고
0 0
Howto

상품명에 포함된 단어를 읽어서 자동으로 카테고리 분류를 하는 엑셀 VBA스크립트입니다.

실무에 사용했던 것으로 필요하신 분이 있을까 올립니다.


Private Sub Auto_Category()

    
    원피스 = Array("원피스")
    하의 = Array("팬츠", "스커트", "풀오버", "쇼츠", "슬랙스", "바지", "레깅스", "스키니")
    상의 = Array("블라우스", "가디건", "셔츠", "니트", "폴라")

    자켓 = Array("자켓", "점퍼", "재킷", "쟈켓")
    패딩 = Array("패딩", "털", "FUR")
    액세서리 = Array("부츠", "지갑", "머플러", "크로스백", "숄더백")

    Dim k As Integer    'for 문을 위한 변수선언
    Dim cnt As Integer  '전체 줄 수를 세기 위한 변수선언
    Dim Name As String  '상품명을 위한 변수선언
    
    cnt = Range("A5").CurrentRegion.Rows.Count '값이 들어있는 마지막 줄의 번호를 찾는다. A5는 표본데이터가 있는 맨 위 셀 위치
        
    For k = 5 To cnt '반복문 시작
        Dim Sell As Integer
        Sell = Cells(k, 7) '팔린갯수 읽어오기 7은 팔린갯수가 있는 열의 위치(왼쪽에서부터 1~)
        If Sell > 0 Then '팔린갯수가 0보다 크면
            Name = Cells(k, 5) '물품명 읽어오기 5는 물품명이 있는 열의 위치(왼쪽에서부터 1~)
            '물품명 체크 외부함수
           If Check_Category(Name, 상의) Then
                Cells(k, 6) = "상의" '6은 카테고리를 넣을 열의 위치 (왼쪽에서부터 1~)
            ElseIf Check_Category(Name, 하의) Then
                Cells(k, 6) = "하의"
            ElseIf Check_Category(Name, 자켓) Then
                Cells(k, 6) = "자켓/점퍼"
            ElseIf Check_Category(Name, 패딩) Then
                Cells(k, 6) = "패딩(모피/밍크)"
            ElseIf Check_Category(Name, 액세서리) Then
                Cells(k, 6) = "기타 액세서리"
            ElseIf Check_Category(Name, 원피스) Then 
                Cells(k, 6) = "원피스"    
            End If
        End If
    Next k
        
End Sub

Function Check_Category(Name, category) ' 물품명 체크 함수
    Dim I As Integer
    Dim X As Boolean
    X = False
    For I = LBound(category) To UBound(category)
        If InStr(Name, category(I)) Then
            X = True
        End If
    Next I
    Check_Category = X
End Function



저작자 표시 비영리 변경 금지
신고
0 0
Howto

전편에 이어서..

 

1. 다운받은 파일의 확장자는 .js여야 합니다. 일단 소중하게 보관합니다.

 

2. 상단 메뉴 중의 download 에 오른클릭하고, 링크된 파일을 저장합니다. 파일의 이름은 cufon-yui.js가 됩니다.

3. 티스토리에 두 파일을 모두 업로드합니다.

 

4. 소스를 수정합니다.

cufon의 방식은 자바스크립트를 이용한 것이기 때문에 많은 자원을 사용합니다. 따라서 제목 글씨 정도에만 사용해주는 것이 좋습니다.

skin.html의 <head>태그와  </head>태그 사이에 다음과 같은 내용을 입력합니다.

 

<script src="./images/cufon-yui.js" type="text/javascript"></script>

<script src="./images/자기의 폰트파일이름.js" type="text/javascript"></script>

 

그다음, 다음과 같은 내용을 입력합니다.

<script type="text/javascript">
			Cufon.replace('h1');
</script>

 

이렇게 하면, 이제 <h1>태그 사이에 있는 내용들은 모두 cufon에서 제작한 웹폰트로 대체되게 됩니다.

 

5. 적용하고 싶은 제목 치환자를 찾습니다. 일반적으로 티스토리에서는

 

##_notice_rep_title_##

##_article_rep_title_##

'##_list_conform_##'에 해당되는 글 ##_list_count_##건

 

등입니다. (guest나 tag의 제목들도 물론 해당됩니다.)

 

이것을을 찾아서,

 h1 태그로 감싸주면 됩니다.

ex)  <h1>GUEST BOARD</h1> 

그럼 멋진 웹 폰트를 적용할 수 있게 됩니다.

 

6. 크기를 조절하려면, style.css에서 다음과 같은 부분을 추가합니다.

h1 { font-size : 쓰고싶은 크기px}

 

신고
6 0
Howto

사실, 맥에서는 따로 트루타입 웹 폰트 솔루션이 필요하지 않습니다.

맥에서 주로 쓰는 사파리, 크롬, 파폭은 모두 자동 업데이트가 되기 때문에 항상 최신버전이 유지되고,

최신버전 브라우저들은 기본적으로 TTF를 이용한 웹 폰트 명령어 를 지원하기 때문이지요.

더군다나 Lion에서부터는 나눔폰트가 기본으로 들어있는데다 폰트 출력이 굉장히 미려하기 때문에,

마치 그림으로 만든 것 처럼 깔끔하게 나옵니다. 윈도우에서는 상상도 할 수 없는 일이지요.

 

 

진짜로 웹브라우저에서 이렇게 나옴 ㅎ

 

http://catntuna.tistory.com/43

이 그림을 캡쳐한 포스팅의  주소입니다. 한 번 씩 가셔서 그림처럼 나오는지 확인해 보세요.

윈도우에서 사파리가 아닌 브라우저를 쓰시는 분이라면, 컴퓨터를 부수고싶어지실 거에요.

어쨌든, 대다수의 웹 사용자들은 윈도우를 사용하고, IE도 상당히 구버전을 사용합니다.

윈도우+IE환경에서 한글폰트는 특별히 못생기게 나옵니다. 이때문에 많은 웹 관련 종사자들이 골머리를 앓고 있습니다.

 

외국에서도 브라우저에서 트루타입 폰트가 제대로 표시되지 않는 문제 때문에, 많은 웹폰트 솔루션이 등장했었습니다.

설치형 블로그를 쓰는 사람은 php+GD조합으로 폰트를 그림으로 사용하는 편리한 방법을 쓰기도 했지만,

티스토리에서는 GD라이브러리도 없고, php업로드도 불가하기 때문에 전혀 불가능합니다.

 

어쨌든, 웹폰트 솔루션 중에서 가장 많이 알려지고, 편리하게 사용할 수 있는 Cufon을 소개합니다.

한 단계 한 단계 거치면서 내 블로그에 제목으로 쓸 수 있는 웹폰트를 만들고 적용하는데까지 진행해 보겠습니다. (safari에서 진행하겠습니다.)

일단 이 링크를 클릭하세요

http://cufon.shoqolate.com/generate/

 

이런 페이지가 뜹니다.

 

먼저 자신이 쓸 폰트 파일을 올려야겠지요.

이 부분을 봅니다.

 

외국 폰트들은 변환할 문자가 몇 개 되지 않기 때문에 (숫자,기호, 알파벳) 용량이 상당히 작아서 이탤릭이나 볼드도 쉽게 추가 가능하지만,

한글 폰트는 기본만 올려도 1메가에 육박하는 용량을 가집니다. 따라서 Regular typeface에만 폰트를 올리는 것을 추천합니다.

 

아시다시피 모든 폰트에는 저작권이 있습니다.

cufon을 통한 폰트 변환은 뭐 저작권 문제가 상당히 복잡한데요,  어쨌든 모든 상용폰트는 불가하고, 무료 폰트 중에서도 사용할 수 있는 폰트가 한정되어 있습니다.

나눔 폰트는 변환이 가능한 라이센스라 알려져 있기 때문에, 나눔 폰트로 진행을 해 보겠습니다. 다음폰트는 불가하다 알려져 있습니다.

(나눔폰트, 서울체, 기타 자유로이 배포가 가능하고 기업사용자들에게도 자유로운 라이센스를 가진 폰트들을 검색해 보세요.)

 

1. 나눔폰트중에 변환하고 싶은 폰트의 ttf파일을 Regular typeface에 올립니다.

 

2. 그다음, 라이센스란에 체크합니다.

 

3. 사용할 문자셋을 정해줘야합니다. 이 부분이 어렵습니다.

 

웹페이지의 폼을 개조하여 사용해야 하기 때문입니다.

그 이유는 cufon사이트에서 기본으로 제공하는 input은 256글자의 한계가 있으며,  이만큼으로는 변환할 문자셋의 ㄱ도 끝내는 것이 불가능하기 때문입니다.

 

Firefox의 경우 Firebug를 이용하십시오. (확장 프로그램입니다.) 사파리나 IE9의 경우 내장되어 있습니다.
제가 윈도우 컴퓨터가 없기 때문에 IE에서 수정하는 법을 모르겠으니 사파리를 이용하는 것을 추천드립니다.

1)  사파리의 설정->고급 탭에서 '메뉴 막대에서 개발자용 메뉴 보기' 를 선택합니다.

 

2) 개발자용 메뉴에서, 웹 속성 보기를 선택합니다.

 

3) 요소 -> 돋보기 -> .. and also these single characters 밑의 input form을 찾습니다.

 

4) input 부분이 자동으로 하이라이트 되면, input을 더블클릭하여 편집합니다.

 

5) input -> textarea로 바꿉니다.

 

 

6) input폼이 textarea폼으로 바뀝니다.

 

7) maxlength 를 적당한 값으로 바꿔줍니다.

 

 

8) 바뀐 폼에 과거 웹폰트용으로 사용되었던 subset을 넣습니다.  첨부파일된 텍스트 파일의 내용을 복사해서 붙여넣기 하시면 됩니다.

 

4. 나머지 옵션은 건드실 필요 없고, 라이센스에 체크하신 후 Let's do this 합니다.

5. 다운로드에 파일이 받아집니다.

 

...2부에 계속.

신고
Howto
 ID  항목
 1  홈
 2  태그
 3  미디어
 4  로케이션
 5  홈
 6  방명록
 7  글쓰기
 8  관리자
 9  전체 글 보기(/category)
10   Search


저작자 표시 비영리 변경 금지
신고
0 0
Howto
function preloadImages(id) {
   
var c = new Array();
    $
(id+' img').each( function(j) {
        c
[j] = new Image();
        c
[j].src = this.src;

       
if ( $.browser.msie ) {
           
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='"+ this.src +"')";
       
}
   
});

}
저작자 표시 비영리 변경 금지
신고
0 0
Howto

 

제목에는 아이포토라고 썼지만,

 

그냥 포토북을 이용해 이벤트하는 방법을 설명하는 포스팅 되겠습니다.

 

왜냐하면 국내에서는 아이포토 주문을 하면 일본으로 가거든요. 돈 엄청 깨져요.

 

물론, 이벤트 뿐만 아니라 좋아하는 분에게 고백하는 방법으로도 쓸만 할 것 같습니다.

 

 

 

나 감동먹어쪄용

 

 

 

 

요새는 백지 템플릿을 지원하는 포토북 사이트들이 많기 때문에,

 

아이포토에서는 디자인에 대한 영감(Inspiration)을 얻는 정도로 만족해 주세요.

 

아시다시피 아이포토에서는 굉장히 훌륭한 템플릿들을 제공하니까요.

 

 

그럼 아이포토에서 만드는 포토북이 어떻게 생겼는지, 만드는 법을 단계별로 알아 보겠습니다.

 

 

1. 책에 들어갈 사진을 모은 이벤트를 생성하고, 선택합니다.

 

 

 

2. 목록 화면에서 오른클릭, 혹은 control+클릭을 하고 '새로운 책'을 선택합니다.

 

 

 

3. 여러가지 템플릿이 나오는데, 우리가 사용할 것은 흰 색의 기본 템플릿입니다. '생성'을 누르세요.

 

 

 

4. 기본 화면입니다. 우리가 만들 책은 한 때 많이 유행했던 '블루 데이 북' 으로, 사진 한 장 옆에 오글거리는 멘트 한마디씩 날려주는 형식입니다.

 

 

 

5. 하단의 레이아웃을 누르시면 레이아웃 메뉴가 뜨는데, '1 장의 사진'으로 바꿔줍니다.

 

 

 

6. 텍스트 입력은 레이아웃을 텍스트로 바꾼 뒤, 이런 식으로..

 

너무 진지하게 하지는 마세요. 어차피 스냅스 등에서 새로 입력해야 하니까요!

 

 

7. 이런 방법으로 모든 페이지를 만들어 줍니다. 자신만의 사진과 멘트를 만들어 보세요!

 

 

 

방법을 몰라 못하나? 무슨 내용을 넣을지 애매하니 안하지. 라는 분들께,

견본으로 제가 만들었던 책을 보여드리겠습니다. 가로로 읽으세요.

 

 

 

포토북에 쓰인 멘트는 열심히 오글거리는 것들을 생각했고, 먼저 사진을 모았습니다.

 

사진은 Flickr.com에서 cute, funny, animal등의 검색어로 모았고요,

 

마지막 그림은 자작 그림으로 일부러 좀 어설퍼 보이게 했습니다.

 

사실은 애인의 얼굴 그림도 그려 넣었지만 프라이버시상 삭제했습니다. ^_______^

 

지금은 라면 받침으로 잘 쓰고 있다네요!

 

여러분도 다용도 포토앨범 한번 만들어 보세요. 일주일은 효과 만빵!!!

신고
2 0
Howto

 

 

How to make Tistory skin ..1

 

오늘부터 티스토리 스킨 만들기 강좌를 시작해볼까 합니다.

간단한 2단 스킨을 시작으로, 고급 애니메이션 효과까지 넣어보겠습니다.

따라하고 붙여넣기만으로 멋진 블로그 스킨을 만드는 방법을 익혀보고자 합니다.

 

 

1. 기본지식 - DIV와 CSS?

 

이 페이지를 한번쯤 눌러보시지 않은 분들은 없을거에요.

 

티스토리 사용자라면 누구나 한번쯤 자기만의 스킨을 갖고싶어 할 것입니다.

스킨가이드 페이지를 한번쯤 눌러보시지 않은 분들은 없을거에요.

스킨가이드 페이지에서, 스킨에 대한 간단한 소개가 나오고.. 가장 먼저 만나는 것이 이 그림입니다.

 

 

2단스킨의 기본적인 구조도

 

사실 우리는 지금까지 워드프로세서나 웹에디터등에서 표(table)로 레이아웃을 짜 왔지요.

그래서 웹페이지를 제작하는것의 대세가 div와 css의 조합으로 넘어온 이후에도 div와 css개념이 상당히 생소합니다.

사실 그도 그럴것이, 15년도 더된 dynamic html의 개념이 생겼을 당시의 웹브라우저는 이 표준들을 전혀 지원하지 못했습니다.

울며 겨자먹기로 표를 사용해야 했던 상황이었지요.

사실, 워드프로세서 등에서 레이아웃을 짜는데 있어서 표는 편리한 수단입니다. 그런데 왜 울며 겨자먹기라 하느냐 하면, html에서의 표 지원은 그리 훌륭하지 않기 때문입니다.

 

어쨌든, 가장 먼저 알아야 할 것은 이 div와 css의 개념입니다.

div는 레고 블럭 한조각이라고 생각하시면 됩니다. html에 우리는 div라는 레고 조각들을 배치합니다.

그리고 css에서는 그것에 규칙을 주어 조립하지요.

 

즉, html은 각 레고 조각들이고, css는 조립 설명서입니다. 조립하는사람은 컴퓨터이고요.

백문이 불여일견이라고, 한번 만들어보면서 설명하겠습니다.

 

2. 레이아웃 직접 짜보기

 

 

위 코드를 봐주세요. 우리가 만들 스킨의 html인 skin.html의 소스입니다.

 

 

그리고 이것이 실제로 우리가 사용할 부분이고요. skin.html을 만들어서 브라우저로 봐도 지금은 아무것도 보이지 않습니다.

블록을 만들었으니, 이젠 설계도를 만들 차례입니다.

이제 이것을 배치하고 테두리를 씌워서 실제로 보이게 만들어 보겠습니다.

 

(여기가  style.css를 적용시키는 부분입니다.)

 

새 텍스트 문서를 열어서 다음과 같은 코드를 넣고 style.css로 skin.html과 같은 폴더에 저장해주세요.

 

 

이제 skin.html을 다시 열면 이런 모양이 됩니다. (구분을 위해 일부러 글자를 넣었습니다.)

 

 

html에 우리가 div라는 블록을 만들었다면,  css(스타일시트)라는 설명서를 통해 이렇게 조립하고 모양을 넣은것입니다.

예를 들어 #container (div 이름)의 경우,

 

clear : both; -> 위치(정렬)을 줄넘김시킴

width : 504px; -> 가로 길이를 504픽셀로

border : 1px solid #000; -> 테두리를 1픽셀, 실선, 검정식으로

 

이런 규칙이 적용되어 있습니다.

content에는 이런 규칙이 있고요.

 

float left;                             -> 위치를 왼쪽기준으로 정렬

width 350px;                     -> 가로 길이를 350픽셀로 고정

border : 1px solid #000;   -> 테두리를 1픽셀, 실선, 검정색으로

 

 

어떻게.. 이제 좀 슬슬 이해가 가시는지 모르겠네요.

다음시간에는 이렇게 배치한 div안에 또 다른 div들을 넣어서 티스토리내의 글을 읽는데까지 해보겠습니다.

 

 

 

신고
1 2
블로그 이미지

린스네 집

고양이와 참치