2017년 9월 27일 수요일

[1] 악튜러스 플레이 (서장, 돔)

(해당 포스트는 예전에 운영하던 네이버 블로그에 2012.09.19일날 게시한 포스트를 새롭게 수정하여 다시 올린 글 입니다.)

본격적인 악튜러스 플레이를 시작 합니다.


게임 시작을 누르니 게임 제작사인 손노리 로고가 뜨는군요.

영화 시작 할때 나오는 회사 로고 같은 느낌이 드네요.

저 로고를 보고 있으면 흥했던 패키지 게임 시절이 느껴지네요. ㅎㅎ


경쾌한 배경 음악과 함께 공화국 수도인 "돔"에 한 마부가 모는 마차에서 게임이 시작 됩니다.


마부는 어느 큰 건물로 마차를 몰더니 그곳에서 검은 제복의 사나이가 내리네요.


엘류어드 등장! 최고 권력자인 수상을 대대로 배출해내는 공화국 최고의 가문인 하인베르그의 후계자이면서도 뛰어난 외모, 능력, 언변이 더해져 공화국 최고의 아이돌로 군림중인 엘류어드로 오프닝은 시작 됩니다.

파티중에 누구랑 시비가 붙었나 보네요.


상대는 겁을 먹었는지 뻔한 말과 함께 도망 갑니다.


첫 장면때 마차 타고 온 검은 제복이 수상의 보좌관인가 봅니다.

엘류어드는 수상이 급히 찾을 정도로 엄청 중요한 인물인가 보네요.


엘류어드가 보좌관을 따라 나서며 경쾌한 음악을 뒤로 하고 서장 오프닝이 끝납니다.


서장

악튜러스는 서장 - 1장 - 2장 - 3장 - 종장 총 5편으로 되어 있습니다.

이중 가장 첫 시작인 서장이 시작 됩니다.


악튜러스는 발매 당시 (2000년 전후) 유행하던 세계 종말의 분위기와 비슷한 스토리를 담고 싶었나 봅니다.

그래서 이렇게 게임 중간중간 요한계시록의 내용이 나오는데 여기서는 대부분 게임 주인공인 시즈를 암시하는 내용들 입니다.



서장의 시작과 함께 악튜러스 전체 지도가 나옵니다.

큰 하나의 대륙 안에 세개의 큰 지명이 보이는데요. 각각 악튜러스 내에선 위에는 제국, 왼쪽에는 공화국, 오른쪽은 왕국으로 불립니다.

그 외에도 글자들이 거의 보이지 않는 작은 지명들도 있는데요. 저기 있는 지명들 모두 나중엔 구석구석 돌아 다니게 됩니다. ㅎㅎ



서장은 시작과 함께 플레이 시작점을 직접 고를 수 있습니다.

어느쪽을 선택하든 스토리나 플레이에 있어 아무런 지장이 없으니 마음편히 아무거나 고르시면 됩니다.

왼쪽은 방금 오프닝때 등장했던 엘류어드의 돔 이야기며




오른쪽은 왕국의 어떤 조그마한 곳인 트랑퀼리에서 일어난 시즈와 마리아의 이야기 입니다.

제국쪽은 아직 열리지 않아 선택할 수 없습니다.

엘류어드나 시즈쪽 모두 시작하면 다시 선택을 되돌릴수가 없으며 한쪽의 이야기가 끝나면 바로 다른쪽 이야기가 자동으로 시작 됩니다.

각각의 스토리는 생각보다 플레이 시간이 긴 편이지만 시즈의 왕국쪽 이야기가 엘류어드에 비해 압도적으로 많습니다.

둘다 게임을 소개하는 듀토리얼성 이벤트들이 있어 어느쪽으로 하든 게임 플레이를 익히는데 큰 지장이 없으나 큰 도시에서 시작하는 다이아 수저 엘류어드에 비해 촌마을의 흙수저인 시즈나 마리아는 길도 어렵고 그만큼 고생이 많아 난이도가 훨씬 높습니다. ㅠㅠ

오프닝때 수상이 호출한 이유도 궁금하기도 하고, 이야기 순서도 자연스럽기 때문에 저는 이번 플레이는 공화국 스토리를 선택 했습니다.

