[기타] 포장마차형 인장틀 소개

포장마차를 표현하고자 만든 인장틀 입니다.

 

위와 같은 구조를 따르며, 배경 이미지 교체 만으로 다양한 분위기를 낼 수 있습니다.

다음의 몇가지 예제를 체험해보고, 강의를 참고해 나만의 인장을 만들어 보세요.

물론 그대로 사용하셔도 좋습니다.

(모바일 페이지는 정상적으로 나오지 않으니, 페이지 최하단 'PC화면' 버튼을 눌러주세요)

---

• 카드팩
• 마 격
• 링 크

불렀어?

운고로 전설만 나오는 카드팩!

경험치바가 빨간색일때, 레벨업을 도와주는 기능 입니다.

-

아직 진행중인 인장입니다.

---

여주인 도트 이미지 출처
전체적인 포차 분위기에 영감을 준 작품의 출처
운고로 카드팩 소스공유 (해설/소스)

(소스) - 포장마차 / 포장마차 분위기의 인장. 마격기, 카드팩과 같은 실제 컨텐츠가 어떻게 들어가는 참조.

• 평범함
• 한 줄
• 여러줄
• 어서와

-

1번 메시지 패널

2번 메시지 패널. 여러줄을 수직으로 가운데 정렬하는 방법

3번 메시지 패널

4번 메시지 패널

1번 탭

2번 탭. 한 줄일 경우 수직 가운데 정렬 방법.

3번 탭. 여러줄일 경우 수직 가운데 정렬을 하기위해선, div안에 div를 넣고 부모 div에 display:table;을 주고, 자식 div에 display:table-cell; vrtical-align:middle; 을 주는 방법을 써야 합니다.

4번 탭
줄바꿈 태그나 스타일 속성을 이용해
멋진 인장을 만들어 보세요.

(소스) - 표준소스 / 기본적인 틀만 남겨놓은 가장 짧은 인장. 입문자에게 추천

• 통기타
• 피 크
• 튜 너
• 어서와

1번 메시지 패널

2번 메시지 패널. 여러줄을 수직으로 가운데 정렬하는 방법

3번 메시지 패널

4번 메시지 패널

1번 탭
탭버튼에 백그라운드 속성을 줌으로써
이미지 버튼을 구현합니다.

2번 탭. 한 줄일 경우 수직 가운데 정렬 방법.

3번 탭. 여러줄일 경우 수직 가운데 정렬을 하는법
div안에 div를 넣고 부모 div에 display:table;
을 주고, 자식 div에 display:table-cell;
vrtical-align:middle; 을 줍니다.
이 코드를 그대로 복붙하세요.

4번 탭
탭 내용박스에 padding-top: 5px;을 줌으로써
'4번 탭'이라는 글자가 배경 전자기기의 검은색
부분과 겹치는걸 피했습니다.

(소스) - 어쿠스틱 커스텀 / 기타와 튜너를 활용한 인장. 메뉴 버튼의 모양을 바꾸고자 하는이를 위한 참조용 코드.

• 큐브
• 한 줄
• 여러줄
• 스타일
• 사진1
• 사진2
• 분 할
• 큐 브
• 큐 브

-

1번 메시지 패널

한 줄 가운데 정렬

3번 메시지 패널. 여러줄을 가운데 정렬하는 방법

4번 메시지 패널

5번 메시지 패널
이미지 넣는 법 1

6번 메시지 패널
이미지 넣는 법 2

7번 메시지 패널
화면 분할 하기

8번 메시지 패널

9번 메시지 패널

1번 탭

2번 탭. 한 줄일 경우 수직 가운데 정렬 방법.

3번 탭. 여러줄일 경우 수직 가운데 정렬을 하기위해선, div안에 div를 넣고 부모 div에 display:table;을 주고, 자식 div에 display:table-cell; vertical-align:middle; 을 주는 방법을 써야 합니다.

4번 탭
줄바꿈 태그나 스타일 속성을 이용해
멋진 인장을 만들어 보세요.

5번 탭
이미지를 중앙에서 오리기
이미지 위에 글씨도 쓸 수 있습니다.

6번 탭
이미지를 탭 크기에 맞추어 리사이징 하기.
이미지 위에 글씨도 쓸 수 있습니다.

7번 탭
div 내에서 또다시 영역 분할하기.

어때요, 참 쉽죠?

8번 탭

9번 탭
이 안에 마격도 넣어보세요!

(소스) - 큐브, 커피, 태블릿 커스텀 / 무작위 큐브형 메뉴판과 보다 넓은 컨텐츠 영역을 확보한 인장. 숙련자에게 추천

---

[소스 편집 전 준비물]

1. 메모장으로 편집하는건 탭간격이 뒤죽박죽이 되기에 그다지 좋은 방법이 아닙니다.

2. 지금부턴 Notepad++같은 좀더 강력한 문서 편집툴을 이용하세요.

---

 

[구조 분석]

- 단순한 수정이라면 더 아래쪽의 [입맛대로 인장 수정 하기]항목만으로 가능합니다.

- 분석에 사용된 코드는 버전 업뎃으로 인해 최신의 코드와 많이 다릅니다.

- 그럼에도 다음의 소스분석을 본다면, 구조를 파악하는데 도움이 될 것입니다.

이제 클릭하여 확대해서 보세요.

접기/펼치기 ◀

---

[입맛대로 인장 수정 하기]

- 배경편집, 캐릭터 교체, 메뉴 추가같은 가벼운 수정을 위한 항목입니다.

- 진행중 어려움이 있다면 언제든지 스크립트 게시판에 질문을 남겨주십시오.

<배경 이미지 교체>

표준소스를 예로 들겠습니다.

