menu

'기록 #01: 컴퓨터'에 해당되는 글 110건

  1. 크롬 브라우저에서 한글 url 인코딩 문제 해결 2018.01.27
  2. "JinH" 개인정보처리방침 2017.02.04
  3. USB 메모리 용량이 줄어들었을 때 2016.11.16
  4. 네모네모 멈뭄미믜 저주가 걸린 글 (118) 2016.06.19
  5. 티스토리 이미지 삽입 세로 길이 맞추기 꿀팁 (6) 2016.06.18
  6. 커스텀 컨텍스트 메뉴 2016.06.16
  7. 안드로이드 토스트 위치 제어 2016.04.19
  8. 안드로이드 이미지뷰에 이미지 src 바꾸기 (1) 2016.04.11
  9. 티스토리 댓글 입력 오류 팝업 개선 2015.08.17
  10. 게시물 중앙에 애드센스 자동출력 (5) 2015.08.15
  11. 페이지 내부 링크로 이동할 때 스크롤을 부드럽게 (5) 2015.08.04
  12. 댓글달기 버튼에 동적 효과 추가 (4) 2015.04.12
  13. jQuery 툴팁 (2) 2015.04.08
  14. css 플립 카드 (1) 2014.10.08
  15. 바이오쇼크 2: 미네르바의 동굴(1) 2014.02.12
  16. 바이오쇼크 2 도전 과제 가이드 (4) 2014.02.10
  17. 11년 동안 기다린 게임 서비스 수준 2013.09.02
  18. 하드디스크 포맷기 (1) 2013.05.25
  19. 모바일 웹앱 제작 후기 2013.03.21
  20. 구문 강조 스크립트 자동 적용 2013.02.26
  21. 2015 수능 디데이 카운터 (1) 2013.02.19
  22. 모스 부호(Morse code) 해석기 (61) 2013.02.16
  23. 2014 수능 디데이 카운터 (9) 2013.02.15
  24. 태그 연습장 2013.02.04
  25. 모스 부호(Morse code) 변환기 (42) 2013.02.04
  26. 짜장면 처음 먹어본 흑인 (2) 2012.10.15
  27. 인터넷 익스플로러 실행 오류 대처법 2012.07.18
  28. 디아3 새로운 위업 공개 (2) 2012.06.28
  29. 디아3 체감 난이도 (3) 2012.05.17
  30. 블록인용구를 말풍선 스타일로 (3) 2012.04.11

문제

  1. 앵커 태그 타겟을 한글 id로 지정.
  2. 한글이 디코딩된 문자열이 타겟으로 바뀌어서 정상적으로 스크롤이 움직이지 않음.

해결

before

var target = this.hash;

after

var target_pre = this.hash;
var target = (target_pre.substring(1, 2) == "%" ? $(decodeURIComponent(target_pre)) : $(target_pre));

짜자잔~

끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

JinH이 개발한 기만의 모스 부호 및 생존 본능 앱은 개인정보를 수집하지 않지만 "플레이 스토어 등록정보" 메뉴에서 개인정보 처리 방침을 요구하여 작성된 내용입니다.




1. 개인정보의 처리 목적 JinH(‘http://jinh.tistory.com/’이하 ‘JinH’) 은(는) 다음의 목적을 위하여 개인정보를 처리하고 있으며, 다음의 목적 이외의 용도로는 이용하지 않습니다.

- 모스 부호를 플래시로 출력하기 위함.

- 목소리를 입력받아 문자로 변환하여 출력하기 위함. (Google STT 엔진 이용)


2. 정보주체의 권리,의무 및 그 행사방법 이용자는 개인정보주체로서 다음과 같은 권리를 행사할 수 있습니다.

  ① 정보주체는 언제든지 다음 각 호의 개인정보 보호 관련 권리를 행사할 수 있습니다.

    1. 앱 삭제



3. 처리하는 개인정보의 항목 작성 


  ① JinH은 다음의 개인정보 항목을 처리하고 있습니다.


1. <모스 부호의 플래시 출력>

- 필수항목 : android.permission.CAMERA

1. <목소리를 입력받아 문자로 변환>

- 필수항목 : android.permission.RECORD_AUDIO



4. 개인정보의 파기 JinH은 원칙적으로 개인정보 처리목적이 달성된 경우에는 지체없이 해당 개인정보를 파기합니다. 파기의 절차, 기한 및 방법은 다음과 같습니다.


- 기능 사용시 개인정보를 개발자가 수집하지 않음.



5. 개인정보의 안전성 확보 조치 JinH은 개인정보보호법 제29조에 따라 다음과 같이 안전성 확보에 필요한 기술적/관리적 및 물리적 조치를 하고 있습니다.


  1. 수집된 사용자의 정보는 Google의 음성인식 서버로 전송될 뿐, 기술적으로 개발자는 접근 불가능함.



6. 개인정보 보호책임자 작성 


① JinH은 개인정보 처리에 관한 업무를 총괄해서 책임지고, 개인정보 처리와 관련한 정보주체의 불만처리 및 피해구제 등을 위하여 아래와 같이 개인정보 보호책임자를 지정하고 있습니다.


▶ 개인정보 보호책임자 

성명 : JinH

직책 : 대표

직급 : 대표

연락처 : jinh@tistory.com



8. 개인정보 처리방침 변경 


1. 이 개인정보처리방침은 시행일로부터 적용되며, 법령 및 방침에 따른 변경내용의 추가, 삭제 및 정정이 있는 경우에는 변경사항의 시행 7일 전부터 공지사항을 통하여 고지할 것입니다.


1. 이 개인정보처리방침은 2011년 2월 3일부터 적용 됩니다.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

USB 메모리로 부팅 디스크를 만들어 쓰다가, 나중에 그냥 저장장치로 쓰려고 보면 용량이 줄어있는 것을 확인 할 수 있다. 이럴 때 용량을 다시 원래대로 늘리려면 cmd를 실행하고 아래처럼 입력하면 된다.

#1: diskpart

Microsoft Windows [Version 10.0.14393] (c) 2016 Microsoft Corporation. All rights reserved. C:\Users\JinH>diskpart

#2: list disk <-- 포맷할 USB가 몇번인지 확인

#3: select disk 3 <-- 포맷할 USB 번호로

Microsoft DiskPart 버전 10.0.14393.0

Copyright (C) 1999-2013 Microsoft Corporation.
컴퓨터: JINH-PC

DISKPART> list disk

  디스크 ###  상태           크기     사용 가능     Dyn  Gpt
  ----------  -------------  -------  ------------  ---  ---
  디스크 0    온라인        119 GB           0 B
  디스크 1    온라인        931 GB           0 B        *
  디스크 2    온라인       1863 GB           0 B
  디스크 3    온라인         15 GB           0 B

DISKPART> select disk 3

3 디스크가 선택한 디스크입니다.

#4: clean

DISKPART> clean Diskpart에서 디스크를 정리했습니다.

#5: create partition primary

DISKPART> create partition primary DiskPart에서 지정한 파티션을 만들었습니다.

#6: format fs=ntfs quick <-- 내컴퓨터 들어가서 USB메모리 더블클릭해서 포맷 해줘도 됨

DISKPART> format fs=ntfs quick

  100 퍼센트 완료

Diskpart가 볼륨을 성곡적으로 포맷했습니다.

DISKPART> exit

Diskpart 마치는 중...

C:\Users\JinH>

끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

담신믄 네모네모 멈뭄미뫄 눈미 마주치고 말맜습니다. 담신믄 미제 네모네모 멈뭄미믜 저주로 돔그란 글자를 칠 수 멊습니다. 멈멈!

저주를 풀고 댓글에 동그란 글자를 써넣는 분에게는 소정의 선물을 드리겠습니다.

끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 이전 댓글 더보기
  2. ㅇㅇ

  3. 000

  4. 마...망대!
    앙대

  5. ㅇㅇㅇ앙응으으아아앙ㅇ

  6. ○○??

  7. ●●???

  8. ㅇㅇㅇㅇㅇ

    Favicon of https://ㅡ 2018.10.22 16:00 신고   link delete reply
  9. ㅁㅁㅁㅁㅁㅁㅁㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ

  10. ㉧ㅣ거까지 했을라나

  11. 동그라미 동그라미 원 °°°

  12. 우와

  13. 이야

  14. 안녕하세요

  15. ㉾리 모두 멈뭄미 저주를 풀のㅓ 봅시다!

  16. 0,o,ο,о,ㅇ,٥,ہ,०,৹,ଠ,ഠ,O,○,〇,◯동글동글

  17. ㅇㅇ

  18. ㅇㅇㅇㅇ

  19. 동그라미 ㅇ •

  20. 앙 기모띠

  21. 유저스크립트로 저주를 풀었습니다!!

사진을 여러장 올릴 때는 세로 길이가 같아야 보기좋음. 그런데 기본 설정은 가로 길이가 같은 거임.

예전엔 이미지들의 세로 길이가 같게 만들었을 때의 각 이미지의 가로 길이를 계산 해주는 코드를 짜서 값을 구한다음에 일일히 이미지 너비를 지정해주는 방법을 썼음. 근데 불편하고 귀찮음.

그래서 자동으로 정렬해주는 방법을 찾을려고 노력함.

일단 티스토리는 <table> 태그를 이용해 한줄짜리 표를 만들어서 여러 이미지를 한 줄에 보여줌. 흠.. 고전적인 방법이군!

암튼 위의 정보를 참고해서 일단 순수 CSS로 이미지 정렬을 시도해봤는데 잘 안 됨.

그으래서 걍 속편하게 자바스크립트로 구현함. 로딩이 좀 느려지겠지만 알게뭐야 요새 컴 발전하는 속도가 빨라서 괜찮을 듯.

이젠 컴퓨터가 알아서 사진 가로 길이를 조절해줌. 크으 자동화시스템에 취한다!

JS

function imgAdjust() {
    $(".article table .imageblock:only-child").parent("td").parent("tr").parent("tbody").parent("table").addClass("imageblock");
    $("table.imageblock").attr({"cellspacing":0});
    $("table.imageblock img").attr("width",null);

    var obj, flex, i, j;                         //.img로 묶인 이미지를 높이에 맞게 정렬
    $("table.imageblock tr").css({"display":"flex"}).each(function(){
        obj = new Array();
        i = $("table.imageblock tr").index(this);
        $(this).children().each(function(){
            obj.push([$(this).children("span").children("img").width(),$(this).children("span").children("img").height()]);
            // console.log(i+"번 값 저장: " + obj[i][0] + ", " + obj[i][1]);
        });
        $(this).children().each(function(){
            j = $("table.imageblock tr:nth(" + i + ") > td").index(this);
            flex = 100 * obj[j][0] * obj[0][1] / obj[j][1];
            // console.log(i+"번 .img의 "+j+"번째 img 정렬: " + flex);
            $(this).css( {"flex" : flex + "%"} );
        });
    });
}

$(window).load(function() {
    imgAdjust();
});

CSS

.article table.imageblock { border-spacing: 0; width:100%;/* for IE */ }	/* 2, 3장의 사진을 넣었을 때 */
.article table.imageblock td { padding: 0 .5em; display: block; }
.article table.imageblock td:first-child { padding-left: 0; }
.article table.imageblock td:last-child { padding-right: 0; }
.article table.imageblock td > .imageblock {width: inherit!important;}

작동 확인 ^^

넘나 멋진 것! 끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 퍄퍄! 엣지랑 파폭에 생기던 오류까정 해결.

  2. IE에서 생기던 오류까지 해결 ^^

  3. 어떻게.. 적용하는지 알수 있을까요?

    • 블로그 관리 페이지에 [HTML/CSS 편집]에서 수정하시면 됩니다.

      CSS는 그대로 붙여넣으면 되고,
      JS는 HTML에 <script></script>태그를 만들어서 그 안에 넣으세요.

      자세한 것은 자바스크립트 적용 등으로 검색하시면 도움이 될 것 같습니다.

      link delete 2017.01.08 17:28 신고 Favicon of https://blog.jinh.kr JinH
  4. HTML은 어느 부분에 넣어야하나여? HEAD 쪽에 올리는 건가요?

    • 네, <head> 태그 안에 넣으면 됩니다.
      그리고 jQuery 라는 라이브러리를 써야하거든요. 아래 코드도 써 넣으세요.
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

      link delete 2017.01.09 04:40 신고 Favicon of https://blog.jinh.kr JinH

컨텍스트 메뉴 = 웹 브라우저에서 마우스 오른쪽 버튼 눌렀을 때 나오는 메뉴

마우스 이벤트의 위치를 읽어서 그 자리에 메뉴를 띄우는 것이 핵심이고, 화면 모서리 부근에서 예외만 잘 처리해주면 멋진 커스텀 컨텍스트 메뉴가 완성!

See the Pen 커스텀 컨텍스트 메뉴4 by JinH (@JinH) on CodePen.


끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

메뉴 아이템에 android:icon 이거랑 app:showAsAction 이 값을 주면 액션바에 아이콘이 나타난다. 이 때 아이콘을 롱터치하면 토스트가 화면 아래쪽 가운데 정렬이 아닌, 아이콘 바로 아래에, 아이콘 가운데에서 왼쪽으로 뻗치는 정렬이 되서 나타난다.

그림으로 표현하면 아래처럼 보이겠지?

Toast

#1: 일반적인 상황

Toast

#2: 액션바의 노란 아이콘을 터치

이거를 액션바 아이콘 말고 다른 뷰를 눌러도 나오도록 메소드를 만듦.

private void Toast_ActionBar(View view, String string) {
    int[] location = new int[2];
    view.getLocationOnScreen(location);
    Point windowSize = new Point();
    getWindowManager().getDefaultDisplay().getSize(windowSize);
    Toast t = Toast.makeText(getApplicationContext(), string, Toast.LENGTH_SHORT);
    t.setGravity(
            Gravity.TOP | Gravity.RIGHT,
            windowSize.x - location[0] - view.getWidth() / 2,
            location[1] + view.getHeight() / 2
    ); 
    t.show();
}

뷰의 절대 위치, 뷰의 크기, 그리고 스크린의 크기를 조합해서 토스트가 쀼려질 위치를 결정함.

이렇게 해서 롱터치 했을 때 나오는 설명은 바로 아래에 토스트로 나오게 만들고, 나머지 알림은 모두 스낵바로 바꿈.

끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

안드로이드 앱의 버튼에 프레임 애니메이션을 넣으려고 시도했던 것에서 시작되었다.

일단 개발자 사이트에 있는 예제에는 아래처럼 배경에다가 애니메이션을 넣는 것으로 되어 있더라.

findViewById(R.id.view).setBackground(getDrawable(R.drawable.background));

근데 아래의 빨간 밑줄... API 레벨 16 이상에서 사용 가능하다고 한다. 내 앱 최소 설정은 14.

...뭐 짜증나지만 코드를 좀 수정했다.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
    findViewById(R.id.view).setBackground(getDrawable(R.drawable.background));
else 
    findViewById(view).setBackgroundDrawable(getDrawable(R.drawable.background));

띠요용! 밑줄을 없엣더니 이번엔 취소선이... 하나를 막으면 다른 하나에서 튀어나오고 점점 코드는 몸집이 불어나는 괴현상이 어김없이 발생. 이건 달리 할 수있는 것이 없어서 //noinspection deprecation 써주고 넘어갔다.

AnimationDrawable a = (AnimationDrawable) $(view).getBackground();
a.setOneShot(true);
a.start();

이러고 위 코드 써주니깐 애니메이션도 잘 되는 것 같았다. 그란데 역시나 오류는 마치 지방간처럼 몰래 숨어있다가 나타나는 법. 멀쩡히 되던 코드도 단말기를 바꾸니까 오류를 뿜어내기 시작함. 예전에 쓰던 전화기가 API 19여서 잘 되나 켜봤더니 역시나 강제종료되버림.

setBackground()랑 setBackgroundDrawable() 둘 다 NoSuchMethodError 가 로그에 찍히는데 원인을 모름(지금도 이유 모름ㅡㅡ)

그래서 고심끝에, 배경말고 이미지 리소스를 이용하면 어떨까하는 묘안을 떠올리게 되고...

((ImageView) findViewById(R.id.view)).setImageDrawable(getDrawable(R.drawable.image));

이렇게 했더니 아예 안 됨.

여기저기 검색해보다 아래처럼 바꿈.

((ImageView) findViewById(R.id.view)).setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), getDrawable(R.drawable.image));