다음편은 본격적인 서장 스토리가 시작 되겠네요.

[2] 악튜러스 플레이 보러가기
악튜러스 리뷰 전체 리스트로 이동하기
Share:

2017년 9월 26일 화요일

고인돌2 (Prehistorik 2) 공략 & 다운

(해당 포스트는 2013.02.22 예전 네이버 블로그에 작성하였던 글을 새롭게 수정하여 다시 올린 포스트 입니다.)

이번 새로운 게임 카테고리는 고전 도스 게임 고인돌2(Prehistorik2) 입니다.


(어릴땐 모니터에 이 로고만 보여도 행복했던 기억이 나네요)


도스 시절 IBM PC 기반 게임을 출시하여 세계적인 인기를 끌었던 타이터스사의 대표작중 하나 입니다.

91년 출시된 고인돌1이 히트를 친 뒤 인기에 힙입어 2년만에 시리즈작 고인돌2로 돌아 왔습니다만 전체적인 스토리 라인만 비슷할뿐 둘 사이의 이어지는 스토리는 없습니다.




게임 실행시 처음 나오는 이스터 에그성 내용을 담은 창 입니다.

게임을 제작한 타이터스는 옛날에 파산하여 없어졌지만, 20년도 전에 발표된 게임은 아직도 실행되고 있네요.




위 화면이 끝난후 나오는 오프닝성 화면 입니다.

별건 없지만 제가 어렸을적 다녔던 학교 컴퓨터실에선 또래들 사이에서 오프닝 몇시간 틀어두면 원시인 가족 보인다는 소문 때문에 밤에 저 화면 켜두다 부모님께 혼난 기억이 있는 화면 입니다.




간단한 오프닝이 끝나면 게임 실행을 시작 할 수 있는 창이 나옵니다.

숫자 '1' 키를 누르면 게임 난이도를 선택한 후 바로 시작이 되며, '2'키를 누르면 스테이지 별 비밀키를 입력 할 수 있는 화면으로 넘어 갑니다.




이 당시 게임에서는 고급 옵션 급인 게임 난이도를 선택 할 수 있습니다만 초보자와 전문가 두 단계 뿐이며, 초보자 모드는 스테이지 5 까지만 진행할 수 있어 데모 느낌이 물씬 풍깁니다.

초보자 모드를 선택시 스테이지 5를 끝내면 자동으로 게임이 종료 되며, 적들 등장 횟수도 적으며, 패턴도 조금 단순해집니다.




따라서 이번 공략에서는 전문가 모드를 기준으로 하여 모든 게임에 등장하는 모든 먹거리를 찾는걸 목표로 하겠습니다.




시작 화면에서 2번으로 넘어 오면, 스테이지별 암호 입력하여 해당 스테이지 부터 바로 시작할 수 있는 세이브/로드 기능을 볼 수 있습니다.


(공략 작성중 지나쳤던 각 스테이지 별 암호)


이렇게 각 레벨별 암호가 특정한 장소에 있지만 게임을 실행하는 OS 마다 암호가 랜덤하게 변경 되기 때문에 위 사진에 있는 암호는 지금 제가 실행하는 게임에서만 통합니다.

그래서 굳이 게임 소스를 고치지 않은한 자신이 직접 모든 레벨을 클리어 해야만 암호를 통해 다시 갈수 있기 때문에 스테이지 클리어를 하지 못하면 평생 엔딩을 못보는 게임중 하나 입니다. (물론 특별한 엔딩도 없지만요.)

암호 입력을 통해 해당 스테이지에 입장 하더라도 처음 스테이지 도달했던 상태가 처음 게임 시작때와 똑같은 기본 무기, 기본 목숨을 가지고 입장하게 됩니다.



각 스테이지를 상징하는 장애물을 클리어 할 때 마다 하나씩 넘어가 최종 보스인 10 스테이지에서는 검은 석상 앞에 주인공이 도달 합니다.

주인공이 위치해 있는 주변 환경을 보며 (정글, 나무, 눈길 등등) 해당 스테이지의 환경을 미리 짐작 해 볼 수 있습니다.



스테이지를 클리어 할 때마다 클리어 당시 습득한 모든 먹거리를 보너스 점수를 받으며 잡탕을 만들지만


