1. 개요

스몬하면서 카드를 필터링해서 좀 더 쉽게 확인하기 위해 개발하기 시작함. / 물론 일단 개인용도로 쓰려고 ㅎㅎ

2. 변경 내역 + 소스 발췌본

• v0.03 : 카드 기준 배경색 추가 + 이름표시 + 능력치 표시
• v0.02 : 색상 + 버전 기준 교차 필터링 추가
• v0.01 : 최초작성

주요 변경사항 : 카드가 너무 심심해 보여서 배경색을 추가 했습니다. 물론 대충

이전 버전 위 그림과 비교해서 보면 뭔가 많이 늘어난 것 같아 보이네요 ㅋ
오늘은 css 쪽을 공유 해 보겠습니다. 원래는 scss 같은거 써서 좀더 보기쉽게 표현하는 것이 좋지만 어딜가나 기본이 중요하니 :) 그렇다고해서 제가 퍼블리싱을 전문으로 한 것은 아닌지라 그냥 대충 인터넷에서 주워다가 주섬주섬 껴 넣었네요 ㅜㅜ

.flex-container > div {
    /*-webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/

    /* 300 420 */
    width: 130px;
    height: 180px;
    
    border-color: black;
    border : solid 1px;
}

div.header {
  width: 130px;
  height: 30px;
  text-align: center;
}
div.cards {

  width: 130px;
  height: 90px;

  background-repeat:no-repeat; 
  background-size:160px 210px; 
  background-position: -10px -10px; 
}
div.footer {
  width: 130px;
  height: 60px;
  text-align: center;
}

div.blue{
  background-color: rgb(9,87,130);
}
div.red{
  background-color: rgb(79,2,3);
}
div.white{
  background-color: rgb(95,131,151);
}
div.black{
  background-color: rgb(1,1,1);
}
div.green{
  background-color: rgb(5,64,5);
}
div.gold{
  background-color: rgb(60,20,90);
}
div.gray{
  background-color: rgb(51,51,51);
}

3. 기능 구현 진행 사항

STEP 1 : (진행중) 전체 카드 가지고 필터링 하기

• 현재시간 스타터팩 구매 비용
• 현재시간 시즌 정보 / 랭킹전 정보
• 전체 카드 목록 기준 카드 나열
• 알파 / 베타 / 프로모션 기준 필터링
• 색상(파이어, 어스, 데스, 워터, 골드, 그린) 기준 필터링
• 카드 배경 추가
• 기본 정보 표시 ( 이름, 능력치 등 )
• 카드 희귀도(커몬, 레어, 에픽, 레전더리) 기준 필터링
• 소환사/몬스터 기준 필터링
• 어빌리티(스닉, 탱힐, 독, 힐 ...) 기준 필터링
• 레벨 기준 : 공격력, 스피드, 스킬 동적으로 표현

STEP 2 : (구상중) 내가 보유한 카드와 연동하기 ( 아이디 값 입력 받음 )

• 카드 기준 최고 랩의 고유 아이디 표시하기
• 내 카드 고유 아이디 전체 목록 표시+XP 기준 정렬하기

STEP 3 : (구상중) 피드백 받아서 좀 더 멋지게 꾸미기

4. 맺음말

• STEP 1 이 완료되는 시점에 github 공개를 할 예정 입니다. (지금은 아직 된 것이 별로 없어서 ㅋㅋ)
• 스몬을 가지고서 소소하게 뭐 만들어 보니 재미 있네요 ㅋㅋ
• 다들 즐거운 하루 되세요

자매품 : @steemit.holdem ::: 지루할 때 홀덤 한판 ?!

---

_{Sponsored ( Powered by dclick )}

[중국생활] #31 중국식당의 일반적인 풍경.. 그리고....

^{안녕?? 형들. 카카야 오늘은 중국식당에서 찍은 사진들 대방츨!! 소심한 복수야!! 한국 먹스...}