1. 아래의 이미지를 우클릭해 개인PC로 복사해 가십시오.

2. 그 후 포토샵, Paint.Net 등등 레이어 기능을 지원하는 프로그램을 이용해

449*340 크기의 원하는 배경을 그리십시오.

3. 이것은 하나의 예시입니다 ▼

4. 이제 인벤 인장용 이미지 게시판에 사진을 등록하고, 사진에 '우클릭-이미지 주소복사' 하십시오.

5. 소스코드 20번줄

background: url(https://upload2.inven.co.kr/upload/2017/07/07/bbs/i14682684611.png) no-repeat center;

부분의 저 링크를 복사해온 값으로 교체하십시오.

<새로운 메뉴/메시지/탭 추가>

※ 이 설명에 사용된 그림은 구버전의 코드를 이용합니다.

복붙할땐 항상 게시물 최상단에 제공되는 최신버전의 소스를 이용합시다.

1. 메뉴판을 추가 삭제하는건 <li></li> 태그로 둘러쌓인 영역을 넣거나 빼기만 하면 되는 아주 쉬운 작업입니다.

2. 다만 메뉴판을 새로운 메시지 패널과 탭에 연결짓는걸 잊지 마십시오.

메시지와 탭 속성의 data-inven-tab-id 값을 새로 적고(복붙할때 id 바꾸는거 까먹지 마십시오.)

메뉴판의 data-inven-tab-for 속성에 연결하십시오.

3. 기억하십시오. 메뉴판 하나는 반드시 메시지패널과 탭 패널 하나씩에 연동됩니다.

메뉴판을 추가했으면 메시지패널도, 탭 패널도 하나씩 추가하십시오.

메뉴판을 지웠으면 메시지 패널도, 탭 패널도 하나씩 지우십시오.

<캐릭터(포차 주인) 교체>

1. 62 * 94 크기의 이미지를 준비하십시오. (GIF, PNG, JPG)

2. 이것은 하나의 예시입니다. ▼

 

3. 이제 인벤 인장용 이미지 게시판에 사진을 등록하고, 사진에 '우클릭-이미지 주소복사' 하십시오.

4. 표준 소스코드 173~184번줄에 위치한 div박스의 style 속성에 다음의 코드를 추가하십시오.

    background: url(당신의 이미지 주소를 넣으세요) no-repeat center;

<정보가 출력되는 <!-- 탭 --> 박스를 좀 더 위쪽으로 끌어올리고 싶을때>

1.하단에 좀 더 많은 물체를 그리거나, 나만의 아이콘 공간을 확보하기 위해서 등

  무언가의 이유로 정보출력 박스를 어느 한 쪽으로 끌어오고 싶을 수 있습니다.

2. 굉장히 간단합니다. 먼저 <!-- 탭 --> 이라고 적혀있는 위 그림의 코드를 찾으십시오.

3. 이제 margin: 84px 0px 0px 91px; 을 필요한 만큼 조정하십시오.

각각 <!-- 탭 -->박스로부터의, margin: 상단여백 우측여백 하단여백 좌측여백; 입니다.

<메뉴명을 가로로 쓰고싶을 때>

1. 코드에서 <!-- 탭 버튼 --> 이라고 주석이 달린곳을 찾습니다.

2. 위 이미지를 참조하여 메뉴버튼의 가로, 세로폭을 바꾸고

  writing-mode:tb-rl;을 지운다음, text-align: center; 로 수정합니다.

3. 이때 line-height 값은 세로쓰기 라면 width와 동일하게 적어주고,

가로쓰기라면 height와 동일하게 적어줍니다.

이게 텍스트가 한 줄일 경우 가운데 정렬하는 CSS의 방법입니다.

<탭 내용 박스 늘이기>

1. 내용을 넣기에 기본으로 주어진 탭 박스가 작을 수 있습니다. 이럴때 확장하는 방법입니다.

2. 늘이는건 쉽지만 정확한 절차를 따르십시오. 여기선 위 이미지처럼 늘이는 방법을 소개하겠습니다.

3. 먼저 표준소스에서 <!-- 탭 --> 주석을 찾아가십시오.

  이곳의 width: 272px;은 그대로 두고, height: 194px;을 height: 244px;로 수정 하십시오.

4. 다음으로 <!-- 탭 내용 박스 --> 를 찾아가십시오. (Ctrl+F로 쉽게 찾을 수 있습니다)

  이곳의 width: 270px;은 그대로 두고, height: 97px;을 height: 145px;로 수정 하십시오.

5. 마지막으로 <!-- 탭 내용 박스 --> 안에 위치한 여러개의 탭 패널이 가진

  모든 line-height: 97px;을 line-height: 145px; 로 수정 하십시오.

(표준소스에서 아무것도 건들지 않았다면, 탭 패널이 4개 있을테고, 그중에 line-height를 가진 패널은 단 하나 뿐입니다)

<메뉴 버튼 모양 바꾸기>

1. 준비중...

<설명할게 많은데...>

1. 조금씩 보충해 나가겠습니다.

2. 멋진 하루되세요!

<수정 내역>

2017년 7월7일	게시물 등록
2017년 7월8일	IE, Chrome에서 폰트가 다르게 나타나는 문제가 있어 폰트 단위를 수정함. font-size: 4pt; -> font-size: 0.85em;브라우저에 따라 &nbsp문자가 깨지는 문제가 있어 전부 제거.메시지 패널내에 여러줄의 문장이 들어갈시 수직정렬이 깨지는 문제를 개선.
2017년 7월9일	어쿠스틱 테마의 인장틀 예시코드 추가 표준 소스코드에서 의미없는 margin, padding 수정코드 제거 큐브, 커피, 태블릿 테마의 인장틀 예시코드 추가