반대로 게임 오버되면 주인공은 그동안 만들었던 잡탕에 추가 재료가 되고 맙니다. ㅠㅠ

고인돌2는 총 10개의 스테이지가 있으며, 최종 스테이지를 클리어 하면 최종 보스와 만나고 가족들에게 돌아 갑니다.

스테이지을 클리어 하는 방법은 두가지가 있습니다.




첫번째는 위와 같이 스테이지 어딘가에 있는 대형 라이타를 먹으면 (스테이지 보스 보상이거나 숨겨진 길에 있을 수도 있습니다)



이렇게 멥 끝에 있는 신호등의 신호가 바뀌게 되고



신호등을 지나가면 스테이지 클리어가 됩니다.




다른 방법은 메인 신호등 외에 위와 같이 작은 간이 신호등을 지나가면



이렇게 보너스 스테이지에 도착하게 됩니다.
보너스 스테이는 아무 조건 없이 멥 끝에 있는 간이 신호등에 다시 도착하면 스테이지 클리어가 됩니다.

슈퍼 마리오에서 비밀 통로로 가면 정식 스테이지 몇개를 스킵하면 지름길이 되듯이 여기서도 보너스 스테이지가 정식 스테이지를 스킵하는 지름길이 되는 곳도 있습니다.




스테이지를 클리어 하고 잡탕을 만들때 위와 같이 점수와 완성도를 확인 할 수 있습니다.

점수는 보너스 목숨과 관련되어 있고 완성도는 해당 스테이지의 먹거리를 얼마나 회수 했는지를 나타내는 표시 입니다.




일반적으로 스테이지별 완성도는 100%가 만점이지만, 몇몇 스테이지에선 만점이 250%를 넘어가는 경우도 있습니다.

이번 게임 공략에서의 위에서 같이 각 스테이지별 모든 먹거리를 회수하는 방법과, 가장 빠른 지름길에 대한 설명을 목표로 포스팅을 작성해 보겠습니다.

그럼 스테이지 1를 공략할 다음 포스트에서 뵙겠습니다. ^^


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

오래된 게임이라 점점 구하기가 어려워진거 같습니다.

필요하신 분은 아래 링크를 통해 받아가세요. ^^

고인돌2다운로드

고인돌2 Level1 공략 보러가기

다른 게임 관련 포스트 보러가기
Share:

2017년 9월 25일 월요일

악튜러스 플레이 시작 (리뷰)

(해당 글은 2012.09.18 예전 네이버 블로그에 작성했던 악튜러스 공략 플레이 글을 새로 수정하여 해당 블로그로 옮긴 포스트 입니다.)




(처음 악튜러스를 실행 하면 나오는 메인 화면 입니다. 가만히 두면 오프닝도 보여 줍니다)


안녕하세요. ^^

이번 게임 카테고리 포스트는 악튜러스 입니다.

악튜러스 리뷰를 작성하기 전에 검색 사이트에 미리 검색해 보니 공략에 관하여 좋은 글들이 상당히 많더라구요.

정리가 잘된 공략들이 많아 악튜러스의 새로운 내용이나 획기적인 공략들은 불가능 하지만 개인적으로 참 재미있게 한 게임이라 새로운 플레이겸 리뷰를 한번 시작해보겠습니다.

원래는 공략이 아닌 리뷰 겸 여행 같은 느낌으로 하기 위해 예전에 클리어 했던 세이브 파일을 통해 장비와 길드를 빵빵하게 챙기고 출발 하려 했으나...



예전의 플레이때 악튜러스 버전과 현재 악튜러스의 버전 차이로 인해 세이브 파일이 호환 되지 않아 위 사진처럼 아무 것도 없은 새출발을 강제로 시작 하게 되었습니다.

그래서 여유롭고 평화로운 게임 리뷰가 아닌 처절하고 활기한 신규 플레이의 느낌 그대로를 리뷰에 담아 가겠습니다.

본격적인 리뷰 시작에 앞서 이번 플레이의 대한 규칙과 정보를 알려드리겠습니다.

아이템 세팅 과정이나 육성의 큰 틀은 이전 포스트인 "악튜러스 추천 아이템 설명, 장소"란 포스트를 기준으로 삼으며 그 외엔 제가 플레이 했거나, 저장한 모든 이벤트와 아이템을 습득하는걸 최종 목표로 플레이 하겠습니다.