이랬더니 이미지는 바뀜. 근데 프레임애니메이션이 안 됨.

스스로를 질책하며 자괴감에 빠져있던 그때, 알콜성 음료가 뇌에 작용하자 놀랍도록 신비하게 해결책이 보이기 시작!

예전에 이미지 버튼 만들 때 분명 지금 필요한 코드를 썼던 것이 기억남. 바로 Ctrl+F 해서 Image로 검색 돌림. 결과 엄청 많이 나옴;; 하나씩 살펴 봄. 코드 발견함. 적용함.

((ImageView) findViewById(R.id.view)).setImageResource(R.drawable.image);

AnimationDrawable a = (AnimationDrawable) ((ImageView) findViewById(R.id.view)).getDrawable();
a.setOneShot(true);
a.start();

존나 잘 됨...

좀 허탈했지만 그래도 결과물에 만족. 

기념으로 만들었던 애니메이션 중 몇개를 첨부한다.


끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 잘 사용할께요 . 고맙습니다

    조은서 2016.04.13 16:15 신고   link delete reply

문제

티스토리에서 내용을 안 쓰고 댓글 달기 버튼을 누르면, alert('본문을 입력해 주십시오') 팝업이 뜬다. 이유야 어찌 되었든 팝업 창까지 마우스 커서를 끌고 가서 확인 버튼을 누르는 것은 몹시 짜증 나는 일이다.

해결

