위의 이미지는 현재 제 사이트인 Angel Wing(http://www.angelwing.kr)의 메인에 노출된 2단 추출 게시판입니다.
그리고 아래는 엔츠국장님의 사이트인 엔츠케스트(http://dlcast.ohpy.com/)의 메인에 추출된 2단 추출 게시판들입니다..
현재 오피의 팁 강좌게시판에도 lovecss님의 강좌가 올라가있기는 하지만 이 방법을 사용하게되면 오피의 기본 스킨을 그대로 사용하게 됩니다..
즉,자신만의 홈페이지를 꾸며보자는 분들에게는 부족할수도 있습니다..
물론 lovecss님의 강좌가 부실하다는건 아닙니다....아주 훌륭한 내용이지만....저는 여기에 약간 더 응용을 해서 그리고 약간 더 보강을 한 방법입니다...
일단 포토샵을 기본적으로 다룰줄 알아야한다는 단점이 있습니다....
일단 필요한 프로그램은 포토샵(아무 버전이나 다 상관없습니다^^;;;)과 나모웹에디터(는 사용하셔도되고 자신있는분들은 메모장이나 워드패드에서 바로 수정하는것도 됩니다.)입니다...
아참....그리고 메모장보다는 워드패드로 수정하는게 더 편하니 참고하세요^^;;;
자신만의 2단 추출 게시글을 사용하고자하는분들은 계속 읽어주시고...난 그냥 lovecss님의 강좌대로 할란다하는분은 백스페이스바를 지긋히 눌러주세요^_^;;;
일단 포토샵을 기동시킵니다..포토샵을 기동시킨후에.....바탕이되는 이미지를 만들어야겠지요^^;;;;
아참 그전에 게시글 추출을 하게되면 lovecss님의 강좌대로 아이디와 밑에 게시글 내용을 추출할수가 없게되니 이점 양해해주시길 바랍니다.
소스부터 올리겠습니다..(아래소스는 예전에 오피관리자가 올린 공지내용입니다.)
1. 게시물 추출 방법
사용 태그
RecentPost
사용 속성 (* 표시가 된 속성은 반드시 입력해야하는 속성입니다.)
bbs_no 게시판 번호 (*)
length 게시물 제목 길이
is_new New 아이콘 표시 여부(Y/N)
group 그룹
사용 예
<RecentPost bbs_no="142739" length="30" is_new="y" group="1">최근게시물입니다.</RecentPost>
원하시는 위치에 이 태그를 사용하시면 운영하고 계신 홈페이지의 142739번 게시판에서 가장 최근 게시물 1개를 추출하는데
제목을 영문 기준으로 30자 추출하고 새로 올라온 게시물에는 NEW 아이콘을 표시하게 됩니다.
"최근 게시물입니다." 문구는 자유롭게 변경해서 사용하실 수 있으며 실제 화면에는 표시되지 않는 부분입니다.
게시판 번호를 확인하는 방법은 해당 게시판에 등록된 게시물의 주소에서 다음 부분을 확인하시면 됩니다.
또한 한 게시판에서 여러개의 최근 게시물을 추출하실 경우에는 다음과 같이 태그를 연속해서 사용하시면 됩니다.
<P><RecentPost bbs_no="142739" length="30" is_new="y" group="1">최근게시물입니다.</RecentPost></P>
<P><RecentPost bbs_no="142739" length="30" is_new="y" group="1">최근게시물입니다.</RecentPost></P>
<P><RecentPost bbs_no="142739" length="30" is_new="y" group="1">최근게시물입니다.</RecentPost></P>
<P><RecentPost bbs_no="142739" length="30" is_new="y" group="1">최근게시물입니다.</RecentPost></P>
<P><RecentPost bbs_no="142739" length="30" is_new="y" group="1">최근게시물입니다.</RecentPost></P>
원하시는 위치에 위의 태그를 삽입하시면 운영하고 계신 홈페이지의 142739번 게시판에서 최근 5개의 게시물을 세로로 추출하게 됩니다.
2. 최근 게시물 날짜 추출 방법
사용 태그
RecentPostDate
사용 속성 (* 표시가 된 속성은 반드시 입력해야하는 속성입니다.)
bbs_no 게시판 번호 (*)
type 날짜 표시 타입
group 그룹
사용 예
<RecentPost bbs_no="142739" length="30" is_new="y" group="1">최근게시물입니다.</RecentPost> <RecentPostDate bbs_no="142739" type="Y-m-d" group="1">2007-11-27</RecentPostDate>
원하시는 위치에 위의 태그를 삽입하시면 운영하고 계신 홈페이지의 142739번 게시판에서 최근 게시물 1개를 추출하고
그 뒷부분에 해당 최근 게시물의 날짜를 표시합니다.
"2007-11-27" 부분은 자유롭게 변경해서 사용하실 수 있으며 실제 화면에는 표시되지 않는 부분입니다.
날짜 표시 타입은 다음과 같이 입력하시면 됩니다. (타입을 지정하시지 않을 경우 기본 타입인 2007-12-14 형태로 표시됩니다.)
y-m-d 07-12-05
y-m-d h:i:s 07-12-05 09:00:00
Y,m,d 2007,12,05
Y 2007
m.d 12.05
Y: 연도 전체 표시
y: 연도 뒷 2자리만 표시
m: 월
d: 일
h: 시
i: 분
s: 초
최근 게시물 추출과 마찬가지로 해당 태그를 연속해서 사용하시면 사용하신 개수 만큼 최근 게시물과 날짜가 추출되오니
다양하게 활용하실 수 있을 것입니다.
3. 최근 게시물의 이미지 추출 방법
사용 태그
RecentPostImage
사용 속성 (* 표시가 된 속성은 반드시 입력해야하는 속성입니다.)
bbs_no 게시판 번호 (*)
width 이미지 가로크기
height 이미지 세로크기
group 그룹
사용 예시
<RecentPostImage bbs_no="142739" width="100" height="100" group="1">최근글 이미지</RecentPostImage>
원하시는 위치에 위의 태그를 사용하시면 운영하고 계신 홈페이지의 142739번 게시판의 최근 게시물에 포함된 이미지 1개를
가로 100px, 세로 100px 크기로 추출합니다.
"최근글 이미지" 문구는 자유롭게 변경하여 사용하실 수 있으며 실제 화면에는 표시되지 않는 부분입니다.
이 태그를 좀 더 활용하면 다음과 같이 사용할 수 있습니다.
<RecentPostImage bbs_no="142739" width="100" height="100" group="1">최근글 이미지</RecentPostImage><RecentPostImage bbs_no="142739" width="100" height="100" group="1">최근글 이미지</RecentPostImage><RecentPostImage bbs_no="142739" width="100" height="100" group="1">최근글 이미지</RecentPostImage><RecentPostImage bbs_no="142739" width="100" height="100" group="1">최근글 이미지</RecentPostImage>
원하시는 위치에 위의 태그를 삽입하시면 운영하고 계신 홈페이지의 142739번 게시판의 최근 게시물 4개에 포함된 이미지를
가로 100px, 세로 100px 크기의 이미지로 가로 방향 4개를 추출하게 됩니다.
4. 게시판 연결 방법
사용 태그
Bbs
사용 속성 (* 표시가 된 속성은 반드시 입력해야하는 속성입니다.)
bbs_no 게시판 번호 (*)
img 이미지로 링크 걸 경우, 이미지 url
string 이 문자열로 게시판 링크걸기
target 링크 target
사용 예시
<Bbs bbs_no="142739" img="http://img.ohpy.com/imgurl.jpg" target="_blank">게시판 제목</Bbs>
원하시는 위치에 위의 태그를 사용하시면 해당 위치에 "http://img.ohpy.com/imgurl.jpg" 이미지를 표시하고 해당 이미지의 링크를
운영하고 계신 홈페이지의 142739번 게시판에 연결합니다. 또한 target을 "_blank"로 지정하였으므로 링크는 새 창으로 열리게 됩니다.
"게시판 제목" 부분은 자유롭게 변경하실 수 있으며 실제 화면에는 표시되지 않습니다.
<Bbs bbs_no="142739" string="게시판 연결" target="_blank">게시판 제목</Bbs>
원하시는 위치에 위의 태그를 사용하시면 해당 위치에 "게시판 연결" 문구를 표시하고 해당 문구의 링크를
운영하고 계신 홈페이지의 142739번 게시판에 연결합니다. 또한 target을 "_blank"로 지정하였으므로 링크는 새 창으로 열리게 됩니다.
"게시판 제목" 부분은 자유롭게 변경하실 수 있으며 실제 화면에는 표시되지 않습니다
이 소스들을 그대로 응용하면 됩니다..아참 그전에 이 소스를 사용하기전에 미리 게시글 추출을 해두시는게 나으십니다..저같은 경우는 테스트 계정의 텅 비어있는 인트로를 활용했습니다...
그리고 그걸 이용해서 아래와 같은 이미지를 만들어보았습니다^^;;;;
(저는 예전에 만들어준 이미지를 사용하겠습니다)
이제 이걸 이미지 레디로 분활하는것이 중요합니다...
여기서 두가지 방법이 있습니다.
이렇게 일일히 하나씩 다 분활하는 방법이 있습니다..이렇게 하면 노가다가 매우 심한편이니 알아주시길 바라구요...
이미지가 출력되는 이미지부분은 그냥 통짜로 해도 상관없습니다^^;;;;
이렇게 하는 이유는 네모웹에디터이나 드림위버등에서 지원하지않는 줄을 넣을때 사용합니다^^;;;;
자신만의 독창적인 방법으로 게시글들을 구분할 선을 넣으실때 사용하는 노가다방법입니다;;;;
그리고 나모웹에디터나 드림위버등에서 지원하는 선으로 만들때에는 그냥 편하게..이렇게...
이렇게 통짜로..........하시는게 더욱더 편합니다^^;;;
아참 이 작업을 하기전에 위의 방법으로 하시는분들 같은 경우는 미리 게시글 크기를 염두해두고 분활하셔야합니다..
안그러면 레이아웃이 엉망이 되니 알아주시길 바랍니다...
몇번 시행착오를 거쳐야하는 부분입니다^^;;;
무책임한 말처럼 들리겠지만...이부분은 개인 역량이 중요한 부분이라는겁니다-_-;;;
이제 분활이 모두 끝났으면......나모웹에디터등과 같은 에디터 프로그램을 뛰웁니다...
메모장으로 하셔도 상관없지만 매우 심한 노가다작업이니..이게 속편하죠^^;;;
이제 이미지레디에서 저장을 합니다.
파일에서 최적화 다른 이름으로 저장을 선택하신뒤에
이런식으로 html및 이미지방식으로 저장을 합니다..
그 이후 image폴더 하나랑 html파일이 하나 생성됩니다......
이미지폴더에 있는 이미지를 자신의 오피 계정으로 하나 하나 다 업로드 합니다^^;;;
그리고 업로드가 끝나면...
나모에 등록되어있는 이미지파일의 주소를....
전부다 자신의 오피의 이미지파일 주소로 변경합니다..
역시 노가다입니다-_-;;
분활을 얼마나했냐에 따라서 노가다의 강도가 변합니다-_-;;하핫;;;;
그후......
나모웹에디터에서 게시판의 제목부분과 게시글 부분을....
나모웹에디터에서 Delete키를 눌러서 삭제해줍니다^^;;
그리고...게시판 제목부분에는
<BBS bbs_no="32173" target="_self" img="http://pic4.ohpy.com/up/elbbs/2008/06/28/47897/796194918/moon_10.png">공지게시판</BBS>
위의 태그를 넣어주시면 됩니다...^^;;;;
그리고 게시판 글 부분에는
<RecentPost bbs_no="32173" length="54" is_new="n" group="1">최근게시물입니다.</RecentPost>
이부분을 넣어주시면 됩니다...그리고 다 수정하게되면 나모에서는 이렇게 보입니다.
이런식으로 보입니다^^;;;
이렇게 보이는것이 정상입니다^_^;;
왜냐하면 css태그 자체가 나모웹에디터에서 지원을 하지않기때문이지요.......이제 이렇게 만든 소스를 대문에다가 적용하면 끝입니다^^;;;;;
그리고 게시글 길이 조절을 잘 생각하고 하시길 바랍니다^^;;;
게시글이 너무 길게되면 아래로 내려가면서 전체 레이아웃이 깨져버리기때문입니다...
이렇게 강좌를 끝내는것도 좋겠지만...^^;;;
이런 노가다가 아닌 아주 간단하게 하는 방법도 올려보겠습니다^^;;;
일단 나모로 표를 만든뒤에 표크기를 자신의 홈페이지에 맞게 수정을 해줍니다...
그리고....
일단...표가 안보여야하니^^;;;
나모에서 표 편집창에 들어갑니다^^;;;
표 속성에서 테두리값을 0으로 조절해줍니다^^;;;
그럼 에디터창에는 이런식으로 보입니다....
이걸 미리보기로하면 하나도 안보입니다........뭐야...이게..이러면 밑에 줄은 어떡해하느냐 하는분들 끝까지 읽어주세요^^;;;
제가...나모웹에디터를 능숙하게 다루질못합니다...이점 양해해주시길바래요^^;;;;
메모장과 포토샵 작업에 익숙하다보니.....한번에 할수 있는부분도 여러번으로 나뉘게되네요^^;;
일단 표메뉴에서 셀테두리을 선택합니다..
그러면 경고창이 하나떠서 CSS테두리로 변경할꺼냐고 물어보는데 당연히 YES를 눌러줍니다^^;;;
이런식으로 하나하나 눌러가면서 자신의 취향에 맞게 바꾸어주면됩니다^^;;;;;
그리고 표안에다가.....위의 게시판 추출 소스를 집어넣으면됩니다..-ㅁ-;;;
적용했을때 이런식으로 보인다면 성공적으로 적용된것입니다...
하지만 배경색상을 넣어봐야겠지요^^;;;
포토샵에서 이런 스포이드 모양의 버튼을 누른뒤에 자신이 변경할 색상위에 클릭해줍니다~
색상이 변경된 네모난걸 클릭해줍니다...그러면 이런 창이 뜨는데 가장 아래의
#부분에 붙어있는 f3e1f0이 값이 색상 코드입니다...
이부분을 드래그해서 복사합니다...다시 나모로 넘어와서...
표속성에서 색깔을 클릭해주시면 옆에 스포이드옆에 뭔가 적혀있는게 보일껍니다..여기에 복사/붙여넣기하면됩니다^^;;;
복사/붙여넣기후 다른건 건들지말고 바로 엔터를 눌러주면 이런식으로 색상이 변경됩니다...^^;;;
이제 이 소스를 적용하는일만 남았습니다...
아까 분활해둔 이미지에서
게시글을 넣을 부분을 삭제하신뒤에...^^;;;
방금 만들어두었던 소스를 적용하시면됩니다...하지만 여러번 시행착오를 거칠듯하네요^^;;;
실패를 하셔도 실망하지마시고 계속 도전하시다보면......좋은 홈페이지를 꾸밀수 있을듯하네요^^;;;
그런데...개인적으로는...저는 아래의 방법보다는 위의 방법이 더 편하네요-_-;;;
물론 위 방법이 더욱더 노가다이기는 하지만요..하핫;;;
나 쿠루루 닮았나-_-;;왜 남들과는 반대로 하는걸 더 좋아하는지....쿠쿠쿠(죄송합니다~꾸벅~;;;)
암튼 허접한 강좌이지만 조금이나마 도움이 되었으면 정말 좋겠습니다^^;;;;
허접하고 어렵기만한 강좌를 끝까지 읽어주셔서 정말 감사합니다-_-;;;
야 밤에 술먹고 쓰는 강좌라 더욱더 복잡하고 이상하지만......그래도 참고자료로 사용하시면 좋을듯하네요;;;;