⧫ 육성 우선 순위

- 서장부터 1장 까지는 스토리 핵심인 시즈, 마리아, 엘류어드, 텐지를 진행합니다.

- 3장 이후부터는 시즈와 아이, 마리아에 육성 인기가 적은 셀린을 4인 팟으로 구성하며, 엘류어드, 크로이, 텐지 순으로 하겠습니다.

법인류나 마리아도 엄청나게 사기스럽지만 흉악한 텐지는 게임의 재미를 위해 가급적 전투에 넣지 않을 생각 입니다.


⧫ 금지

- 악튜러스에는 벨런스 붕괴급 마법이나 아이템, 기술들이 매우 많습니다. 이를 전부 사용한다면 리뷰의 재미나 긴장감이 반감될꺼 같아 수집은 하거나 잡몹 상대로 테스트는 하지만 플레이는 배제할 금지 조항을 만들어 봤습니다.

(아래 글은 장비에 대한 기본 정보가 없다면 무슨 말인지 알기 어려운 부분 입니다. 자세한 설명은 이전 포스트에 설명이 되어 있으니 참조 부탁드립니다 ^^)

⤉ 장비

1. 튱클레티 : 텐지를 착용한 튱클레티의 악명은 매우 유명합니다. 튱클레티님 없는 텐지는 없는것과 마찬가지지만 게임의 재미를 위해선 안타깝게도 이번 플레이에선 금지 목록 1순위 입니다.

2. 미란도리사 : 텐지와는 다르게 시즈는 미란도리사 없어도 충분히 강하지만 불쌍한 최종 보스를 위해 봉인할 장비가 되겠습니다.

3. 몬 블레이드 : RPG 게임의 하드 카운터격 기술인 렙업 뻥튀기 스킬을 가진 장비 입니다. 물론 부작용도 있지만 존재 자체만으로도 후반부 게임은 이미 끝났다고 봐도 될 정도로 극한 벨런스 붕괴 아이템 입니다.

4. 어척검 : 법인류에 비해 화력이 떨어지는 전사들에겐 단비와 같은 무기지만 충분한 벨런스 붕괴급 아이템이라 리스트에 넣었습니다.

⤉ 마법

1. 3속성 촉매 마법 : 3장 후반부 부터는 3속성 이상이 사용되는 전체 마법은 아예 못쓰도록 핵심 촉매를 일정 갯수 이상은 구입하지 않겠습니다.

2. 화이어 필라 : 2속성 마법이지만 엄청난 연사력으로 적중한 적들은 아무것도 못하고 죽어버리는 최고의 효율을 보이는 마법입니다.

3. 디멘션 홀 : 화이어 필라보다 더한 적을 거의 한두방에 보내 버리는 마법입니다.


위 금지 사항과 육성의 방향을 기본으로 악튜러스 리뷰를 시작하겠습니다.

고전 게임이나 매우 긴 플레이 시간을 가진 악튜러스라 이번 시리즈는 많이 길어질꺼 같습니다.

그럼 다음 리뷰에서 뵙겠습니다. ^^

[1] 악튜러스 플레이 보러가기
악튜러스 리뷰 전체 리스트로 이동하기
Share:

2017년 9월 24일 일요일

C# 폼 이름으로 (String 형태) 해당 객체를 찾아 인스턴스 만드는 방법

디비 조회 결과에서든지 하드 코딩이든 문자열로 된 폼이나 원하는 객체의 이름만 가지고 있는 상황에서 해당 객체(폼)을 찾아 인스턴스를 만들어야 할 경우가 많습니다.

자바의 리플렉션(Reflection)과 똑같이 C#에서도 프로그램이 실행되면서 선언되었거나, 실행에 필요한 모든 객체에 대하여 어셈블리를 통해 정보를 확인, 인스턴스 생성, 형식 변경 등 필요한 작업을 할 수 있습니다.

사용자에 의해 이벤트 발생시 사용자가 선택한 이름으로 된 폼을 임포트 하는 예제를 만들어 보겠습니다.


