이번에는 프로토타입 수준의 코딩을 하겠습니다. 이번 포스팅을 제외하고 앞으로 2번정도(#4가 되면) 더 글을 남길까 합니다. 저도 구현하는 대로 포스트를 남기는 상태라 조금 미흡하더라도 너그러이 채찍질을... 앗 따거..
그럼 일단 마크업과 CSS 를 보겠습니다. 따로 설명을 드리진 않습니다. 별게 없어서요. 그냥 스타일 시트와 HTML 뿐입니다.
마크업입니다.(소스코드는 하단 첨부파일로 대체 하겠습니다. 페이지 로딩이 너무 오래 걸리네요. syntaxhighlight가 힘들어 합니다.)
 ◀▶ 1/4 크게 |
|
마루 밑 아리에티
센과 치히로의 행방불명
토이 스토리 3
몬스터 주식회사
아기공룡 둘리 : 얼음별 대모험
머털도사와 108 요괴
CSS 입니다.(소스코드는 하단 첨부파일로 대체 하겠습니다. 페이지 로딩이 너무 오래 걸리네요. syntaxhighlight가 힘들어 합니다.)
쓸데없이 길기만 하네요. 마크업은 꼭 DTD 선언을 해주셔야 합니다. 저도 DTD 선언을 하지 않고 레이아웃을 짜었는데 원하는 결과가 나오지 않아서 너무 고생했습니다. 그 뒤로 DTD 선언에 중요성을 실감하게 됬죠. 필요하시면 html, head, body 요소를 추가하셔도 무방해 보입니다. 이 두가지를 한 페이지에 넣으셔도 되고 따로 구분하셔도 됩니다. 저는 한페이지에 넣고 작업을 했습니다.
위 두 코딩만 가지고도 화면이 구성됩니다. 일단 화면이 구성되는지 확인하시고 이미지가 엑박으로 나오시는 분들은 아래 첨부파일을 다운로드 하셔서 각자의 경로에 맞게 구성하시면 되겠습니다. 저는 마크업에도 있듯이 images 폴더를 만들어서 그 아래에 이미지들을 모두 밀어넣었습니다. 복사하기 힘들실것 같아 모두 묶어서 아래에서 다운받으실 수 있도록 했습니다.
html 파일과 이미지들로 구성되어 있고 html 파일만 실행시키셔도 내용을 확인하실 수 있습니다.
이제 자바스크립트 부분을 구성해 보겠습니다. 일단 JSON 데이터를 만들어야 하는데요. 화면을 보고 자료구조를 파악하고 그에 맞게 JSON 데이터를 만들어야 하겠습니다. html 파일을 실행시키면 리스트보기, 상세보기, 썸네일 보기가 세로 방향으로 나열되어 있습니다.(나중에는 한번에 하나씩만 나오게 처리가 되야 되겠죠.) 이 화면들을 보고 어떤 자료들이 들어갈지를 찾아야 합니다. 눈에 보이는 요소들만 찾아보겠습니다.
|
|
|
위의 내용의 최소공배수(하하 중학교 수학 등장이네요)를 구해서 자료구조를 만들겠습니다. 조합해보면
itCode, grCode 는 임의로 부여했습니다. 각각의 코드가 나중에 필요할 수 있습니다. 페이지 링크에 인자로 넘어갈 수 있겠죠. 이 데이터 구조를 기본으로 해서 JSON 데이터를 만들겠습니다. 아래와 같습니다.
보기변환.zip<script type="text/javascript">
<!--
var datas = {
config : {
jsonName : "datas", //json 데이터명
dtBody : "data" //data 변수명
},
listConfig :
{
//replace 대신에 들어갈 데이터 객체변수명
dtName : ["grName", "itName", "itMaker", "itNation", "itIssueDt"]
},
detailConfig :
{
//replace 대신에 들어갈 데이터 객체변수명
dtName : ["itImages","itName", "grName", "itMaker", "itNation", "itIssueDt", "itExp"]
},
thumbConfig :
{
dtName : ["itNation", "itImages", "itName"]
},
data :
[
{
itCode : "데이터코드1",
itName : "데이터명1",
grCode : "분류코드1",
grName : "분류명1",
itMaker : "제작1",
itNation : "국적1",
itIssueDt : "개봉일1",
itExp : "설명1",
itImages : ["이미지1","이미지2","이미지3","이미지4"]
},
{
itCode : "데이터코드2",
itName : "데이터명2",
grCode : "분류코드2",
grName : "분류명2",
itMaker : "제작2",
itNation : "국적2",
itIssueDt : "개봉일2",
itExp : "설명2",
itImages : ["이미지1","이미지2","이미지3","이미지4"]
}
]
};
//-->
</script>
자료형의 변수명은 datas 로 명명하고, 그 안의 데이터를 잠깐 보겠습니다. 실제 자료들은 data 라는 내부 변수명으로 접근할 수 있겠네요.
| config | JSON데이터의 기본 설정값 변수명과 실자료의 변수명으로 구성된다. |
| listConfig | 리스트보기에 들어갈 자료의 순서(데이터 집합의 변수명들로 구성한다.) |
| detailConfig | 상세보기에 들어갈 자료의 순서(데이터 집합의 변수명들로 구성한다.) |
| thumbConfig | 썸네일보기에 들어갈 자료의 순서(데이터 집합의 변수명들로 구성한다.) |
| data | 실제 자료들 |
자 이제 어느정도 준비가 된것 같습니다. 그러면 위의 JSON 데이터에서 내가 필요로 하는 데이터를 찾아보겠습니다.
그럼, '두번째 데이터 중에 분류명2를 찾고 싶습니다'라는 것을 구현해 보겠습니다.
var temp = datas.data[1].grName; alert(temp);
원하시는 결과가 나오셨는지 모르겠네요. 원하는 데이터를 찾을 수만 있다면 원하는 위치에 뿌리는 것도 그리 어렵지 않습니다. 지금까지 만들고자 하는 내용의 프로토 타입을 작성했습니다. 말 그대로 이것저것 테스트를 위한 코드 작성입니다. 이것저것 변환하시면서 데이터 접근을 해보시기 바랍니다.
이번 포스팅은 이정도로 마무리 하겠습니다. 그럼 다음번 포스팅은 이 프로토타입을 가지고 좀 더 다듬어서 어느정도 모양새를 갖추도록 하겠습니다. 그럼 빠른 시일안에 정리해서 만나죠. 그럼 즐프~~
ps. 이번 작업은 좀 쓸데없는 작업이기도 한 느낌입니다. 범용적으로 쓸수 있도록 만들기 위해서 고민을 여러차례 했었지만 딱히 묘수가 떠오르지 않더군요. 그래서 시작은 했지만 그 끝이 사미(뱀꼬리)로 갈 공산이 커 보입니다. ^^;;
그래도 끝까지 마무리는 해야합니다. 그럼 다들 다음에~~
| [자바스크립트] Apple.com의 슬라이드 갤러리 (4) | 2011.01.14 |
|---|---|
| [자바스크립트] 탭 메뉴 만들기 (84) | 2010.12.29 |
| [자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - 번외편(?) (0) | 2010.12.29 |
| [자바스크립트] 이미지 슬라이드 (37) | 2010.12.29 |
| [자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #4 (0) | 2010.12.27 |
| [자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #3 (0) | 2010.12.22 |
| [자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #1 (2) | 2010.12.20 |
| [자바스크립트 TIP] tbody.innerHTML 이 안된다고?? (0) | 2010.12.17 |