관리자 페이지의 HTML 편집에서 [##_rp_onclick_submit_##] 치환자를 검색해서 다음과 같이 바꿔준다.

if($('textarea[name=\'comment\']').val() !== ''){
    [##_rp_onclick_submit_##]
} else {
    /* toast('본문을 입력해 주십시오'); */
}

내가 만든 토스트 메시지 함수도 친절히 공개.

function toast(text) {
    $('body').append('<div id="toast_wrap"><span id="toast">' + text + '</span></div>');
    $('#toast_wrap').hide().fadeIn(500, function(){  $('#toast_wrap').delay(1000).fadeOut(500, function(){ $('#toast_wrap').remove(); }); });
}

이렇게 하면 사람의 빡이가 치게 만드는 팝업 창이 없어지고 심신의 안녕이 찾아와 숙면이를 이룰 수 있게 된다.

끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

어떤 원리냐면, 게시물 높이 계산한 다음에 반복문 돌려서 게시물 가운데랑 가장 근접한 요소를 찾는 거임. 그 다음 거기에 광고 끼워넣음.

몇 가지 예외가 있는데, 일단 짧은 글에는 중간에 광고 안 나옴. 왜냐? 내용보다 광고가 자리를 더 많이 차지하면 모양새 빠지니까. 그리고 다른 예외로 글 중 table 태그가 있을 경우 표 중간에 광고 나오게 함. 이유는 요즘 싸질러놓은 게시물 중에 표 들어간게 많아서.

그리고 원래는 스킨에 애드센스 코드 넣어둔 다음에 jQuery의 after나 prepend 같은 메소드로 자리만 샤샤샥 옮기려고 했었는데, 그리하면 광고가 빈칸으로 출력... 아마 html 복제 후 원본을 삭제하는 메커니즘인 것 같은데, 그 순간에 페이지 허용 광고 개수 초과해서 빈칸이 나오는 게 아닐까? 어쩔 수 없이 스크립트 내에 애드센스 코드를 삽입해서 한번만 불러오도록 했다.

완성된 코드의 늠름한 자태를 아래에서 감상하시라!

function ad_article_middle() { //on test! var AD_CODE = '<div class="ad_article_middle">'+ 'ADSENS CODE HERE!'+ '</div>'; if ($('.article').height() >= 2000 && $('.article').children().length >= 20) { for (i = 1; i <= $('.article').children().length; i++) { if ($('.article > *:nth-child(' + i + ')').offset().top - $('.article').offset().top > $('.article').height() / 2) { if ($('.article > *')[i - 2].tagName !== "TABLE") { $('.article > *:nth-child(' + i + ')').after(AD_CODE); // console.log("normal, i=" + i + ", " + $('.article > *')[i - 1].tagName); } else { for (j = 1; j <= $('.article > *:nth-child(' + (i - 1) + ') tr').length; j++) { if ($('.article > *:nth-child(' + (i - 1) + ') tr:nth-child(' + j + ')').offset().top - $('.article').offset().top > $('.article').height() / 2) { $('.article > *:nth-child(' + (i - 1) + ') tr:nth-child(' + j + ')') .after('<tr><td colspan="' + $('.article > *:nth-child(' + (i - 1) + ') tr:nth-child(' + j + ') > td').length + '">' + AD_CODE + '</td></tr>'); break; } } // console.log("table!, i=" + i + ", " + $('.article > *:nth-child(' + (i - 1) + ') tr').length); } break; } } } else { // console.log("no middle ad"); } }

흠 좀 멋지긴 한데, 이딴 쓸데없는 기능을 자꾸 추가해서 점점 로딩이 길어지는 것 같기도...

끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 블로그에 적용해보려 하는데 잘 안되네요

    따로 js 파일로 저장해서 티스토리에 업로드 후 블로그 head 부분에서 불러와보면 아무런 반응이 없고

    /body 위에 script로 묶어서 넣었더니 코드가 그대로 다 붙어서 블로그 하단에 표시만 되네요

    • 왜냐하면 블로그 게시물 로딩이 끝나기 전에 코드가 실행되어 버리기 때문입니다.

      <body> 태그에 onload 이벤트로 해결하거나,

      $(function() { /*여기에 코드 집어넣어서 해결하시면 될 듯*/ });

      link delete 2015.08.16 22:57 신고 Favicon of https://blog.jinh.kr JinH
  2. 말씀하신대로 <body onload="ad_article_middle()"> 이벤트를 사용해봤는데도 적용이 안되네요
    뭐가 문제일까요?

    추가로 말씀하신 $(function()은 js파일안에 function을 변경하면 되는건가요? 이쪽으로 전공이 아니라서 잘 모르겠네요 ㅠㅠ

    • $(function() { ad_article_middle(); }); ← 이런 식으로 js파일 안에서 쓰면 되구요, onload="" 랑 같은 기능이에요.
      그리고, <body onload="ad_article_middle();"> ← 이렇게 하면 돼야하는데... 뭐가 문제인지 저도 잘 모르겠네요...

      link delete 2015.08.17 00:55 신고 Favicon of https://blog.jinh.kr JinH
  3. 본문 덮는 div class 만들고 스크립트 좀 수정해봐도 안되네요 ㅠㅠ
    그래도 신경써주셔서 감사합니다~

페이지 내부의 id를 타겟으로 앵커<a> 태그를 심으면 id를 가지고 있는 요소가 창의 맨 윗부분으로 위치하도록 스크롤이 뿅 하고 이동하게 된다.

바로 거기에서 문제가 시작된다. 이 <a> 태그가 도입된 지 십수 년이 되도록 단 한 명의 브라우저 개발자도 스무드 스크롤링 등의 기능을 적용해주지 않았던 것이다. 분노를 참지 못한 나는 결국 직접 코딩을 시작하는데...

#1 문제 파악

문제점은 크게 세 가지가 있다.

  1. 앵커가 문서 내부에 있는 곳을 가리키는지, 아니면 외부를 가리키는지 구분되지 않음.
  2. 링크 누름 → 해당 요소로 갑자기 뿅! → 누른 사람들 어리둥절.
  3. 링크 누름 → 해당 요소가 꼭대기에 뙇! → 블로그 상단 정보창이 내려와서 요소 가림.

#2 문제 해결

#2-1

일단 문서 내부를 가리키는 앵커일 경우 아이콘으로 표시. css에 몇 줄 추가해주면 해결!

.article a[href^="#"]:before    { font: 1.333em 'icon'; content: "\f293"; }
.article a:not([href*="jinh.tistory.com"]):not([href^="#"]):not([href^="/"]):before    { font: 1em 'icon'; content: "\f35b"; }

그리고 Material Design IconsMaterial Design Iconic Font 등 웹폰트에다 아이콘 박아넣은 개꿀 라이브러리 줍줍 후 치덕치덕 발라줌.

그럼 이렇게 나옴: [문서 내부], [블로그 내부], [블로그 외부] 이야 멋스럽다!

#2-2, 2-3

여기서 문서 내부로 이동하는 링크를 발견한 사람들의 심리 상태를 묘사해본다.

(시작)

[링크 발견]

['아앗 페이지 내부의 유용한 곳으로 이동하는 링크가??']

<클릭>

[문서 내부의 어딘가로 순간 이동]

['띠용! 여기가 어디지 내가 뭘 눌렀더라???']

[혼란, 공황, 두려움]

[잠시 후 냉정 찾음]

['아 내가 찾는 내용이 창의 최상단에 있었구나!']

(끝)

흠... 이 과정을 아래에 묘사한 간결한 의식의 흐름으로 바꾸는 것이 목표.

(시작)

[링크 발견]

['아앗 페이지 내부의 유용한 곳으로 이동하는 링크가??']

<클릭>

['아앗 문서 내부의 어딘가로 이동하... 호옹이! 이렇게 유용한 내용으로 연결되다니!']

(끝)

일단, 부드럽게 스크롤을 이동시키는 코드를 추가.

function scroll_smooth() { 
    $("a[href^='#']").click(function(event){
        event.preventDefault();                                           //기본으로 실행되는 기능을 막고,
        $('body').animate({scrollTop:$(this.hash).offset().top}, 500);    //jquery animate로 스크롤 이동
    }
}
$(function() {    //문서 로딩이 끝나면 실행
    scroll_smooth();
});

위 코드는 성공적으로 동작했다. 그러나 내 블로그는 스크롤을 어느 정도 올리면 상단에 정보창이 튀어나오게 되어있는데, 이동된 요소를 덮어버리기 때문에 어리둥절한 사용자가 호흡곤란 증세를 나타내다가 결국 다이어트 계획마저 잊어버리고 야식으로 치킨을 시켜먹기로 결정해버리는 안타까운 상황까지 발전할 수도 있다.

그래서 코드는 다음과 같이 수정되었다.

function scroll_smooth() { 
    $("a[href^='#']").click(function(event){
        event.preventDefault();
        if($(this.hash).offset().top < $('body').scrollTop() - 600){                                 //타켓 위치가 현 스크롤 위치보다 높으면
            $('body').animate({scrollTop:$(this.hash).offset().top - $('header').height()}, 500);    //헤더만큼 밑으로 내려줌
        } else ​{
            $('body').animate({scrollTop:$(this.hash).offset().top}, 500);
    }
}//이하 생략

막상 만들고 나니깐, 애초에 요소를 창 맨 꼭대기에다 표시할 이유가 전혀 없다는 생각이 들었다. 그냥 마우스 포인터 있는 자리로 이동시키면 되잖아? 그래서 또 수정.

function scroll_smooth() { 
    $("a[href^='#']").click(function(event){
        event.preventDefault();
        if($(this.hash).offset().top < $('body').scrollTop() - 600 && event.pageY - $('body').scrollTop() < $('header').height()){
            $('body').animate({scrollTop:$(this.hash).offset().top - $('header').height()}, 500);    //얘는 예외로 두고
        } else ​{                                                                                     //아랫놈을 마우스 포인터 위치로 이동시키도록 함
            $('body').animate({scrollTop:$(this.hash).offset().top - event.pageY + $('body').scrollTop() + $(this.hash).height() / 2}, 500)
    }
}//이하 생략

완성된 코드 돌려보니 개멋있음... (짝짝짝)

근데... 뭔가 부족함을 느낀 나는 결국... 타겟 요소를 색상으로 강조해줘야겠다는 아이디어를 생각해 내고야 말았다.

        function bg_change(color, time){
                $(this.hash).animate({"background-color":color}, time);
        }

이런 함수를 만들긴 했는데, 여기서 또 문제 발생! 문제를 하나 해결하면 다른 문제가 두 개 발생한다는 코딩의 법칙 몸소 체험 중...

문제 1: jQuery로는 배경색을 애니메이션으로 못 만든다. → jQuery UI 혹은 css의 transition 값으로 해결.

문제 2: <table> 의 자식 요소인 <tr> 태그는 background-color 가 적용되지 않는다. → 태그 이름 읽어서 tr일 때 예외 적용.

어찌어찌 해서 완성된 코드는 다음과 같다.

function scroll_smooth() {
    $("a[href^='#']").click(function(event){
        event.preventDefault();
        
        var target = $(this.hash);
        var target_bg;
        if (target[0].tagName == "TR"){
            target_bg = $(this.hash).children("td").css("background-color");
        } else {
            target_bg = $(this.hash).css("background-color");
        }
        function bg_change(color, time){
            if (target[0].tagName == "TR"){
                target.children("td").css({"background-color":color,"transition":time});
            }else{
                target.css({"background-color":color,"transition":time});
            }
        }
        
        if($(this.hash).offset().top < $('body').scrollTop() - 600 && event.pageY - $('body').scrollTop() < $('header').height()){
            $('body').animate({scrollTop:$(this.hash).offset().top - $('header').height()}, 500, function(){bg_change(target_bg,".75s");});
        }else{
            $('body').animate({scrollTop:$(this.hash).offset().top - event.pageY + $('body').scrollTop() + $(this.hash).height() / 2}, 500, function() {bg_change(target_bg,".75s");});
        }
        
        bg_change("#ffeb3b",".25s");
    });
}

 

#3 결과

테스트 앵커를 눌러보자. 혹은, 위 코드가 적극적으로 적용된 페이지 "여초 용어 정리" 게시물에서 확인하자. 

끝.

붙임 #1: 추가 사항

코드가 파이어폭스에서 안 된다는 댓글을 보고 기분이 다운됐었지만, 해결 후 다시 기분 좋아짐 ㅎㅎ. 게다가 위치 이동 후 더블 클릭하면 다시 그 앵커 자리로 되돌아가는 코드까지 추가 시킴. 완성된 코드는 아래에...

function scroll_smooth() {
    $("a[href^='#']").click(function(event){
        event.preventDefault();
        
        var target = $(this.hash);
        var target_reverse = $(this);
        var target_bg;
        var reversible = true;
        
        function bg_change(t, color, time){
            if (t[0].tagName == "TR"){
                t.children("td").css({"background-color":color,"transition":time});
            }else{
                t.css({"background-color":color,"transition":time});
            }
        }
        
        if (document.height === null) {
            pageYOffset = document.documentElement.scrollTop;
        }
        function scroll(target, event){
            if (target[0].tagName == "TR"){
                target_bg = target.children("td").css("background-color");
            } else {
                target_bg = target.css("background-color");
            }
            if(target.offset().top < pageYOffset - 600 && event.pageY - pageYOffset < $('header').height()){
                target_position = target.offset().top - $('header').height();
            }else{
                target_position = target.offset().top - event.pageY + pageYOffset+ target.height() / 2;
            }
            $('html, body').animate({scrollTop:target_position}, 500, function() {
                bg_change(target, target_bg,".75s");
            });
        }
        
        scroll(target, event);
        bg_change(target, "#ffeb3b",".25s");
        toast("원래 자리로 가려면 더블클릭");
        
        document.ondblclick = function(event){
            if(reversible){
                scroll(target_reverse, event);
                bg_change(target_reverse, "#ffeb3b",".25s");
                reversible = false;
            }
        };
    });
}

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 블로그 잘 보고있습니다.
    이번글에서 잘 되는지 피드백이 필요할듯해서 댓글남겨봅니다.

    파이어폭스 39.0 버전에서 테스트해봤는데
    맞는 동작이라면 해당항목으로 스크롤을 해야되는게 아닌가 싶어서요
    스크롤은 안하고 배경색은 바뀌네요.
    콘트롤+F5로 캐쉬를 비우고 다시해봐도 스크롤은 안되네요

    ㅁ? 2015.08.04 21:11 신고   link delete reply
    • 정말이네요... 크롬에서는 잘 되는데, 왜 이런 걸까요... 시무룩
      -----------------------
      해결했답니다^^ 뿌듯!

      link delete 2015.08.04 22:31 신고 Favicon of https://blog.jinh.kr JinH
  2. 파이어폭스에서 작동이 안 된 원인은 다음과 같습니다.

    1. 크롬은 현재 스크롤 위치를 <body> 기준으로 잡는다.
    2. 파폭은 현재 스크롤 위치를 <html> 기준으로 잡는다.

    ---------------------------

    따라서 해결법은 다음과 같습니다.

    1.
    "$('body').animate({scrollTop:..." 부분을
    "$('html, body').animate({scrollTop:..." 으로 수정한다.

    2.
    $('body').scrollTop() 값을 $('html, body').scrollTop() 으로 수정하면 역으로 크롬 먹통. (항상 0으로 반환) 그러므로,
    pageYOffset 값을 이용한다. 해당 값이 null인 익스플로러를 지원하기 위해,
    if (document.height === null) {
       pageYOffset = document.documentElement.scrollTop;
    }
    코드를 추가한다.

    끝!

  3. 잘되네요 ^^
    고생하셨습니다 ㅎㅎ

    ㅁ? 2015.08.05 17:12 신고   link delete reply
  4. 대단합니다 ㄷㄷㄷㄷ

    ㅎㄷㄷ 2018.01.30 14:40 신고   link delete reply

See the Pen Submitting animation by JinH (@JinH) on CodePen.

티스토리 블로그에서는 댓글달기 버튼을 누르면 잠시 딜레이 후 뿅하고 댓글이 생겨난 게 화면에 보이게 되는데, 버튼을 누르고 난 뒤 서버랑 통신하는 시간동안 화면에 아무런 표시가 없기 때문에 성질급한 방문객들이 버튼을 연타하는 사태가 발생한다. 그 결과 똑같은 댓글이 여러개 생성되는 문제가 있었다.

이걸 해결하기 위해 버튼을 누른 직후 화면에 시각적 효과를 줘서 '뭔가 처리 중인게 틀림없다'라는 느낌을 주고자 여러가지 방안을 생각해 봤는데...

  1. 클릭 후 버튼에 스피너 표시
  2. 버튼 주위에 진행막대 표시
  3. 버튼을 진행바처럼 보이도록 변경

다 만들어보니 3번이 멋지길래 그걸로 적용했다. 암튼 내가 만들었지만 개쩌는 듯.

근데 습관적으로 버튼을 더블클릭하는 방문객들한테는 무용지물이라는 단점이 있다...

끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 오 좋은내용 감사합니다.
    블로그에 잘 적용하였습니다.

  2. 굿

    익명289 2016.03.05 15:46 신고   link delete reply
  3. this is dope

    fromthestates 2016.06.05 20:53 신고   link delete reply
  4. zz

    익명51 2016.11.11 22:01 신고   link delete reply

HTML의 title 속성에 값을 넣으면 브라우저마다 다른 모양으로 출력되는데, 그게 꼴보기 싫기도 하고... 특히 커서를 올리고 난 뒤 1초 정도 지연된 후 툴팁이 뜨는 게 싫었다.

script

$('[title]').attr({ // title 속성 값을 data-title 이라는 사용자 속성에 넣음. 'data-title': function() { return this.title; }, 'title': null // title 속성은 제거해야 브라우저 자체 툴팁이 안 나오겠지? }); $('body').append('<div id="tooltip">tooltip</div>'); // 툴팁을 표시할 요소를 만듦. 원래는 CSS의 :before를 응용해서 만들까 했는데, $('[data-title]').each(function(index) { // 위치정렬이랑 크기조절이 힘들어서 결국 스크립트로 만듦. $('[data-title]:eq(' + index + ')').hover(function() { $('#tooltip').text(function() { return $('[data-title]:eq(' + index + ')').attr('data-title') // 까다로운 코딩구간도 개꿀 반복문인 each를 써서 개쉽게 문제 해결. }).css({ 'visibility': 'visible', 'opacity': 1, 'top': function() { return $('[data-title]:eq(' + index + ')').offset().top - $(this).outerHeight() - 12 + 'px'; }, 'left': function() { return $('[data-title]:eq(' + index + ')').offset().left + ($('[data-title]:eq(' + index + ')').outerWidth() - $('#tooltip').outerWidth()) / 2 + 'px'; } }); }, function() { $('#tooltip').css({ 'visibility': 'hidden', 'opacity': 0 }); }); });

css

/* 그리고 나머지 고정된 스타일은 CSS로 대충 만듦 */ #tooltip { color: #fff; position: absolute; top: 0; visibility: hidden; opacity: 0; background: #212121; transition: 0.25s opacity; z-index: 2; padding: 1ex; border-radius: 3px; max-width: 400px; } #tooltip:before { border-color: #212121 transparent transparent transparent; border-width: 1ex 1ex 0 1ex; border-style: solid; content: " "; position: absolute; left: calc(50% - .5em); bottom: -.9ex; }

이 코드를 짠 장본인은 아름다운 툴팁의 모습에 감탄하여 감동의 눈물을 흘렸다고 한다. ( ← 여기에 마우스 커서를 올려보자 )

끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. ㅌㅊㅍㅌㅊㅍ

    익명490 2015.05.18 23:37 신고   link delete reply
  2. 내용 감사합니다~

    익명284 2015.06.07 08:22 신고   link delete reply

HTML

<div class="card_div"> <div class="card"> <div class="front"> <p>앞면</p> </div> <div class="back"> <p>뒷면</p> </div> </div> </div>

CSS

.card_div:hover .card, .card_div.hover .card { transform: rotateY(180deg); } .card { transition: .6s; transform-style: preserve-3d; transform-origin: 100% 50% 0; position: relative; } .front, .back { backface-visibility: hidden; bottom: 0; left: 0; width: 100%; } .front { z-index: 2; transform: rotateY(0deg); } .back { transform: rotateX(-180deg); position: absolute; } .card_div:hover .card { transform: rotateX(180deg); }

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 비밀댓글입니다

    2014.10.08 20:59   link delete reply

본격 바이오쇼크 2의 DLC 미네르바의 동굴(Minerva's Den) 플레이. 발변역 이지만 하는 데까지는 해 봄.

DLC를 실행하면 미네르바의 상징인 부엉이가 기록 테이프를 쥐고있는 모습이 나타난다. 지혜의 여신인 미네르바는 랩처의 전산 시스템을 상징하고 있음.

프롤로그

1968년 랩처.

리드 왈(Reed Wahl): 실험체 시그마가 미네그바의 동굴로 오고있다! 사색가(The Thinker)에게 가게 둬서는 안 돼! 통로를 폭파시켜!

특유의 우우웅 거리는 소리를 내면서 미네르바의 동굴로 향하는 한 명의 빅 대디. 어디선가 리드 왈의 무전 메시지가 들려온다. 그 직후 보안 로봇이 로켓을 발사해 통로가 폭발하면서, 빅 대디는 바닷속으로 가라앉는다. 프롤로그 끝.

미네르바의 동굴

얼마뒤. 정신을 차린 빅 대디는 앞유리에 붙은 불가사리를 떼어내고, 몸을 덮고있는 구조물도 밀어내서 치운다. 그런데 손에 적힌 문자는 델타(Δ)가 아닌 시그마(Σ)였다!

이윽고 자신을 찰스 밀턴 포터(Charles Milton Porter)라 소개하는 남자의 무전 교신이 들려온다.

찰스 밀턴 포터: 여보시오? 자네가... 시그마인가? 내 말 들리나? 내 이름은 포터라 하네. 찰스 밀턴 포터. 테넨바움 박사가 말하기를 사색가가 있는 곳 까지 가서 랩처를 탈출하는 걸 도와 주러 왔다고 하더군. 쉽게 되지는 않을 걸세, 그래도 아무것도 안 하는 것 보다야 낫겠지. 일단 자네는 기밀 출입구를 통해 들어가게.

알고보니 빅 대디는 델타가 아니라 다른 알파 시리즈인 시그마였다. 시리즈 이전 주인공들이 그러하듯 무엇에 홀린 듯 무전 속 목소리가 시키는데로 고분고분 따르는 호구 시그마. 벌써 저 멀리 미네르바의 동굴 입구가 보이기 시작한다.

바닷속 민달팽이를 씹어 먹으며 아담 갈증을 씻어낸 뒤 미네르바의 동굴로 향한다.

기밀 출입구를 통해 미네르바의 동굴로 들어온 시그마. 그곳은 지금으로 치면 IT 특화 단지 같은 곳이였다. 온통 전선들과 보안 장치들이 가득 했으며, 꽤나 오랫동안 방치된듯 곳곳에서 불꽃이 튀고 있었다. 입구 왼편의 방에서 음성 일지를 발견하고 켜보는 시그마.

앤드류 라이언 - 당신도 사슬에 연결되었소

포터 씨. 먼저 랩처 중앙 전산(Rapture Central Computing)을 설립한 것에 대해 축하해도 되겠소? 위대한 사슬이 맞잡은 두 손 위에서 이제 막 강하게 엮이기 시작했군. 나는 당신과 내가 랩처를 같은 방향으로 끌어나갈 것이라 믿소.

랩터 중앙 전산을 설립한 포터에게 라이언이 보낸 음성 메시지였다. 그놈의 위대한 사슬 타령은 여기서도 계속된다.

로비에는 안내원 로봇이 있는데 주위에 낙서와 알 수 없는 수식들이 휘갈겨져 있다. 미치광이가 이곳을 지배하고 있는 것이 틀림 없다!

"미네르바의 동굴 ~랩처 기술의 중심~ / 맥클렌던 로봇 공학 / 랩처 중앙 전산 / 공기 역학 기록 보관소"

미네르바의 동굴은 위의 세 부분으로 나뉘는데 로비 벽면에 바이오쇼크 특유의 광고물들이 잔뜩 붙어 있다.

찰스 밀턴 포터: 미네르바의 동굴은 얼마 전부터 랩처에서 통행이 단절됬네, 그렇지만 유전자 변형은 여기서도 발생했지. 긴장을 풀지 말게. 동굴은 정전된 상태지만, 일단 자네가 지역 전력 계전기를 초기화시면 내가 그쪽으로 전기를 보내 줄 수 있을 걸세.

안전한 곳에 숨어서 위험한 일을 떠맡기는 포터를 위해 노비처럼 임무를 수행하는 시그마 찡... 포터의 요구대로 불빛 하나 없는 건물 안으로 들어간다.

가운데 시커먼 구조물은 로뎅의 생각하는 사람 동상이다. 랩처 중앙 전산 최고의 발명품, 일명 사색가를 상징하는 것. 그 밑에 "리드 왈의 소유물"이라고 써놓은 것을 보니 틀림없이 미치광이는 리드 왈 네놈이렸다! 프롤로그에서 미네르바의 동굴로 가는 수중 통로를 폭파시킨 것도 리드 왈이였다. 랩처 중앙 전산의 공동 설립자였던 그는 랩처 몰락 이후 미쳐버린 채 이곳을 지키고 있는 것이다.

리드 왈: 미네르바의 동굴로 굴러들어온 것 좀 보게. 포터의 새로운 장난감인가? 그 친구는 사색가를 자신을 위해 사용하고 싶어했지. 아, 그렇지만 친구, 자네도 알다시피, 장치는 를 선택했지.

포터의 신상 장난감이냐는 왈의 일침. 정신은 나간 놈이지만 아직 개념은 남아있는 듯.

찰스 밀턴 포터: 리드 왈... 나와 같이 랩처 중앙 컴퓨터를 만들었지. 그 욕심많은 개자식이 날 밀어낸 것도 몇 년 전 일일세. 스플라이서에, 보안 장치까지... 지금의 미네르바의 동굴을 갈 데까지 가게 만든 인물이네.

왈이야말로 미네르바의 동굴을 이꼴로 만든 놈이라는 걸 강조하며 응수하는 포터.

리드 왈: 생각해 봐, 시그마. 자네는 포터를 같은 편이라고 생각하겠지. 하지만 아니야. 사색가는 알고있네.

생각하는 사람 동상이 있는 곳 구석에 숨겨진 음성 일지 발견.

리드 왈 - 사색가의 잠재력

포터와 나는 동업자이다. 그렇지만... 그 친구는 장치를 헛되이 쓰고 있다. 휴식 시간에 나는 장치로 야구 경기의 결과를 예측해봤다. 그리고 놀랄정도로 정확한 결과를 얻었다. 이 공식을 랩처의 시장에 적용해 본다면? 이건 돈이 저절로 생기는 지갑이야. 하지만 포터는... 죽은 제 아내의 기록을 입력하고 있다고 들었다. 사색가를 '사람'으로 만들고 싶어하는 멍청이라니. 그 완벽한 장치를 그렇게 한심하게 쓸 수 있는지는 상상도 못했다.

수십 년 전에 야구 경기를 정확하게 예측해버린 사색가의 클라스를 생각해 보자. 내일 날씨도 제대로 못 맞추는 기상청 슈퍼 컴퓨터와 비교한다면 엄청난 오버 테크놀러지가 아닐 수 없다.

오랜 어둠 속 생활으로 눈이 퇴화하고 다른 감각이라도 사용하는 듯 사방팔방에서 자유자재로 공격하는 스플라이서들은 드릴로 주물러주고, 계단을 올라가 죽은 랜서 빅 대디의 이온 레이저를 챙김. 첨단 기술이 집약된 랩처 중에서도 공돌이들을 갈아 만든 미네르바의 동굴에서는 빅 대디가 이온 레이저를 들고 다닙니다!

히-익! 제어판을 조작하면 갑자기 거미 스플라이서가 등장. 근데 특이하게도 실험체 시그마는 바이오쇼크 시리즈 중 유일하게 처음부터 플라스미드를 사용할 수 있다. 염력 플라스미드를 가지고 시작함.

찰스 밀턴 포터: 전력이 돌아왔군! 이제 좀 살겠지, 그래. 행정부에 있는 내 사무실로 가게. 자네게 필요할만한 것들을 좀 가져다 놨거든. 어서 가게나!

"사무실로 가게, 빨리, 당장."

대꾸 한 번 못하고 굽신 거리며 시키는 대로 하는 짠내나는 시그마 찡.

메인 홀에서 전투를 끝내고 안으로 들어가는 길에 포터와 왈의 사진이 큼지막하게 붙어있다. 포터 사진에 배신자라고 적어놓음.

랩처 중앙 전산 도착. 왼쪽의 행정부로 입갤... 하기 전에 카운터 밑에 남겨둔 음성 일지 발견. 재생.

찰스 밀턴 포터 - 사색가

라이언 씨에게 고용되어 도시 전체를 재대로 돌아가게 할 전산 장치, 즉 랩처 제어 정보 해석 망을 설계했다. 사람들은 "사색가"라고 줄여서 부르더군. 우린 생각의 속도만큼 빠르게 정보를 처리하는 중앙 처리 장치를 위해 아담까지 동력원으로 사용했다. 다시 말하자면, 그건 바로... 우리를 생각하면 된다. 독립적인 추론 연산기, 마침내 장치가 스스로... 생각하게 되었다. 튜링이 지금 나를 볼 수 있었다면...

튜링은 앨런 튜링을 말하는 듯?

통로 마다 걸린 랩처 중앙 전산의 광고들. "랩쳐의 뇌", "로뎅의 생각하는 사람을 단돈 5 달러에 구경하세요"

천공 카드에다가 프로그래밍하던 기술력 만으로 야구 경기 예측하는 슈퍼 컴퓨터 만든 포터 성님 ㅎㄷㄷ

전산 특화 지구 답게 보안 장치 더럽게 많음. 보안 로봇이 총알 뿐만 아니라 이온 레이저, 전기 충격으로 공격한다.

사무실로 가는 길에 로봇 청소기 찡이 보인다.

"청소가 / 저절로 / 나가있는 동안에 / 맥클렌던 로봇 공학 개발"

찰스 밀턴 포터: 이 로봇 청소기들은 고장날 때까지 온갖 것을은 빨아들이지. 안을 열어 보면 자네가 유용하게 쓸만할 것들을 찾을 수도 있을 걸세.

쓰레기 수집 / Garbage Collection

미네르바의 동굴에 있는 10 개의 로봇 청소기를 모두 파괴했습니다.

유용한 물건도 얻고 업적도 깰 겸 보는데로 박살내 주도록 하자.

길을 따라 포터의 사무실 앞까지 도착하면 정작 문이 잠겨있음... 빨리 오라 할 때는 언제고 이게 뭐하자는 짓?

찰스 밀턴 포터: 저 망할 문이 또 고장인가? 여기 어디에 분명 그게 있을 텐데... 유지 보수 장비말이야. 내가 행정부에 있는 기관실을 확인해보지.

유지 장비...라고 쓰고 해킹 도구라고 읽는 장치를 찾아 떠나는 시그마. 일단 휴게실로 들어간다.

리드 왈은 유전자 강화제를 물처럼 퍼마신 모양이다.

어딜 가나 전자 공학 장비들과 술들로 가득. 1 공학자 + 7 알콜 + 6 야근 = 1 기술 개발.

휴게실 지하에서 브리짓 테넌바움의 음성 일지 등장. 아주 그냥 안 나타나는 곳이 없구만!

브리짓 테넨바움 - 아담 증후군의 역반응

아담은 착취로 얻는 물질이다. 한 번 노출되면 효과를 유지하기 위해 지속적으로 사용해야만 한다. 그렇지 않으면, 사용자는 서서히 미쳐가게 된다. 작은 아이들을 억압에서 풀어주는 플라스미드를 내가 거의 완성했지만, 아직 제한적으로만 작용한다. 뱃속에 민달팽이가 들어있는 아이들에게만 효과가 있다. 안타깝게도 성인 스플라이서나 빅 대디에게는 부작용이 나타난다. 하지만 만약에 정신과 육체의 타락이 가역적이라면, 그래서 아담 증후군이 치료될 수 있다면, 그렇다면 그들의 공격성도 사라질 수 있을까...

보아하니 아직도 치료제 개발이 덜 된 모양.

휴게실에는 필요한 도구가 없었다. 회의실로 향하는 시그마.

바닥에 시체가 음성 일지 안고 있고 시계에는 "사색가는 알고있다" 라고 씌여있음. 소오름;;

리드 왈 - 예측 방정식

사색가는 내게 너무 많은 것을 보여주었다. 이전까지 나는... 편협하게 생각했다. 야구나 주식, 푼돈 깨나 만질 생각이나 했었지. 하! 숫자는 모든것에... 네 놈들, 나, 유전 형질에서 은하계까지 이르는 것의 운명에 관여하는 예측 알고리즘이 그 안에 숨겨져있다. 걷잡을 수 없어. 사색가는 모든 것을 결정할 순수한 방정식을 만들어내기 위해 태어날 운명이였던 거야. 전에는 내가 진짜 목적을 알고 있다고 생각했다. 포터가 멍청이라고 생각했지. 이제는 알아, 나는 내내 멍청이였던 거야.

포터를 쫒아낸 뒤, 예측 방정식이라는 것 때문에 미쳐버린 것을 알 수 있다. 그러나 현실은 모든 것을 알아내기는 커녕 시그마의 출현도 예측 못 함.

회의실 지하로 향하는 길목에 포스터가 하나 걸려 있다. "최고, 데 라 프랑테 도구" 바이오쇼크 개발진 중 한 명의 이름을 딴 도구 회사 만들어놨고, 모델 손에 1 의 근접무기인 렌치 들려있음.

맙소사! 갓네르바의 동굴에서는 원거리 해킹 도구가 디스펜서에서 그냥 나옴! 나중에 보면 이브 주사약도 그냥 디스펜서에서 막 나옴. IT 기업 복지 수준 보소.

찰스 밀턴 포터: 저 해킹 도구가 유용하게 사용될 걸세. 내 사무실로 돌아가게.

리드 왈: 미네르바의 동굴은 내 거야! 네 놈이 사색가로 가는 길을 뚫을 수 있을 것 같나? (웃음) 어서 맘껏 해 보시게.

왜 리드 왈이 주인공을 못살게 구는 지 모르겠음. 사색가 좀 같이 쓰면 닳아 없어지나... 그냥 미친 놈이라서 그런가? 어쨌거나 지하에 해킹 도구를 챙겨서 포터 사무실에 깨진 유리창을 통해 원거리 해킹으로 문 따고 들어감.

찰스 밀턴 포터: 왈의 스플라이서들이 내 사무실로 들어오진 못했군, 사색가의 보안에 감사해야겠어. 지금 바로 자네에게 최고 등급 권한을 주겠네... 알겠나? 정밀 검사 시작.

사색가: 검사 중. 명칭... 시그마. 들어오십시오.

갑작스레 사색가의 무선 메시지 들림! 친절하게 문까지 열어 줌. 드디어 포터의 사무실에 입개르.

책상엔 앨런 튜링이 같이 일해보자고 보낸 전보와 죽은 아내의 사진이, 구석에는 컴퓨터의 아버지 찰스 배비지의 이름을 딴 고양이가 있다.

찰스 밀턴 포터 - 잿더미 밖에 아무것도

런던에서의 첫 해 동안, 튜링과 같이 일했다... 펄은 거의 볼 시간이 없었다. 낮이고 밤이고 정부 기관에서, 에니그마의 암호를 해독하는데에 시간을 보냈다. 펄은 내가 그녀에게 신경을 못 쓴것에 대해 꽤나 화가났다! 그러던 어느날 밤, 그 정신없던 곳에서 빠져 나왔다... 그리고 공습이 쏟아붓기 시작했다. 다음날 아침 내가 집에 갔을 땐... 내가 마지막으로 그녀를 봤던 곳엔 잿더미밖에 아무 것도 없었다. 쟀더미 밖에 아무것도...

전보 위에 있던 음성 일지에는 포터의 슬픈 사연이 담겨있었다.

찰스 밀턴 포터: 미안하지만 자네를 만나러 직접 가지는 못해. 생각하는 자가 작동 한다고는 해도 말이야, 여기 돌아가는 꼴을 자네 눈으로 봤잖나. 자네가 컴퓨터 핵에 가서 생각하는 자의 기계어를 출력해주게. 핵 접속기는 제어실에 있네. 거기 내 책상 아래쪽의 사물함에 제어 접속 천공카드를 숨겨놨네. 카드를 갖고 제어실로 가게.

테넨바움과 리틀 시스터를 제외하면 모습이 드러난 NPC는 모두 죽을 운명이라는 것을 알고 있기라도 하듯, 나타나지 않는 포터. 괜찮아, 시그마가 다 처리해줄게!

천공 카드 집어들면 스플라이서들이 시그마 잡으러 쫒아 옴.

리드 왈: 포터랑 대화 잘 나누었나, 친구. 그래 이제는 배신자랑 결탁해서 사색가를 훔쳐가겠다 그건가? 시그마는 방정식에서 제거되어야 겠군.

근데... 혹시 왈한테는 포터보더 더 슬픈 사연이 있다거나 그런 건 아니겠지? 그냥 미친 놈이겠지??

발화 플라스미드를 쓰는 덩치 스플라이서가 난입. 미네르바의 동굴에 등장하는 모든 덩치 스플라이서는 발화 플라스미드가 기본 장착임.

찰스 밀턴 포터: 사색가, 사무실 방어 배치!

비장의 무기인 고정형 보안 로봇 1 기가 자동 설치되지만, 이내 파괴되고 만다...(/애도)

찰스 밀턴 포터: 왈. 그는 뛰어난 공학자였지. 그전에는 우린 같은 뜻을 가졌던 적도 있었다네. 하지만 유전자 변형이 그를 피해망상과 편집장애에 사로잡히게 했지! 사색가를 안 놔주고 싶어서 우릴 죽이려 할거야. (※ 스포일러 삐-------)

그러니까 왜 사색가를 빼내야 하는지를 설명해 달라고... 야구 경기로 토토해서 랩처 탈출하실라고?

사무실을 정리하고 제어실로 향하는 시그마. 메인 홀의 생각하는 사람 동상 뒤 쪽으로 2 층은 랩처 중앙 전산이고 그 아래에 제어실로 가는 길이 있는 구조.

들어가면 이브 주사기 디스펜서가 뙇! 이브가 무슨 거품 비누라도 되는양 아무렇지도 않게 설치되어있음. 이러다가 아담 디스펜서까지 나올 기세.

찰스 밀턴 포터 - Find 'Gravity Well'

Hell. The mag-lock door's still active. It's regulated by the resistors plugged into that relay. If you can find a way to yank 'em out - magnet's fail, doors open. There's a Plasmid that could do the job. They call it... Gravity Well.

조금 더 안쪽으로 들어가다 보면 자기 잠금으로 잠겨져서 진행 불가. 중력 구멍 플라스미드를 찾아오라고 요구함.

찰스 밀턴 포터 - Air-Tite Archives Warehouse

According to the Thinker's records, the Air-Tite Archives' warehouse supervisor had a shot of Gravity Well on hand. Getting into the archives warehouse- that'll be the fun part.

"재미있을 거야."

두 명의 미치광이가 사색가를 탄생시킨 것이 틀림 없습니다...

공기 역학 기록 보관소로 가기 위해 다시 중앙 홀로 다시 나오면, 빅 대디와 리틀 시스터 등장. "우우웅----"

찰스 밀턴 포터 - The Lancer

The Lancer is the most technologically advanced Big Daddy that Rapture ever produced. Now it stands between you and the Little Sisters, and if there's anywhere you'll need ADAM to get by, it's Minerva's Den.

가장 진보된 빅 대디라는 랜서.

일단 이온 레이저로 쏴버림. 이김. 아무리 진보해도 초기 모델 주인공 파워가 더 짱짱맨.

창기병 살인자 / Lancer Killer

랜서 빅 대디를 죽였습니다.

리드 왈 - Success?

Subject Sigma rises above the pack, hmm? A futile gesture before the all-knowing Thinker.

아빠 왔다.

아담 죽동자 / ADAM Addict

미네르바의 동굴에 있는 모든 리틀 시스터를 구출했습니다.

이 동네는 리틀 시스터는 세 명인데, 천사가 두어 구밖에 없음.

리드 왈 - Do What You Will

Do what you will with the girls! Twist your body with ADAM! The Thinker's perfect equation accounts for all possibilities!

아담 수확을 종용하는 왈. 근데 수확 안 함. 완벽한 방정식은 개뿔.

생각하는 사람 동상 왼쪽에 있는 공기 역학 기록 보관소. 근데 여기도 안 열림.

찰스 밀턴 포터 - Check McClendon Robotics for Electro Bolt

The doors to the Archives is shorted out. I'd check the McClendon Robotics worshops for a shot of Electro Bolt.

부들부들... 다시 동상 오른쪽에 있는 맥클렌던 로봇 공학 작업실을 향해 이동.

로봇 공학 시설을 향해 발걸음을 떼는 시그마.

계속.

붙임 #1: 더 보기

  1. 바이오쇼크 2 도전 과제 가이드

붙임 #2: 출처 및 참고

  1. Bioshock Wiki, "BioShock 2 Audio Diaries"
  2. Bioshock Wiki, "Radio Messages: Minerva's Den"


퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

본격 업적 성애자들을 위한 게시물. 스팀 판을 기준으로 함.

진행 도전 과제

게임 스토리 모드 진행에 따라 자연스레 얻어지는 도전 과제들.

아빠 왔다 / Daddy's Home

랩처의 폐허로 되돌아가는 길을 발견했습니다.

보호자 / Protector

기차 역에서 소피아의 공격을 견뎌냈습니다.

싱클레어 솔루션 / Sinclair's Solution

라이언 놀이공원에서 싱클레어와 합류했습니다.

그레이스와 대면 / Confronted Grace

빈민가에서 소피아의 심복과 대면했습니다.

전도사 타도 / Defeated the Preacher

전도사를 타도했습니다.

소식통 / Nose for News

디오니소스 공원의 비밀을 밝혀냈습니다.

램의 은신처 발견 / Found Lamb's Hideout

소피아의 본거지로 가는 방법을 찾았습니다.

재회 / Reunion

처음 유대를 맺었던 리틀 시스터와 재회했습니다.

수면으로 / Heading to the Surface

싱클레어의 잠수정 옆에 매달린 채로 수면으로 향했습니다.

탈출 / Escape

랩처를 탈출했습니다.

결말 분기

  1. 리틀시스터 구원
    1. 리틀 시스터 모두 구원 = 좋은 결말
    2. 리틀 시스터 한 명 이상 구원, 한 명 이상 수확 + 결말에서 죽음 선택 = 보통 결말
    3. 리틀 시스터 한 명 이상 구원, 한 명 이상 수확 + 결말에서 생존 선택 = 나쁜 결말
    4. 리틀 시스터 모두 수확 = 나쁜 결말
  2. 플레이어가 생사를 결정할 수 있는 NPC의 생사 결정

    1. 모든 NPC 생존 = 소피아 램 생존
    2. 1명 이상 NPC 사망 = 소피아 램 사망

결말 자체는 도전 과제에 영향을 주지 않지만, 모든 NPC와 리틀시스터를 살려주면 얻을 수 있는 과제가 있으니 주의할 것.

보조 도전 과제 

신경 써야 얻을 수 있는 도전 과제들. 바이오쇼크 2는 1회차 플레이로 싱글플레이의 모든 업적을 얻을 수 있는데, 어려움 난이도로 플레이하면서 부활장치를 사용하지 않는 것에 주의하면 쉽게 달성할 수 있다.

빈자리 구매 / Bought a Slot

유전자 강화 자동판매기에서 플라스미드 혹은 강화제 자리를 구입했습니다.

꽉 찬 플라스미드 자리 / Max Plasmid Slots

플라스미드 자리를 최대까지 완전히 개선했습니다.

무기 개선 / Upgraded a Weapon

무기 개선 장치에서 무기를 개선했습니다.

무기 완전 개선 / Fully Upgraded a Weapon

무기에 3 번째 보조 장치를 설치했습니다. 

모든 무기 개선 / All Weapon Upgrades

게임에 등장하는 모든 무기 개선 장치를 발견했습니다.

무기 개선 창치들 중 몇 곳은 원격 해킹 장치를 이용하거나 간단한 퍼즐을 풀어야 사용 할 수 있는는 곳에 있다. 장소 별 개수는 다음과 같다. 지도에 지나온 곳은 색이 칠해지니까 쉬움.

  • 라이언 놀이공원: 2 대
  • 빈민가: 3 대
  • 사이렌 뒷골목: 2 대
  • 디오니소스 공원: 2 대
  • 폰테인 미래산업: 2 대
  • 페르세포네 내부: 1 대
  • 페르세포네 외부: 1 대

장거리 해커 / Distance Hacker

해킹 도구를 멀리 떨어진 기계에 사용했습니다.

여기저기 해커 / Prolific Hacker

각 기계를 한 번씩 해킹했습니다.

아래 목록의 기계들을 해킹.

  • 보안 카메라
  • 포탑
  • 물품 자판기
  • 탄약 자판기
  • 치료 장치

달인 해커 / Master Hacker

해킹 도구로 멀리 떨어진 기계를 30 번 해킹했습니다.

자판기가 나올 때마다 자동 해킹 도구들을 구입해 놓으면 쉬움.  

첫 연구 / First Research

연구 사진기로 스플라이서를 연구했습니다.

연구 트랙 하나 / One Research Track

연구 트랙 하나를 완료했습니다.

연구의 달인 / Research Master

랩처의 모든 목표물의 연구를 완료했습니다.

바이오쇼크 2에서는 필름이 필요없는 진보된 사진기를 사용한다. 좀 귀찮은 업적. 몽둥이 스플라이서는 중반부터 안 나오니 미리 찍어두고, 거미 스플라이서는 후반에 안 나온다. 그리고 빅 시스터는 각 지역의 리틀 시스터를 모두 처리하면 등장하는데 한 두 번 실수로 까먹어도 모두 연구 할 수는 있으니 여유롭게 마음먹고 할 것. 나머지 적들은 너무 많이 등장해서 곤란할 정도.

그랜드 대디 / Grand Daddy

전투 중 죽지 않고 빅 대디 셋을 물리쳤습니다.

부활 장치를 사용하지 않고 게임 완료하는 업적만 해도 공짜로 주는 업적.

리틀 시스터 입양 / Adopted a Little Sister

처음으로 다른 리틀 시스터를 입양했습니다.

채취의 달인 / Master Gatherer

리틀 시스터와 600 아담을 채취했습니다.

시체에서 채취하는 것 만으로 600 아담 달성.

플라스미드 완전 개선 / Fully Upgraded a Plasmid

플라스미드 하나를 3 단계까지 완전히 개선했습니다.

 흔히 전기 충격 플라스미드를 주력으로 사용하는 실수를 많이 하는데, 모든 플라스미드는 활용도가 무궁무진함.

모든 플라스미드 / All Plasmids

11 개의 모든 기본 플라스미드 종류를 구입하거나 발견했습니다.

자판기에서 구입하는 10 개의 플라스미드와 스토리 진행에 따라 엘레노어가 가르쳐주는 것까지를 더해  총 11 개의 플라스미드를 배웠을 때 달성.

무적 / Unbreakable

빅 시스터를 상대하면서 죽지않고 견뎠습니다.

해커 다 됐네 / Look at You, Hacker

해킹된 보안 장치만을 이용해 50 명의 적들을 죽였습니다.

덫의 달인 / Trap Master

30 명의 적들은 덫 만을 이용해 죽였습니다.

리벳 총, 전기 작살, 근접 지뢰, 회오리 덫 플라스미드로 적을 죽임. 

반격 / Counterattack

적이 던진 투사체를 이용해 그 적을 죽였습니다.

투사체를 사용하는 많은 적들이 있지만, 게임 후반부터 등장하는 럼블러가 던지는 소형 포탑이랑 미사일 되돌려주면 개꿀.

보호의 달인 / Master Protector

리틀 시스터에 아무도 접근하거나 공격하게 하지 않고 채취를 해냈습니다.

게임 중반에 달성하는 것을 추천한다. 초반에는 무기 업그레이드가 없어서 까다롭고, 후반에는 적들의 공격이 매서우니까.

기본은 간단하다. 리틀 시스터를 내려놓고, 적들이 들어오는 입구가 잘 보이는 구석에서 기다린다. 이 부분이 중요하다. 괜히 리틀 시스터 주변에서 빙글거리면 하기 힘들다. 어차피 적들은 리틀 시스터를 근접 공격 밖에 안 함. 나타난 적들은 자신있는 무기를 들고, 줌해서 헤드샷한다. 끝.

그래도 못 하겠다면, 리벳 덫, 전기 작살, 소형 포탑, 회오리 덫 플라스미드, 해킹한 포탑을 이용하자. 아담 채취 속도 증가 강화제를 이용하는 것도 도움이 된다.

큰 씀씀이 / Big Spender

자판기에서 2000 달러를 사용했습니다.

돈은 아이템 구입과 장비 매수하는 데 밖에 쓸모가 없다. 게다가 지갑 한도가 있어서 초반에는 500 달러 정도밖에 못 들고 다니니 자판기가 나올 때 마다 팍 팍 써주자. 

모든 리틀 시스터 처리 / Dealt with Every Little Sister

모든 리틀 시스터를 처리했습니다.

ESC를 눌러 메뉴화면에서 상황을 확인 가능하니 다음 지역으로 가기 전에 확인하고 지나갈 것.

  • 라이언 놀이공원: 1 명
  • 빈민가: 2 명
  • 사이렌 골목: 3 명
  • 디오니소스 공원: 3 명
  • 폰테인 미래산업: 3 명

구세주 / Savior

모든 리틀 시스터를 구원하고 그레이스, 스탠리, 알렉산더를 살려주었습니다.

게임을 진행하다 보면 죽여주고 싶은 욕구가 마구 치솟지만 꾹 참고 해야함. 가장 힘든 업적. 

두둑한 배짱 / Big Brass Balls

부활 장치를 사용하지 않고 게임을 끝마쳤습니다.

옵션에서 부활 장치 사용 해제만 선택했을 뿐인데 도전 과제가 완료됬어요! 

랩쳐 역사가 / Rapture Historian

음성 일지 100 개를 발견했습니다.

총 129 개의 음성 일지가 존재하고, 지도도 제공해주니 공략 없이도 수집 가능한 수준. 하드코어한 플레이 요구하는 바이오쇼크: 인피니트에 비하면 양반.

역경을 무릅쓰고 / Against All Odds

가장 어려운 난이도로 게임을 끝마쳤습니다.

어려움이 가장어려움 난이도였다... 

9번 아이러니 / 9-Irony

랩처의 설립자에세 존경을 표했습니다.

라이언 놀이공원에서 라이언 인형이 의자에 앉아있고, 구석에는 라이언이 애용하던 9 번 아이언이 놓여있다. 염력으로 집어들고 라이언 인형의 머리통을 향해 날려버리는 방법으로 존경심을 표해주자.

멀티플레이 도전 과제

기본적으로 멀티플레이에는 사람들이 존-나게 없다. 이유는 언어와 버전별로 서버가 다르기 때문이라고 한다. 개인적으로는 우연히 접속 성공한 데서 플레이 하다가 밥먹고 와서 다시 접속했는데 밥먹기 전에 걔네들 방으로 다시 접속했다. 같은 서버 쓰는 지역에 방 달랑 1 개? ㅋㅋ

부자연 선택 / Unnatural Selection

공개 경기에서 첫 킬을 기록했습니다.

랩처 방문을 환영합니다 / Welcome to Rapture

첫 공개 경기를 완료했습니다.

역겨운 프랑켄슈타인 / Disgusting Frankenstein

공개 경기에서 빅 대디가 되었습니다.

공개 멀티플레이 도중 나타난 잠수복을 입고 빅 대디가 되면 성공. 보통 한 판에 서너번의 기회가 온다. 빅 대디 옷이 출현했다는 메시지가 보이면 미친듯이 주위를 둘러보자. 

"거품 아저씨-- 안 돼!" / "Mr. Bubbles-- No!"

공개 경기에서 빅 대디를 쓰러트렸습니다.

빅 대디 옷을 입을 플레이어에게 마지막 공격을 한 플레이어가 달성하는 업적. 구석에서 지켜보다 공격력 강력크한 무기로 냠냠이를 시도하자.

하찮은 용단 / Two-Bit Heroics

공개 게임에서 첫 시험을 완료했습니다.

기생충 / Parasite

10 단계에 도달했습니다.

좀나방 / Little Moth

20 단계에 도달했습니다.

무두질 / Skin Job

30 단계에 도달했습니다.

불가능 선택 / Choose the Impossible

40 단계에 도달했습니다.

혼자서 레벨을 올리는 방법 소개.

  1. ADAM Grab 모드 비공개 방 생성.
  2. 경기가 시작되면, 리틀 시스터 붙잡고 3 분 버팀.
  3. 1위 경험치 냠냠.
  4. 억겁같은 고독한 인고의 시간을 견뎌내면 당신도 어느새 랭크 40!

각 단계마다 음성 일지가 제공되며, 40 단계 달성시 바이오쇼크 1과 이어지는 에필로그를 볼 수 있다.

토양 검증 / Proving Grounds

공개 경기에서 승리했습니다.

엄마 거위 / Mother Goose

공개 게임에서 리틀 시스터를 구했습니다.

Capture the Sister 모드에서 리틀 시스터를 환기구로 데려가면 달성. 

건달 / Man About Town

각 멀티플레이 지역을 최소 한 번씩 플레이했습니다.

익명의 잠수부 / Aqua Incognita

각 다운로드 컨텐츠 지역을 최소 한 번씩 플레이했습니다.

스팀판에 처음부터 추가되어있는 맵들을 플레이 하면 달성인데 사람들이 없어...

텃세 / Territorial

6 개의 새로운 지역에서 각각 승리했습니다.

이건 한 술 더 떠서 거기서 이겨야함 ㅋㅋ 노답 ㅋㅋ

환생 / Reincarnation

환생을 사용해 다시 시작했습니다!

개 빡치는 도전 과제. 일단 랭크를 만렙인 50까지 찍는다. 그 뒤 멀티플레이 메뉴의 환생하기 버튼을 누르면 지금까지 쌓아왔던 모든 잠금 해제가 사라지고 랭크 1이 되어버린다!

보호자 시험 DLC 도전 과제

스팀에서 구입했으면 그냥 본편에 묶여있음. 대신 미네르바의 동굴 DLC 할인을 안해줌 ㅋㅋ

보호자 시험이라는 게 별거 없고, 본편에서 아담 채취하는 리틀 시스터 지키는 거 반복하는 것일 뿐.

리트머스 시험 / Litmus Test

보호자 시험에서 6 개의 별을 얻었습니다.

산성 시험 / Acid Test

보호자 시험에서 18 개의 별을 얻었습니다.

불꽃 시험 / Trial By Fire

보호자 시험에서 36개의 별을 얻었습니다.

가족의 적 / Enemy of the Family

모든 보호자 시험에서 A 등급을 얻었습니다.

리틀 시스터가 한 두 번 방해 받아도 A 등급을 받을 수 있음. 물론 A+ 등급도 인정된다.

완벽한 보호자 / Perfect Protector

하나의 보호자 시험에서 아담을 100% 모았습니다.

본편을 플레이하면서 쌓아온 실력으로 간단하게 달성가능^^ 리틀 시스터가 방해 받기 전에 비명을 지르니 참고할 것.

큰 양동이로 가져가 / Get a Bigger Bucket

전체 보호자 시험에서 50%의 아담을 모았습니다.

DLC에서 달성한 누적 아담을 기준으로 50%.

수호 천사 / Guardian Angel

추가 보호자 시험을 모두 완료했습니다.

한 번 모든 시험을 완료하면 각 지역마다 보너스 시험을 할 수 있는데 모든 무기와 플라스미드를 사용 가능하니까 그냥 더 쉽다. 아담 채취 전에 강화제 자리 채우는 것 빼먹지 말 것.

미네르바의 동굴 DLC 도전 과제 

로그인 / Login

랩처 중앙 전산의 제어실에 도달했습니다.

관리자 권한 획득 / Root Access Granted

전산실 중심에 도달했습니다.

로그아웃 / Logout

미네르바의 동굴에서 탈출했습니다.

SUDO / SUDO

리드 왈에게서 생각하는 존재의 통제권을 빼앗았습니다.

위의 미네르바의 동굴 도전 과제는 진행에 따라 자동으로 얻어짐. 

쓰레기 수집 / Garbage Collection

미네르바의 동굴에 있는 10 개의 로봇 청소기를 모두 파괴했습니다.

미네르바의 동굴에 있는 로봇 청소기

  1. 첫 번째 유전자 강화 판매기를 지나서 포터의 사무실로 가는 통로에 위치.
  2. 맥클렌던 로봇 공학 생산 전시장에 위치.
  3. 맥클렌던 로봇 공학의 숨겨진 방에 위치(로봇 리틀 시스터들과 술취한 잭 맥클렌던의 음성 일지 있는 곳.)
  4. 공기 역학 기록 보관소의 새 계좌(New Accounts) 담당 부서에 위치(전기 충격 플라스미드 필요.)
  5. 포터의 사무실로 가는 길의 자기 잠금된 구역에 위치(중력 구멍 플라스미드 필요.)

제어실에 있는 로봇 청소기

  1. 프로그래밍 부서에 들어가자 마자 나오는 저장실에 위치(전기 충격 플라스미드 필요.)
  2. 프로그래밍 부서에 있는 펠릭스 베른바움의 사무실에 가까이 있는 통로에 위치.
  3. 온도 조절기로 가는 입구 근터에 위치.
  4. 배기 장치로 가는 엘레베이터 출구로 가는 방향에 위치.
  5. 온도 조절기 안의 터빈으로 가는 입구에 있는 오른쪽 방에 위치.

고득점 / High Score

단일 스핏파이어 게임에서 9999 점을 얻었습니다.

제어실의 스핏파이어 미니게임에서 9999점 달성.

창기병 살인자 / Lancer Killer

랜서 빅 대디를 죽였습니다.

DLC 첫 장소인 미네르바의 동굴에서 등장하는 모든 빅 대디는 랜서 빅 대디임. 아무나 걸리면 죽는 거임. 

아담 죽동자 / ADAM Addict

미네르바의 동굴에 있는 모든 리틀 시스터를 구출했습니다.

미네르바의 동굴과 제어실에 각각 3 명, 총 6 명의 리틀 시스터가 있으니 모두 처리하면 됨. 

이렇게 모든 업적을 달성하면 100% 가능!... 인데 멀티플레이 업적 못 깨서 아직 90%. 끝.


퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 혹시 멀티 다른사람이랑 1:1로 플레이 가능한가요? 저도 도전과제 좀 해볼려구요 ㅎㅎ

    내닉 2015.02.01 11:19 신고   link delete reply
    • 자동으로 방을 검색해서 연결하는 방식이라, 두명만 묶어주면 1:1 가능하지 않을까요?
      아는 사람이랑 접속해서 업적 깨려면 아마 동시에 방찾기를 눌러서 걸릴때까지 반복해야할 듯.

      link delete 2015.02.01 23:49 신고 Favicon of https://blog.jinh.kr JinH
  2. 현재 멀티플레이에 사람들 꽤 있는 편입니다. 15명정도는 되는듯 하하핳
    핑이 너무 안좋아서 정상적인 플레이가 안되고, 1레벨로 들어갔다가 5데스 후에 겨우겨우 첫킬 기록했습니다 빅대디 옷도 한번은 입으라고 나오더군요. 30레벨 정도의 적과 마주치면 어떤 플라스미드를 쓰던데 아무것도 못하고 살해당합니다. 결론은 100% 업적 달성은 사실상 불가능이라 판단 전 포기하였습니다 하하하ㅠ

    으음 2015.09.05 00:45 신고   link delete reply
    • 이 글 쓴 뒤로도 멀티 좀 했었는데, 백업 안 하고 지워서 다 날아간 뒤로 포기요.

      link delete 2015.09.06 01:21 신고 Favicon of https://blog.jinh.kr JinH



발매 첫 날 부터 제기된 업적 버그.

고쳐달라는 문의가 빗발치자 "블리자드는 게임 속 업적을 달성시켜 드릴 수 없습니다."라고 일괄 답변 후 확장팩 공개한 이 시점까지 안 고쳐줌.

버그 뻔히 알면서 변변한 대책조차 마련하지 않음. 뻔뻔甲 블리자드.


끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

1년 전. 쿨하게 2TB 외장하드를 지른 나는 눈누난나 즐거웁게 토렌트 라이프를 즐기고 있었다. 다운받아 놓은 미드를 다 보기전에 늙어 죽을만큼의 방대한 양이였지...

( 아 참, 이 자리를 빌어 인류 최고의 발명품인 키보드 오른쪽 화살표 키를 만들어주신 공학자 님 감사드립니다. 그것은 쓰레기 영상을 스킵해서 시간을 효율적으로 활용할 수 있게 해줍니다! )

어쨌든 그 즐거운 토렌트 라이프도 끝나고 말았는데, 그것은 CRC 오류로 인해 하드 드라이브를 인식하지 못하는 현상이 반복해서 일어났기 때문이다.


사실 이 글의 모든 사진은 다른 곳에서 퍼온 사진이다. 이런 위기의 순간에 스샷을 찍어 놓을 여유는 없었다...


이 빌어먹을 상황에 나는 위기를 직감했다. 그래 이것은 바로 악마의 프로그램을 상대 했을 때의 그 느낌이다! 마음 단단히 먹고 준비해야 한다! 코드 레드 발령! 삐용삐용!

'침착해! 그래, 일단 cmd로 chkdsk를 시도 하는 거다!'


...FAIL...




외장 디스크 활성이 100%로 천장에 딲! 붙어서 그래프를 그려 나가다가 CPU도 덩달아 천장을 뚫어 버리는 현상이 발생하는 거시여따. 그리고 chkdhk 화면만 봐서는 뭐가 어떻게 되고있는 건지도 잘 모르겠음.

소프트웨어 문제에는 자신이 있었지만 하드웨어는 아직 나에게도 미지의 영역... 과연 이 난관을 어찌 헤쳐나가야하는 것인가...

좋았어! 먼저 유명 하드 드라이브 스캔 프로그램을 이용 배드 섹터를 색출한다!


바로 이 프로그램

그런데 실로 2TB의 크기는 거대했다... 참고로 총 검색 시간은 17시간이 소요됐다. 기다리다 부처되는 줄 알았네ㅅㅂ

아래에 검사레포트의 일부를 첨부한다. 나의 분노가 잘 전해지리라 예상된다.

=============================================================

            GMDATA HDD SCAN Ver 2.0 검사레포트               

=============================================================

. 검사모델(드라이브) : WDC WD20EARS-00MVWB0    

. 버스타입: USB

. 펌웨어: 

. 제조사 : WDC

. 시리얼넘버 : 01130168

. 로컬리스트 : G

=============================================================

. 검사시작(일자/시간): 2013-05-23 오후 11:52:13

. 검사종료(일자/시간): 2013-05-24 오후 5:17:31

. 검사진행시간:17:25:17

.

. 검사범위(시작섹터~종료섹터): 0 ~ 3907024064

. 검사범위(시작(MB)~종료(MB)): 0.0MB ~ 1907726.6MB

. 검사범위(시작(GB)~종료(GB)): 0.0GB ~ 1863.0GB

.

.

. 검사완료(검사된 전체섹터) : 3907024064

. 검사완료(검사된 전체(MB)) : 1907726.6MB

. 검사완료(검사된 전체(GB)) : 1863.0GB

.

.

.

. 배드카운트:313

======================================

==>>>>> 검사된 배드섹터 리스트 <<<<<==

======================================

298190680섹터,145600MB

298190681섹터,145600MB


------------------------- 중략 ------------------------


2333604752섹터,1139455MB

2341478912섹터,1143300MB

2341478913섹터,1143300MB

======================================

 

 GMDATA HDD SCAN ver2.0 검사레포트 완료. 

 감사합니다. (지엠데이터)


배드카운트가 313개. 내 멘탈은 그 때 이미 이승을 떠나 구천을 떠도는 상태가 되어버린 것이다! 좀만 더 있다가는 승천해서 영영 못 돌아올 듯.

이 쉬부럴 외장 하드가 더 이상 내가 손쓸 방도가 없다는 것을 깨닫고, A/S를 받기 위해 조심스레 외장하드를 뜯기 시작하는데, 그 순간 내 눈에 비친 것은!



...



.... 60초 후에 공개됩니다!



...



...



넵, 내 눈에 비친 것은 유통사에서 제공하는 A/S 기간(1년 보증)이 몇 달 전에 끝났음을 알리는 씰 이였음요. 어 근데 WD는 보통 3년 보증 아니였나? 1년 전에 만들어진 하듸스크니 조금 희망 있는 듯? 이라는 헛된 희망을 품고 서비스센터 홈페이지에 시리얼 넘버를 입력했으나 돌아온 결과는 보증 기한 만료 메시지! 오예 내 20만원 1년만에 공중으로 분해되는구나! 이 시발 토렌트를 죽입시다 토렌트는 나의 원수. 토렌토랑 이름 비슷한 토론토로도 여행 안 갈꺼다 쳇.

아 지금 멘탈이 승천해서 더 이상 글을 쓸 수가 없다. 지금 마지막 시도로 로우 포맷을 준비하고 있다. 50MB/s의 속도로 포맷을 한다고 하면 대충 16시간 쯤 걸릴듯 하하하핳하하하하하하하핳핳ㅎ.



퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 외장하드... 버림...

※ 이 글은 웹킷 기반의 브라우저에서 정상적으로 보임.

프롤로그

흔한 초보 앱 개발자의 개발 과정

  1. 도서관에 가서 안드로이드 제작 가이드를 펼침.
  2. 자신감 파워 수직 상승!
  3. 귀가 후 SDK깔고 파워 어플 제작 시도!
  4. hello world! 출력 이후 막힘.
  5. 멘붕.
  6. SDK 디렉토리 삭제.

 

↓ 여기부터 본문

제작 도구 Tool

모바일 웹앱은 간단하게 구현이 가능. 네이티브 앱에 웹소캣을 삽입하고 HTML 페이지 연결하면 끝. 게다가 웹앱 제작 SDK를 국내 기업에서 만들어서 배포 중이므로. 자바를 전혀 몰라도 됨.

국내 것만 해도 두 개나 있음. 엘지텔레콤은 뭐하노...

 

클릭 딜레이 Click delay

웹킷 기반 모바일 브라우저에서 어떤 요소를 터치하면, 그 요소가 활성화 될때까지 약간의 시간지연이 발생. 이유는 onclick 이벤트가 발생하면, 그게 누르기인지 쓸어넘기기인지 뭐 그런 걸 감지할 시간을 브라우저에서 일부러 지연시키기 때문.

이게 웹앱 제작 도중 가장 먼저 날 멘붕시킨 문제였음. 빠릿한 네이티브 앱에 비해 너무 굼뜸.

해결 방법

  1. 누르기 이벤트 발생(누른 순간부터 300ms 지연 발생.)
  2. 지연 발생 방지.
  3. 움직임 없이 때기 발생.
  4. 클릭으로 간주.

코드를 직접 작성 할 수도 있지만 대부분의 모바일용 라이브러리에서 .touch().tap() 이벤트가 존재함. 단, 안드로이드 기본 브라우저에서는 여전히 느리고, 크롬이랑 사파리로 실행해야 빠름. 이유는 모름.

참고

  1. Google Developers, Ryan Fioravanti, "Creating Fast Buttons for Mobile Web Applications January", (Last updated 5월 17, 2012.)
  2. David Kaneda, jQT, (2009–2013)

 

애니메이션 Animation

동적인 앱을 만들기 위해 애니메이션이 필수. 구현 방법은 아래에.

  1. JS로 시간 지연을 주면서 값을 서서히 변경.
  2. CSS에서 transition이나 animation 값을 설정.
  3. <canvas> API 사용.

나는 JS랑 CSS를 섞어서 사용했음. 아래에 안내 애니메이션 예제를 첨부함.

실행

$('#start_animation').click(function(){
	$('#start_animation').hide();
	$('#notice0').fadeIn().animate({top: '+=1em'},500,function(){
		$('#notice1').fadeIn().animate({top: '-=1em'},500,function(){
			$('#notice2').fadeIn(function(){
				$('#notice1').animate({opacity: '0'},250,function(){
					$('#notice2').animate({left: '-150px'},1000,function(){
						$('#notice2').css({left: 170 + $('#ex_animation').offset().left + 'px'}).hide().fadeIn();
						$('#notice1').css({opacity:'1'}).hide().fadeIn(function(){
							$('#notice3').fadeIn().animate({top: '+=1em'},1000,function(){
								$('#notice4').fadeIn();
							});
						});
					});
				});
			});
		});
	});
});

.animation() 메소드 콜백을 반복해서 초기 화면에 도움말을 표시했음. 의외로 아무 문제 없이 잘 되서 놀람.

 

쓸어넘기기 Swipe

네이티브 앱에서 쓸어넘기기가 멋있어서 구현해 보려고 했는데 이미 플러그인 만들어놓은 사람들이 넘쳐남. 원리는 위쪽에 쓴 모바일 터치 이벤트의 응용해서, 누른 채로 포인터가 일정 값 이상 이동하면 쓸어넘기기로 간주하는 것.

#1
#2
#3

쓸어넘기기는 플러그인이 완성 되어있어서 별 생각없이 복붙. 잘 됨. 노력 대비 효과 최고.

참고

  1. Skinkers.com, Skinkers, "TouchSwipe"

아 앱 만드는 것보다 후기쓰는게 더 힘드네 ㅡㅡ 에라 모르겠다 1부 끝.

2부에서는 가상키보드 키 입력 조작한 거랑 textarea크기 자동변경, 로컬저장소 사용 등을 시간 나면 쓸 예정.

'기록 #01: 컴퓨터' 카테고리의 다른 글

페이지 내부 링크로 이동할 때 스크롤을 부드럽게  (5) 2015.08.04
댓글달기 버튼에 동적 효과 추가  (4) 2015.04.12
jQuery 툴팁  (2) 2015.04.08
css 플립 카드  (1) 2014.10.08
하드디스크 포맷기  (1) 2013.05.25
모바일 웹앱 제작 후기  (0) 2013.03.21
2015 수능 디데이 카운터  (1) 2013.02.19
모스 부호(Morse code) 해석기  (61) 2013.02.16
2014 수능 디데이 카운터  (9) 2013.02.15
태그 연습장  (0) 2013.02.04
모스 부호(Morse code) 변환기  (42) 2013.02.04

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

글에 <code> 태그를 사용하면서 구문강조 스크립트를 쓸 때 매번 드는 의문점이 있었으니... 그것은 바로 <code> 태그를 사용할 때는 100%> 구문강조가 필요한 상황인데도 매번 수작업으로 클래스를 지정해줘야 한다는 것.

예를 들어 google-code-prretify 를 사용하면 html편집기로  <code>나  <pre> 태그에  class="prettyprint" 속성을 지정해 줘야함.

이 번거롭기 짝이 없는 작업에서 탈출하기 위해 걍 쿨하게 모든 <code> 태그마다 자동으로 클래스를 추가하는 묘안을 생각해 내버린 거시여따. 나 좀 머리 좋은 듯 ㅎㅎ

예제

#0: .js

function prettyprint_class_add() { $('code').addClass('prettyprint'); $('code > xmp').addClass(function(){$(this).parent().removeClass('prettyprint'); return 'prettyprint';}); $('code > pre').addClass(function(){$(this).parent().removeClass('prettyprint'); return 'prettyprint';}); $('pre > code').removeClass(function(){$(this).parent().addClass('prettyprint'); return 'prettyprint';}); } $(window).load(function() { prettyprint_class_add(); prettyPrint(); });


#1: 인라인 <code>

인라인 요소에서는 function jinh() { visitor++; } 이렇게.


#2: <code> 내부의 <xmp>

// 블록 요소에서는 function jinh() { visitor++; } //이렇게.


#3: <code> 내부의 <pre>

// <pre> 요소 내부에서는
function jinh() { 
	visitor++; 
}
// 다른 태그가 작동해서 <xmp>를 선호함.


#4: <pre> 내부의 <code>

// <code>가 <pre> 안에 포함되어도
function jinh() { 
	visitor++; 
}
// 알아서 블록 요소로 얍얍.

야 편리하다!


끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

설명

  • 2014년 11월 13일 0시 정각에 맞춰진 카운터.
  • 플래시 아님. 모바일에서도 OK.
  • 아직 수능 일정도 안 나왔는데 포풍 공개하는 대범함!


 

퍼가기

 

<iframe src="http://admin0.github.com/SAT_kr/page/SAT15.html" style="width:100%; height:88px; border:0;"></iframe>

 

 

기록

---------------------------------------------------------------------------------

2013.02.19.	ver.2.9.2	4.25KB

2015 수능 카운터 공개.

---------------------------------------------------------------------------------


'기록 #01: 컴퓨터' 카테고리의 다른 글

댓글달기 버튼에 동적 효과 추가  (4) 2015.04.12
jQuery 툴팁  (2) 2015.04.08
css 플립 카드  (1) 2014.10.08
하드디스크 포맷기  (1) 2013.05.25
모바일 웹앱 제작 후기  (0) 2013.03.21
2015 수능 디데이 카운터  (1) 2013.02.19
모스 부호(Morse code) 해석기  (61) 2013.02.16
2014 수능 디데이 카운터  (9) 2013.02.15
태그 연습장  (0) 2013.02.04
모스 부호(Morse code) 변환기  (42) 2013.02.04
짜장면 처음 먹어본 흑인  (2) 2012.10.15

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 2016 수능 디데이 카운터 http://jinh.tistory.com/722


설명

  • 아래 폼에 모스 부호 입력 후 버튼을 누르면 해독.
  • 웹 상에서 바로 적용. 다운로드 뻐큐머겅 ㅗㅗ
  • 모스 부호 변환기로 변환한 모스 부호 해독 전용.
  • ↑ 이제 다른 방식도 가능
  • 현재 로마자와 기호만 변환 가능. + 숫자 추가.
  • ↑ 한글 해석 파워 추가! 단, 쌍모음이나 겹받침에서 약간의 오류가 있음.
  • 내가 이걸 코딩했다니! 나의 이 쿨한 재능이 무섭다 ㅋㅋ

 

· · · ·  ·  · – · ·  · – · ·  – – –    · – –  – – –  · – ·  · – · ·  – · ·  – · – · – –

 

기록

----------------------------------------------------

2013.02.19.	ver.1.5		28.8KB

한글 정규식 패턴 추가. 음소 결합 종결.

----------------------------------------------------

붙임 #1: 더 보기

  1. 안드로이드용 모스 부호
  2. 크롬 웹스토어용 모스 부호
  3. 웹킷 브라우저 & 모바일용 모스 부호 사이트


붙임 #2: 출처 및 참고

  1. 유니코드(The Unicode Consortium)
  2. 위키백과, "모스 부호"


'기록 #01: 컴퓨터' 카테고리의 다른 글

jQuery 툴팁  (2) 2015.04.08
css 플립 카드  (1) 2014.10.08
하드디스크 포맷기  (1) 2013.05.25
모바일 웹앱 제작 후기  (0) 2013.03.21
2015 수능 디데이 카운터  (1) 2013.02.19
모스 부호(Morse code) 해석기  (61) 2013.02.16
2014 수능 디데이 카운터  (9) 2013.02.15
태그 연습장  (0) 2013.02.04
모스 부호(Morse code) 변환기  (42) 2013.02.04
짜장면 처음 먹어본 흑인  (2) 2012.10.15
악마의 운영체제 Windows8(CP) 삭제기  (3) 2012.03.11

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 이전 댓글 더보기
  2. 한글 입력하면 모스부호로 안나와요?

    익명726 2017.05.10 21:48 신고   link delete reply
  3. 안되자너!

    익명726ㅊ 2017.05.12 20:16 신고   link delete reply
  4. 어케점 해주세요

    붙여넣기 2017.06.17 15:03 신고   link delete reply
  5. 모바일로 복붙하면 자꾸 옆메뉴 나와서 복붙창 가려요....답답함 어케쓰라는거임

    2017.07.20 22:12 신고   link delete reply
  6. ._..

    익명573 2017.07.23 23:02 신고   link delete reply
  7. 와 존나짜증나 복붙할려고 하면 옆에서 좆같은 메뉴 쳐 튀어나옴;;;;

    익명436 2017.08.03 18:45 신고   link delete reply
  8. · – – ·  –  · – · ·  · · –  – – · · – –    – – ·  ·  · · · –  ·  – · –  · – –  ·  – · · ·  · – · ·  · –    – – ·  · · –  – – –  – · –  – 

    익명251 2017.11.02 16:36 신고   link delete reply
  9. z

    익명608 2018.02.02 20:48 신고   link delete reply
  10. fuck

    llllllllllllllllllllllllllllllllllllllllll 2018.02.02 20:48 신고   link delete reply
  11. fuck

    익명51 2018.02.03 11:31 신고   link delete reply
  12. · – · ·  ·  – – · ·  – · –  · · –    · – – ·  ·  · – – ·  –  · · – ·  · – · ·  –    – – · ·  ·  · · · –  –    · – · ·  ·  · · · –    · – – ·  · · –  · – – –  · · · ·  · · – ·  – · –  · · –  · · · –  ·  – · –    – · –  · – ·  · · – ·  · – – ·  – – · –    · – · ·  · · · ·  · – – –  ·  · – –  · · – ·  · · –  – · · ·  ·  · – · – · – 

    익명805 2018.02.03 13:35 신고   link delete reply
  13. · – · ·  ·  – –  – – ·  ·  · – – –  ·  · – –  · · – ·  · · –  – · · ·  · 

    익명111 2018.02.03 23:28 신고   link delete reply
  14. 익명533 2018.02.09 19:49 신고   link delete reply
  15. 2018.02.09 22:12 신고   link delete reply
  16. 댓글망설이다가달았어요전요 이어서그렇군요 글이어서 댓글이거비밀번호는 ㄷㄷㄷ 이지만요

    도도시약도 2018.02.10 00:14 신고   link delete reply
  17. 2018.02.10

    2018.02.10 2018.02.10 00:16 신고   link delete reply
  18. 위에 알수없는어떤글같아요 전일단 네이버지식iN 에서 다른사람이질문글쓴거 모스부호인가 두음부칙인가 무슨해석인가 어떤글귀보고왔어요 이어서 댓글이거비밀번호는 ahenek 인가 모두다 이지만요 아무렇게나지어내서만듬요 비밀은 그리고 뭔지모르겠네요 httP:// 나오고하는거외에 앞에글에 □: 비밀 이라고표시된거요글귀 이어글 글나타는거말하는거입니다

    캐릭터 2018.02.10 00:18 신고   link delete reply
  19. ㅇㄹㅇㄹ http://dmfakdsIs@naver.com , http://dmfakdsis@naver.com , http:dmfakdsLs@naver.com , http://dmfakdsls@naver.com

  20. 모바일로 모스부호 복붙하려고 하면 퍼가지마세요 이런거 떠서 복붙이 안되네요;;..

    익명277 2018.08.15 10:07 신고   link delete reply
  21. 아니 이거 왜 해석이 안됩니까 해석 하고 싶은데 공백 0으로 해석됩니다랑 모스부호만 뜨고 한국어 안 뜨는데 해석 좀 해주쇼
    ・--・・・・・-・--・・--・-・---・--・・・--・・

설명

  • 2013년 11월 7일 0시 정각에 맞춰진 카운터.
  • 플래시 아님. 모바일에서도 OK.
  • 2010 수능 디데이 카운터 부터 14년까지 5년째 만들고 있지만, 절대 절대 5수를 하는 것은 아닙니다.



퍼가기

<iframe src="http://admin0.github.com/SAT_kr/page/SAT14.html" style="width:100%; height:88px; border:0;"></iframe>


기록

---------------------------------------------------------------------------------

2013.02.16.	ver.2.9.1		4.25KB

특정 상황에서의 오류 수정.

---------------------------------------------------------------------------------

'기록 #01: 컴퓨터' 카테고리의 다른 글

css 플립 카드  (1) 2014.10.08
하드디스크 포맷기  (1) 2013.05.25
모바일 웹앱 제작 후기  (0) 2013.03.21
2015 수능 디데이 카운터  (1) 2013.02.19
모스 부호(Morse code) 해석기  (61) 2013.02.16
2014 수능 디데이 카운터  (9) 2013.02.15
태그 연습장  (0) 2013.02.04
모스 부호(Morse code) 변환기  (42) 2013.02.04
짜장면 처음 먹어본 흑인  (2) 2012.10.15
악마의 운영체제 Windows8(CP) 삭제기  (3) 2012.03.11
자바스크립트 아날로그 시계(2)  (2) 2012.02.17

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 아구몬이 최고제~

    수능시계는역시 2013.02.22 08:21 신고   link delete reply
  2. ㅋㅋㅋㅋㅋ아구몬ㅋㅋㅋㅋㅋㅋㅋ

    익명489 2013.07.02 00:08 신고   link delete reply
  3. 아 두려워지네요 ㅋㅋㅋㅋㅋ

    익명186 2013.08.13 18:16 신고   link delete reply
    • 컴을ㅋㅋㅋㅋㅋ 끄셈ㅋㅋㅋㅋㅋㅋㅋ 책을ㅋㅋㅋㅋㅋ 펴셈ㅋㅋㅋㅋㅋ

      link delete 2013.08.13 21:24 신고 Favicon of https://blog.jinh.kr JinH
  4. 퍼갑니다.

  5. 0에서 안가는데

    익명894 2013.11.07 22:28 신고   link delete reply
  6. 2015 수능 디데이 카운터 http://jinh.tistory.com/333

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

설명

  • 아래 폼에 한글 입력 후 버튼을 누르면 모스 부호로 변환.
  • 한글, 영어, 숫자, 기호 그냥 다 됨. 오예!
  • 웹 상에서 바로 적용.
  • 왠지 쿨함.
  • 어째선지 멋짐.
  • 알 수 없지만 끌림.
  • 자매품 모스 부호 해석기 파워 출시!

 

· · · ·  ·  · – · ·  · – · ·  – – –    · – –  – – –  · – ·  · – · ·  – · ·  – · – · – –

 

기록

----------------------------------------------------

2013.02.19.	ver.1.2.2	23.2KB

기호 문자 패턴 추가.

----------------------------------------------------

붙임 #1: 더 보기

  1. 모스 부호(Morse code) 해석기
  2. 안드로이드용 모스 부호 변환기 어플
  3. 크롬 웹스토어용 모스 부호
  4. 웹킷 브라우저 & 모바일용 모스 부호 사이트


붙임 #2: 출처 및 참고

  1. 위키백과, "모스 부호"
  2. note of paranbyul, 파란별, "한글 음소 분리 코드"
  3. nskystars, "Nabi on Javascript"


퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 이전 댓글 더보기


  2. · · – – –  – – – – –  · – – – –  – · · · ·  · – · – · –  – – – – –  – – – – ·  · – · – · –  · – – – –  – – – – ·    · · – – –  – – – – –  · – – – –  – · · · ·  · – · – · –  · – – – –  – – – – –  · – · – · –  · – – – –  – – – – ·

    익명178 2016.09.14 16:07 신고   link delete reply
  3. —∗——∗∗——∗—∗——∗
    ∗———∗∗∗∗—∗—∗∗
    —∗——
    이것좀 해석해주세요

    Zero 2016.10.23 22:11 신고   link delete reply
  4. 천재신듯.....ㄷㄷ

    야옹 2016.12.30 21:50 신고   link delete reply
  5. – · –  · · –    – – ·  – – · –  · – · ·  · – · ·  · · –  – · · ·  – · ·  · · · –    – · –  –  – –  – –  ·    – –  ·  · · · –    – · –  ·  · · – ·  – · · ·  – · ·  – · · ·  · – · ·  · –    · – · ·  – · – –  – · –  · · –  – –  · – – –  ·  · · – ·  – · ·  · · – ·  · – · ·  · · · ·  · · – ·  ·  · · – – · ·    – · –  · · ·  · – · ·  · · –  · – · ·  · – · ·  ·  · – – ·  · · –    – · –  –  – –  – –  ·    – – ·  · –  · – · ·    – – · ·  –  · – – ·  · · –  · · – ·  – · ·  · · – ·    – – ·  · –  · · · –  · · –    – · · ·  – · ·  · · · –  · · · –  · · –  · · – ·  – · · ·  ·    – – –  –  – · –  – – –  –  – · – 

    익명850 2017.01.31 14:36 신고   link delete reply
  6. ㅡㅡ. .... .ㅡ.. .ㅡ ㅡ... ㅡ.. ...ㅡ .ㅡㅡㅡ . ㅡㅡ. ..ㅡ .ㅡㅡ ..ㅡ. ..ㅡ ㅡ... .

    익명531 2017.04.09 16:34 신고   link delete reply
  7. · – – · · – – · · · · · – – · – – · · · · · – · – – – · · · · – – – · · · · · – · – · · – – – · – – · – · – – · · – – · · · · · – · · – – · · – · – – – · – · · – · – – – – · – – · – · · · · · – · – · –

    익명429 2017.04.30 11:53 신고   link delete reply
  8. · – – –  · · –  – · –  –  · · · –  · –  · – – ·  – · ·    – · –  · –  · – –  – · ·    – · · ·  –    – – ·  – · ·  – – · ·  · –  – – 

    출처: http://jinh.tistory.com/670 [Sample]

    익명217 2017.06.17 15:04 신고   link delete reply
  9. · – – –  · · –  – · –  · –  – – ·  – · ·    · – – –  ·  · – – ·  ·

    익명626 2017.07.20 13:17 신고   link delete reply
  10. – · · ·  · · –  · – · ·  – · ·  – · · · 

    익명834 2017.08.17 17:35 신고   link delete reply
  11. · – · · · – – · · – · – · · – · – – – · · – – · – · – – – · – · · · – – – · · – – · · · – – · – · · · – · · – – – – · – – · · · · · – · · · – – – · – · · – – · · 

    익명648 2017.09.25 12:50 신고   link delete reply
  12. · · – ·  –  – · · ·  · –    · – –  · · ·  – · –  – – ·  · · –  · · – ·  – · –  · · –  – · –  · · 

    익명86 2017.11.09 15:01 신고   link delete reply
  13. 사랑ㅎh

    익명766 2017.11.21 11:00 신고   link delete reply
  14. – ·  – – ·  – – –  – · ·  – · · · · –  – – – – –  · – – – –  – – – – · 

    익명304 2017.12.26 13:08 신고   link delete reply
  15. – ·  – – ·  – – –  – · ·  – · · · · –  – – – – –  · – – – –  – – – – ·

    익명419 2017.12.26 13:39 신고   link delete reply
  16. 머시써

    익명73 2018.01.08 02:52 신고   link delete reply
  17. 이거 일어는 안되나봐요...ㅠㅠ

    익명670 2018.02.03 21:22 신고   link delete reply
  18. – · –  ·  – · –    · – · ·  – – · –  · – · ·  · – · ·  · · · ·  · · · –  – · · ·  – · · ·  · · – ~

    익명980 2018.02.04 01:35 신고   link delete reply
  19. 익명997 2018.04.11 21:55 신고   link delete reply
  20. – – ·  · · –  · – –  ·  · · · – 

    출처: http://jinh.tistory.com/670 [Sample]

    익명717 2018.04.11 21:55 신고   link delete reply
  21. · – · ·  – – · –  · – –  ·  · · · –  · – – ·  ·  · · – ·  · · –  – –    – – ·  ·  · · · –  ·  – · –  · – – –  – – · –  – · –  – ·  – · – · – –  

    익명908 2018.04.21 22:44 신고   link delete reply


어휴, 얼굴에 다 묻었잖아.

끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 한국에 유학중인 미국학생입니다. 인종은 black이구요 우연히 보게됐는데 물논 고의가 아닌 장난이겠지만 흑인입장에서는 살짝 기분 나쁘네요

    fromthestates 2016.06.04 21:19 신고   link delete reply
    • 특정 인종을 비하할 의도는 없었습니다.
      단지 흑인이 자장면을 맛있게 먹는 사진을 처음 봐서 신기한 마음에 퍼왔습니다. 사과드립니다.

      link delete 2016.06.08 22:10 신고 Favicon of https://blog.jinh.kr JinH

증상
  1. 익스플로러의 속도가 눈에 띄게 느려짐.
  2. 익스플로러를 실행하면 홈페이지 로딩 중 오류창이 뜨면서 강제 종료.

해결책
실행 -> "regedit"

HKEY_LOCAL_MACHINE / SOFTWARE / MICROSOFT / WINDOWS / CURRENTVERSION / EXPLORER / BIROWSER HELPER OBJECTS 의 하위 항목들을 모두 삭제한다.

해결.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

기존의 [살인 유니콘은 이 안에 있다]와, [내려쳐! 제이, 내려치라고!] 외에도 얻을 수 있는 업적이 1.0.3 패치 이후 추가되었다.

믿을만한 소식통을 통해 은밀하게 입수한 이 자료를 독점 공개한다.


 아니, 이년이?

 철벽의 성채에서 레아의 정체를 알고있는 주민 색출


[아니, 이년이?] 공략.

철벽의 성채에서 주민이 다음의 이야기를 주고받기를 기다림.

소년: 엄마, 레아 누나 어디 갔어? 죽었어?

주민: 그랬으면 좋겠구나.



 추종자님의 행복을 빕니다

 기사단원이 보는 앞에서 요술사에게 기사단원의 속마음 전달


[용병님의 행복을 빕니다] 공략.

기사단원과 요술사 중 한명을 고용한 상태에서 고용 안 한 다른 추종자와 합류하는 퀘스트 진행 도중 다음 대화 듣기.

요술사: 기사단원님이 절 이상하게 대하는 것 같아요.

플레이어: 당신을 사랑해서 그런 겁니다.

요술사: 워라고요?

플레이어: 몰랐단 말입니까?

요술사: 네!


강제고백 ㅋㅋ



 초복! 중복! 말복!

 가라앉은 사원에서 닭으로 라렐, 카렐, 모에크 처치


[초복! 중복! 말복!] 공략.

전설 활 중 닭살을 착용하고 기본 공격을 하면,

닭이 발사됨. 그 외에는 으악! 으악! 으악! 업적과 같음.



 슈퍼사이즈 미

 보관함에 서른 다섯 개 이상의 호라드림 햄버거 보유


[슈퍼사이즈 미] 공략.

알록달록동산에서 얻을 수 있는 호라드림 햄버거.


이런 식으로 모으면 달성.



 디아블로에게 맹독충을!

 악마사냥꾼으로 자폭해서 디아블로 처치


[디아블로에게 맹독충을!] 공략.

지금은 포풍 너프돼 450% 화염 피해가 되어버린, 척탄병 기술을 장착하고 디아블로에게 죽으면서 죽이면 위업 달성.

이론으로만 가능하고 실제로는 획득할 수 없다는 전설의 위업.



끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 진짠줄 알았네

    ㅍㅇㅅㅅ 2012.10.18 01:34 신고   link delete reply
  2. 이런거 더 추가되면 좋겠다
    뻔뻔한 블리자드 놈들 컨텐츠 주영인거 출시하고 업데이트도 존나 늦음

    꼬추 2013.02.18 03:02 신고   link delete reply

디아3 출시 3일이 지난 지금 느껴지는 체감 난이도.


보통난이도 디아블로 난이도: ★☆☆☆☆



로그인 난이도: ★★★★★


서버가 삼일 내내 혼잡함. 내 돈 내고 구입했지만 로그인도 맘대로 못하는 디아블로3 OUT!

난 아시아 버리고 유럽 서버로 갈아탐...



끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 개공감. 나도 서버 옮길까. 히밤
    via Android

    gmdiaiii 2012.05.18 01:01 신고   link delete reply
  2. 유럽 서버 상황은 괜찮나요?
    즐겜하세요.

    • 로그인은 잘 되는데, 친구목록 공유가 안 돼서 나중에 아시아로 돌아와야 할 듯.

      link delete 2012.05.26 21:22 신고 Favicon of https://blog.jinh.kr JinH

요즘은 왠지 글 자체보다 스킨 바꾸는 게 더 재밌어서 스킨을 이것 저것 만져보고 있음.

기존엔 인용구 왼쪽을 두꺼운 은색 테두리로 장식하고, 기울임체로 포인트를 줬었음. 꽤 마음에 드는 스타일 이었는데 요즘 대세인 말풍선으로 갈아치움. 기울임체가 비클리어타입 글꼴에서 눈 아프다는 의견도 받아들여 다시 일반 글꼴로 표시함. 결국 예전처럼 블로그에 설정된 기본 글꼴을 없에버림.

이미지를 되도록 사용하지 않으려는 내 소신에 따라 이미지 없는 말풍선 스타일을 만들기 위해 두가지 기법을 사용했음. 하나는 CSS의 border 속성으로 화살표 부분 생성. 또 하나는 만들어진 화살표를 jquery로 게시물 영역의 모든 blockquote 요소마다 출력.

CSS로 화살표 만드는 방법은 다음과 같음.

arrow_outter { border-color: transparent silver transparent transparent; width: 0; height: 0; position: absolute; border-width: 1ex 1.7ex 1ex; border-style: solid; margin: 10px 0 0 -35px;" }

border 속성을 사용한 요소의 테두리의 상하좌우 경계면이 대각선으로 생성되는 것을 이용해, 한군데만 남기고 투명한 테두리를 만들면 삼각형처럼 보임. 실제로 보이는 부분은 테두리 부분이니까 테두리의 테두리 역할을 할 삼각형 하나를 더 만들어서 뒤에 깔아주면 화살표처럼 보임.

blockquote 요소마다 화살표를 뿌리는 jquery구문은 prepend를 사용했음.

$('blockquote').prepend('<div class="arrow_outter"></div><div class="arrow_inner"></div>);

prepend, apend, apendTo가 다 비슷비슷한 기능.

그래서 완성된 블록인용구 스타일...






...은(는) 이런 느낌.

블록인용구 요소 너비가 브라우저 마다 조금씩 달라서 크롬만 맞춰놨음. 나머지는 안 함.

끝.


퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 결과보기가 없네용.

    실행예제 2015.07.28 21:32 신고   link delete reply
  2. asdfas

    asdf 2016.03.16 16:36 신고   link delete reply

퍼가지 마세요...
링크로 공유하세요 ㅠㅠ
부탁할게요 ^_<~*

test 3-1

test 3-2

test 3-3

test 4-1

test 4-2

test 4-3

모든 글 보기
공지
방명록
Share to...

페이스북 공유

트위터 공유

구글+ 공유

카카오스토리 공유

밴드 공유

Follow & Contact

Facebook

Twitter

Mail

RSS 구독

2007-2016 © JinH