⧫ 기능 정의
1. 마스터 폼에 여러가지 폼 이름이 적힌 버튼을 사용자가 클릭할수있다.
2. 버튼 클릭시 해당 이름으로 된 폼을 마스터 폼에 실행한다.
3. 다른 버튼을 클릭하면 2번 과정을 되풀이 한다.



⧫ 구현

1. 마스터 폼 디자인


- 크게 두개의 판넬로 반반씩 위치 시켰으며, 왼쪽 판넬에는 사용자가 폼을 선택할 수 있는 버튼을 두었으며, 오른쪽 판넬에는 선택된 폼이 실행될 공간으로 두었습니다.


2. 서브 폼 디자인


- 마스터 폼에 있는 버튼명과 똑같은 서브폼 두개를 만들었습니다. 두 폼은 각각의 폼 이름을 라벨로 중앙에 보여주도록 하였습니다.


3. 마스터 폼 소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
public partial class Form1 : Form
{
    string strFormName = "";
    public Form1()
    {
        InitializeComponent();
    }
    private void button1_Click(object sender, EventArgs e)
    {
        strFormName = "test003.kanadel";
        setForm(strFormName);
    }
    private void button2_Click(object sender, EventArgs e)
    {
        strFormName = "test003.subForm2";
        setForm(strFormName);
    }
    private void button3_Click(object sender, EventArgs e)
    {
        this.panel3.Controls.Clear();
    }
    private void setForm(string strFormName)
    {
        var varPageType = Type.GetType(strFormName);
        var varFormInstance = Activator.CreateInstance(varPageType) as UserControl;
        this.panel3.Controls.Clear();
        this.panel3.Controls.Add(varFormInstance);
        varFormInstance.Dock = DockStyle.Fill;
    }
}

- 각 버튼 클릭 이벤트 부분과 폼 인스턴스 생성하는 매서드 두 부분으로 되어 있습니다.

3# : 폼 이름 변수 선언입니다.
12#, 18# : 각 버튼을 클릭시 폼 이름을 갱신합니다.
13#, 19# : 폼 이름 변수 갱신 후, 인스턴스 생성 매서드를 호출합니다.
29# ~ 30# : 폼 이름을 통해 타입을 확인한 후 UserControl 형으로 인스턴스를 선언합니다.
32# ~ 34# : 선언된 인스턴스를 위치 시킵니다.

@ 폼 이름은 "네임스페이스.폼이름" 형식으로 해야 어셈블리에서 찾을수 있습니다.


4. 서브 폼 소스는 없습니다.


5. 실행

C# 리블렉션 라이브러리에 대한 상세한 정보는 여기를 찾아보시면 됩니다.
(https://msdn.microsoft.com/ko-kr/library/system.reflection.assembly(v=vs.110).aspx)

오타나 잘못된 내용, 질문등은 언제나 환영 입니다. ^^

IT 기술 관련 다른 포스트 보러가기
Share:

2017년 9월 23일 토요일

C# 하위 폼에서 상위 폼의 매서드 호출시키기 (대리자 선언)

하나의 폼 안에 많은 자식 폼들을 생성하여 각각 팝업이나 화면 일부분을 구현 하는 경우가 많습니다.

부모 폼에서는 생성한 자식 폼들의 인스턴스를 가지고 있기 때문에 자식 폼을 컨트롤 하고 객체에 접근하기가 매우 간단합니다.

하지만 반대로 자식 폼 입장에서는 부모 폼의 인스턴스를 가지고 있지 않을 경우엔 부모 폼의 매서드나 객체를 호출하기가 까다롭습니다.

자식 폼에서 이벤트가 발생했을때 필요한 변수와 함께 부모폼에게 이벤트를 전달하거나, 상위 폼의 원하는 매서드를 호출 시키는 방법을 대리자 선언을 통해 알아보겠습니다.


⧫ 기능 정의
1. A와 B 두개의 폼이 있을때 A는 B의 인스턴스를 선언하여 B를 자유롭게 컨트롤 한다.
2. B는 A의 인스턴스를 가지지 않고 필요할때 마다 A에게 이벤트를 호출한다.
3. B에서 A에게 이벤트를 전달할때 마다 원하는 변수로 같이 넘긴다.


⧫ 구현

1. 마스터 폼 디자인

- 크게 두개의 판넬로 반반씩 위치 시켰으며, 왼쪽 판넬에는 전달받은 이벤트를 확인할 레이블과 텍스트 박스를 두었고 오른쪽 판넬에는 생성될 하위폼의 자리를 만들어 두었습니다.

실행된다면 오른편에 하위폼이 보일것이며 이벤트 결과는 왼쪽 레이블과 텍스트 박스에 표현될것 입니다.



2. 서브 폼 디자인
- 유저 컨트롤로 폼을 생성하였으며 중앙에 이벤트를 발생시킬 버튼을 하나 달았습니다.



3. 서브 폼 소스


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public partial class Form2 : UserControl
{
    //Form2 대리자 선언
    public delegate void FormSendDataHandler(Object obj, Object obj2);
    public event FormSendDataHandler form2SendEvent;
    public Form2()
    {
        InitializeComponent();
    }
    //버튼 클릭 이벤트
    private void button1_Click(object sender, EventArgs e)
    {
        //변수1
        string strV1 = "변수1";
        //변수2
        string strV2 = "17.09.23";
        //대리자를 통한 이벤트와 데이터 전달
        this.form2SendEvent(strV1, strV2);
    }
}

- 폼 대리자 선언부와 버튼 클릭 이벤트 크게 두 부분으로 구성되어 있습니다.

2# ~ 3# : 대리자 선언부 입니다. 여기선 변수를 2개 보낼 예정 입니다 변수명과 대리자 이름은 제 임의로 작성하였습니다.

15# ~ 18# : 보낼 변수의 내용을 채웁니다.

21# : 선언한 대리자를 호출하여 대리자가 실행되도록 합니다.



4. 마스터 폼 소스


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
public partial class Form1 : Form
{
    //하위폼
    Form2 form2;
    public Form1()
    {
        InitializeComponent();
        //하위폼
        form2 = new Form2();
        form2.form2SendEvent += new Form2.FormSendDataHandler(receiveFormEvent);
        this.panel2.Controls.Add(form2);
        form2.Dock = DockStyle.Fill;
    }
    //하위폼에서 대리자로 호출된 매서드
    public void receiveFormEvent(Object obj1, Object obj2)
    {
        try
        {
            //변수1
            string strV1 = obj1.ToString();
            //변수2
            string strV2 = obj2.ToString();
            //이벤트와 변수 출력 확인
            label1.Text = "이벤트 수신 완료";
            textBox1.Text = strV1;
            textBox2.Text = strV2;
        }
        catch (Exception exc)
        {
            label1.Text = string.Format("오류 발생 : ",exc.Message);
        }
    }
}

- 하위 폼을 선언하여 배치시키는 부분과 하위폼의 대리자로 실행되는 매서드 두 부분으로 구성되어 있습니다.

4# : 하위 폼 선언
11# ~ 12# : 하위폼 인스턴스를 초기화 한 후 하위폼의 대리자와 실행부를 연결 시킵니다.
13# ~ 14# : 하위폼의 위치를 지정합니다.
18# : 하위폼 대리자를 통해 호출된 매서드 입니다.
23#, 25# : 대리자를 통해 받은 변수를 가공합니다.
28# ~ 30# : 받은 변수와 함께 사용자에게 이벤트 확인용 메시지를 작성합니다.



5. 디버그 실행 순서

- 마스터 폼에서 하위 폼 인스턴스를 생성함과 동시에 하위 폼의 대리자와 연결할 마스터 폼의 매서드를 결정 합니다.

- 하위 폼에서 사용자에 의해 이벤트가 발생되면 대리자명으로 마스터 폼의 매서드를 실행합니다.

- 대리자와 연결된 마스터 폼의 매서드가 실행 됩니다.

- 마스터 폼의 매서드가 종료 되면 하위 폼의 클릭 이벤트 매서드의 남은 부분을 마저 실행 합니다.

- 클릭 이벤트 매서드가 끝나면 디버그를 종료 합니다.

- 대리자로 마스터 폼을 실행하더라도 끝은 하위 폼의 대리자를 보낸 매서드에서 끝나기 때문에 변수 처리나 이벤트 처리에 유의하시면 됩니다. ^^



6. 실행



오타나 잘못된 내용, 질문등은 언제나 환영 입니다. ^^

IT 기술 관련 다른 포스트 보러가기
Share:

2017년 9월 22일 금요일

블로그(Blogger) 및 웹 페이지의 위치를 수정해주는 탑(Top) 버튼 만들기

해당 블로그에 적용된 탑(Top) 버튼 테스트 영상

위 영상과 같이 사용자가 일정한 길이만큼 스크롤을 통해 아래로 내려갔을 경우 자동으로 원하는 위치(가장 윗부분)에 부드럽게 이동시켜주는 기능을 하는 버튼을 만들어 보겠습니다.

탑 버튼은 직접 HTML 문서에 태그를 작성한뒤 대상 태그의 스타일을 CSS문서에 추가하고, 해당 태그의 기능은 Jquery 스크립트로 작성합니다.


⧫ 기능 정의

1. 일정한 세로 길이 만큼 아래로 내려갈 경우 탑 버튼 활성화
2. 일정한 세로 길이 만큼 되돌아 가거나, 탑 버튼을 실행했을 경우 탑 버튼 비활성화
3. 탑 버튼 활성시 해당 페이지의 모든 객체보다 위에 등장한다.
4. 탑 버튼 실행시 부드럽게 원하는 위치로 이동한다.


⧫ 소스 코드

1. HTML

1
<a href='#' id='Top_Bt'>TOP</a>
- 가장 간단한 방법은 위와 같이 앵커 태그 하나만 만드는 경우 입니다.
  태그 아이디를 정하고 앵커는 본페이지 그대로 두시면 됩니다.
  그외에도 탑버튼을 이미지로 하시고 싶으실 경우엔 이미지 태그로 하셔도 깔끔합니다.


2. CSS

1
2
3
4
5
6
7
8
a#Top_Bt{
    position: fixed;
    right: 22px;
    bottom: 22px;
    display: none;
    z-index: 100;
}
/* background: #ddd url(https:image url) no-repeat center center;  */
- 스타일 시트에서는 위에서 정한 탑버튼의 아이디를 따와서 필수적인 스타일 설정을 했습니다.

2# : 탑버튼의 위치를 항상 고정하도록 합니다.
3# ~ 4# : 고정된 탑버튼의 위치를 지정합니다. 저는 오른쪽 아래에 두도록 했습니다.
5# : 탑버튼은 필요할때 활성화 되도록 기본값은 숨김으로 했습니다.
6# : 탑버튼위 위치를 가장 윗쪽으로 두기 위한 설정입니다. 숫자는 왠만한 큰 값이면 상관없습니다.
8# : 만약 탑버튼을 이미지로 하고 싶으실 경우엔 이미지 주소만 넣으시면 됩니다.


3. Jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
$(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 280) {
            $('#Top_Bt').fadeIn();
        } else {
            $('#Top_Bt').fadeOut();
        }
    });
    $("#Top_Bt").click(function() {
        $('html, body').animate({
            scrollTop : 0
        }, 280);
        return false;
    });
});
</script>

- 본격적인 탑버튼 기능 구현입니다.

 3# ~ 9# : 윈도우 스크롤 이벤트 발생시 280을 기준으로 그보다 많이 이동하였으면 탑 버튼 활성화, 그 이하일 경우엔 탑 버튼 비활성화 하도록 하는 기능 정의 입니다.

 11# ~ 16# : 탑 버튼 클릭시 에니메이션 함수를 이용하여 윈도우 최상단으로 이동하는 기능 정의 입니다.

⧫ 구글 블로그에 탑버튼 구현

위 소스를 가지고 구글 블로그에 구현해 보도록 하겠습니다.

1. 블로그 관리 화면에서 테마 - HTML 편집에 들어 갑니다.


2. 위 소스를 <body> 태그안에 넣은후 테마 저장을 합니다.



3. 블로그 관리 화면으로 돌아와서 테마 - 맞춤설정에 들어간 뒤 고급템에서 CSS 소스를 넣습니다.



4. HTML의 스크립트 구분에나 위와 같이 가젯에 스크립트 정의를 넣고 저장합니다.


오타나 잘못된 내용에 대한 문의는 언제나 환영 입니다.

블로그 관련 다른 포스트 보러가기
Share: