웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
아름지기식 홈페이지만들기5
2002.03.16 01:15
흠..오래 기다리셨죠??
넘 늦은것 같네요..
우리동네에..밤에도 환한 농구코트가 있는데,
갑자기 농구가 땡겨서...한께임했죠..이밤에(짐시각밤12시 ^^)
군대가기 전엔 날라다녔는데..군대 가서두 증말 날라다녔는데..
지금은, 아주.....
늙었나 봐용..^^
하하, 각설하구.........
제가 많이 생각해 봤어요...어떻게 하면 강좌가 잼나고 유익할수 있을까..
그래서 내린 결론 -
꼭 필요한 것부터..주욱 내려가 보자!~
제가 내린 결론입니다..
그래서, 전에 말씀드린 내용은 이후로 미루기로 하고,
이미지레디에 대한 적극 활용법..........
사실.......이미지레디만 있어도 어느정도 완성도 있는 홈페이지를
만들수 있습니다.
물론, 제 강좌의 목적이 그렇듯이, 살아남기 위한 편법이죠!~
^^
그럼 오늘의 아름지기식 홈페이지 만들기 파이브 나갑니다..^^
=====================================
이미지레디로 쌈빡한 테이블을 만들어 보자
=====================================
그전에, 아시는 분은 다들 아실테지만, 제가 반한 사이트...
포토샵강좌로 넘 유명한 그곳,
http://photo.ideakorea.com/
이쪽으로 가시면, 정말...새심한 강좌로 여러분의 포토샵의 궁금증을
해소할수 있을것입니다..^^
--------------------------------------------
"미래"...웹이 사라진다면, 그리고 웹디자이너들이 사용하는 그런 지금까지의
기술이 사라진다면..저는 항상 이런부분을 염두하여 두려워 하곤 합니다..
지금은..그럭저럭 이런 잔 기술로 밥먹고(?) 살고 있지만,
웹페이지가 만들어지는 방식이 바뀌어서..지금 가지고 있는 지식이
지식이 아니라면...마치 MS - DOS가 지금 아무런 쓸모가 없고,
(이유는 윈도우가 생겨나서 그렇죠) 그렇게 된다면, 나는 다시 백지 상태가
되는 것이 아닐까...
하지만, 이젠 걱정 놓기로 했습니다..^^
맘 편히 먹고 살기로 했죠..
생각해 보세요..만약 그렇게 된다면, 분명히 어도비社(포토샵만든회사)도
매그로 미디어社도 망해버릴것입니다..^^
헤헤, 제가 이런 말을 하는 이유는..
그쪽 프로그래밍 전문가들도...그런 미래를 대비하기 위해,
항상 준비해 나갈것이고, 포토샵,플래쉬 라는 툴또한 더욱더..
그 기술에 맞게 발전되어 나갈것이기 때문입니다..^^
네, 그렇죠....제가 하려는 말의 요점은 거기서 출발합니다.......
"포토샵"을 만든 어도비社는 살아남기 위해...멋진 프로그램을 만들어
냈습니다.......웹과 공존하는 프로그램..포토샵과는 무언가 다른...
그런 프로그램...바로, 이미지레디죠..^^
포토샵을 웹과 더욱더 매치되게 사용할수 있는 그런툴...이미지 레디..^^
여러분과 저는 그것을 이제 부터 배우는 것입니다..^^
그중에서도...아주 아주 멋진 기능.......그리고 잼나는 효과....
슬라이스툴(SLICE TOOL),그리고 TWEEN
여러분들은 이 두가지 기능에 주목할 필요가 있습니다.
어디선가 보시면, 무언가 직접코딩해서 HTML로 짰다고 보기엔,
너무다도 헛점없이 완벽한 메뉴바나, 페이지나, 테이블을 보신적이
있으실 겁니다.......
그것은, 필시 사람의 손으로 코딩하여 직접 짠 것은 아닐겁니다..
나모도 있을것이고...드림위버, 플래쉬..등등...있겠지만,
그중엔 분명히 이미지레디로 짠 것들도 있을것입니다..
제 홈페이지는 거의 HTML로 짜던가..이미지레디를 사용하여 테이블을
만들었습니다..
아무튼 그것을 가능케 하는것이 바로 슬라이스 툴입니다..
![](http://www.armdry.com/content/0315_1.gif)
1. 위치: 위 그림참조
2. 역할: 슬라이스는, 전강좌에서도 설명했지만, 슬라이스툴이라는 녀석과
슬라이스 실랙트툴이라는 녀석이 있습니다.
슬라이스 툴은, HTML명령어중 <TR><TD>에 속하는 녀석으로
테이블의 윤각 틀을 만들어 주는 녀석입니다.
그녀석을 클릭해서..(Show tool > Slice tool) 자기가 만들고 싶은
영역만큼의 선을 그려 줍니다.....
![](http://www.armdry.com/content/0315_2.gif)
그리고 ..(Show tool > Slice tool에서 그 Slice tool을 오래누르면)
Slice select tool이라는 녀석을 만나실수 있을 것입니다.
그녀석은, 우리가 위 그림에서 처럼 원하는 크기..그리고 링크
될곳의 길이를 나누어준것( Slice tool로 나누어준부분)의 속성을
불어넣어주는 역할을 합니다.
한마디로 우리가 Slice tool로 나누어 준부분을 제기능으로 쓸수
있도록 해주는 것이지요..(물론..그냥..이미지를 테이블로 나누어
서 편집하기위해 Slice select tool사용 없이 html로 저장할수도
있습니다)
![](http://www.armdry.com/content/0315_3.gif)
우리는 Slice select tool로 롤오버기능(버튼위에 마우스를 올렸을때
변하는 기능)도 애니메이션기능(롤오버시나, 롤오버와는 상관없이
이미지의 무빙을 주기를 원할때..그리고...원하는 위치로 링크 걸고
싶을때..등등...속성을 불어 넣어 줄수 있습니다..
한마디로 그둘은 찰떡궁합 환상의 콤비인셈이죠..^^
이렇게 해주면, 여러분은 그 어떤 html의 달인이 직접 코딩하여
테이블을 만든다 해도, 저수준 따라가기 힘들 것입니다..^^
아무튼 지금까지의 결과물을 보면(클릭하세용)
=================================================================
물론, 지금까지..별것 아닐수도 있습니다.
(나모도 있고, 드림위버도..플래쉬에서도..)할수가 있을 것입니다.
하지만, 지금건 이미지레디로 하는것이기에 그 의미가 있으며,
이 기능을...단지 이런 단순한 원리로만 생각하고 사용하지 말고...
활용한다면, 활용가치는 무한대라고 볼수 있을것입니다.
-----------------------------------------------------------------
포토샵 이미지레디로 활용한 예(클릭해주세용)
(슬라이스툴과 다음편에 배울 트윈효과의 결합활용)
--
----------참조--------------------------------------------------
이미지를 클릭하시면, 제가 전에 만들었던 사이트로 그곳은
플래쉬 사용없이 순수 "이미지레디"와 "html코딩(메모장)" 으로 만든
사이트를 감상하실수 있습니다.^^
거기 나와 있는 효과들을 보시면, 이미지레디의 활용성을 어느정도
이해하실수 있을것입니다.^^
----------------------------------------------------------------
^0^ 어때요..이정도면 플래쉬 저리가라죠!~
쉬워요..여러분도 할수 있어요..플래쉬보다는 훠~얼씬!~^^
(참조) 이곳은 제가 전에 순수 이미지레디만으로(플래쉬사용안함)제작한
사이트 입니다.
여러분도 노력하시면, 저것보다 이상으로 하실수 있을것입니다.
다음편엔 이어서 트윈효과에 대한 강좌가 있겠습니다.
어설픈 강좌 읽어주셔서 감사드립니다.^^
--아름지기식 홈페이지 만들기 강좌파이브 끄읕-
넘 늦은것 같네요..
우리동네에..밤에도 환한 농구코트가 있는데,
갑자기 농구가 땡겨서...한께임했죠..이밤에(짐시각밤12시 ^^)
군대가기 전엔 날라다녔는데..군대 가서두 증말 날라다녔는데..
지금은, 아주.....
늙었나 봐용..^^
하하, 각설하구.........
제가 많이 생각해 봤어요...어떻게 하면 강좌가 잼나고 유익할수 있을까..
그래서 내린 결론 -
꼭 필요한 것부터..주욱 내려가 보자!~
제가 내린 결론입니다..
그래서, 전에 말씀드린 내용은 이후로 미루기로 하고,
이미지레디에 대한 적극 활용법..........
사실.......이미지레디만 있어도 어느정도 완성도 있는 홈페이지를
만들수 있습니다.
물론, 제 강좌의 목적이 그렇듯이, 살아남기 위한 편법이죠!~
^^
그럼 오늘의 아름지기식 홈페이지 만들기 파이브 나갑니다..^^
=====================================
이미지레디로 쌈빡한 테이블을 만들어 보자
=====================================
그전에, 아시는 분은 다들 아실테지만, 제가 반한 사이트...
포토샵강좌로 넘 유명한 그곳,
http://photo.ideakorea.com/
이쪽으로 가시면, 정말...새심한 강좌로 여러분의 포토샵의 궁금증을
해소할수 있을것입니다..^^
--------------------------------------------
"미래"...웹이 사라진다면, 그리고 웹디자이너들이 사용하는 그런 지금까지의
기술이 사라진다면..저는 항상 이런부분을 염두하여 두려워 하곤 합니다..
지금은..그럭저럭 이런 잔 기술로 밥먹고(?) 살고 있지만,
웹페이지가 만들어지는 방식이 바뀌어서..지금 가지고 있는 지식이
지식이 아니라면...마치 MS - DOS가 지금 아무런 쓸모가 없고,
(이유는 윈도우가 생겨나서 그렇죠) 그렇게 된다면, 나는 다시 백지 상태가
되는 것이 아닐까...
하지만, 이젠 걱정 놓기로 했습니다..^^
맘 편히 먹고 살기로 했죠..
생각해 보세요..만약 그렇게 된다면, 분명히 어도비社(포토샵만든회사)도
매그로 미디어社도 망해버릴것입니다..^^
헤헤, 제가 이런 말을 하는 이유는..
그쪽 프로그래밍 전문가들도...그런 미래를 대비하기 위해,
항상 준비해 나갈것이고, 포토샵,플래쉬 라는 툴또한 더욱더..
그 기술에 맞게 발전되어 나갈것이기 때문입니다..^^
네, 그렇죠....제가 하려는 말의 요점은 거기서 출발합니다.......
"포토샵"을 만든 어도비社는 살아남기 위해...멋진 프로그램을 만들어
냈습니다.......웹과 공존하는 프로그램..포토샵과는 무언가 다른...
그런 프로그램...바로, 이미지레디죠..^^
포토샵을 웹과 더욱더 매치되게 사용할수 있는 그런툴...이미지 레디..^^
여러분과 저는 그것을 이제 부터 배우는 것입니다..^^
그중에서도...아주 아주 멋진 기능.......그리고 잼나는 효과....
슬라이스툴(SLICE TOOL),그리고 TWEEN
여러분들은 이 두가지 기능에 주목할 필요가 있습니다.
어디선가 보시면, 무언가 직접코딩해서 HTML로 짰다고 보기엔,
너무다도 헛점없이 완벽한 메뉴바나, 페이지나, 테이블을 보신적이
있으실 겁니다.......
그것은, 필시 사람의 손으로 코딩하여 직접 짠 것은 아닐겁니다..
나모도 있을것이고...드림위버, 플래쉬..등등...있겠지만,
그중엔 분명히 이미지레디로 짠 것들도 있을것입니다..
제 홈페이지는 거의 HTML로 짜던가..이미지레디를 사용하여 테이블을
만들었습니다..
아무튼 그것을 가능케 하는것이 바로 슬라이스 툴입니다..
![](http://www.armdry.com/content/0315_1.gif)
1. 위치: 위 그림참조
2. 역할: 슬라이스는, 전강좌에서도 설명했지만, 슬라이스툴이라는 녀석과
슬라이스 실랙트툴이라는 녀석이 있습니다.
슬라이스 툴은, HTML명령어중 <TR><TD>에 속하는 녀석으로
테이블의 윤각 틀을 만들어 주는 녀석입니다.
그녀석을 클릭해서..(Show tool > Slice tool) 자기가 만들고 싶은
영역만큼의 선을 그려 줍니다.....
![](http://www.armdry.com/content/0315_2.gif)
그리고 ..(Show tool > Slice tool에서 그 Slice tool을 오래누르면)
Slice select tool이라는 녀석을 만나실수 있을 것입니다.
그녀석은, 우리가 위 그림에서 처럼 원하는 크기..그리고 링크
될곳의 길이를 나누어준것( Slice tool로 나누어준부분)의 속성을
불어넣어주는 역할을 합니다.
한마디로 우리가 Slice tool로 나누어 준부분을 제기능으로 쓸수
있도록 해주는 것이지요..(물론..그냥..이미지를 테이블로 나누어
서 편집하기위해 Slice select tool사용 없이 html로 저장할수도
있습니다)
![](http://www.armdry.com/content/0315_3.gif)
우리는 Slice select tool로 롤오버기능(버튼위에 마우스를 올렸을때
변하는 기능)도 애니메이션기능(롤오버시나, 롤오버와는 상관없이
이미지의 무빙을 주기를 원할때..그리고...원하는 위치로 링크 걸고
싶을때..등등...속성을 불어 넣어 줄수 있습니다..
한마디로 그둘은 찰떡궁합 환상의 콤비인셈이죠..^^
이렇게 해주면, 여러분은 그 어떤 html의 달인이 직접 코딩하여
테이블을 만든다 해도, 저수준 따라가기 힘들 것입니다..^^
아무튼 지금까지의 결과물을 보면(클릭하세용)
=================================================================
물론, 지금까지..별것 아닐수도 있습니다.
(나모도 있고, 드림위버도..플래쉬에서도..)할수가 있을 것입니다.
하지만, 지금건 이미지레디로 하는것이기에 그 의미가 있으며,
이 기능을...단지 이런 단순한 원리로만 생각하고 사용하지 말고...
활용한다면, 활용가치는 무한대라고 볼수 있을것입니다.
-----------------------------------------------------------------
포토샵 이미지레디로 활용한 예(클릭해주세용)
(슬라이스툴과 다음편에 배울 트윈효과의 결합활용)
--
----------참조--------------------------------------------------
이미지를 클릭하시면, 제가 전에 만들었던 사이트로 그곳은
플래쉬 사용없이 순수 "이미지레디"와 "html코딩(메모장)" 으로 만든
사이트를 감상하실수 있습니다.^^
거기 나와 있는 효과들을 보시면, 이미지레디의 활용성을 어느정도
이해하실수 있을것입니다.^^
----------------------------------------------------------------
^0^ 어때요..이정도면 플래쉬 저리가라죠!~
쉬워요..여러분도 할수 있어요..플래쉬보다는 훠~얼씬!~^^
(참조) 이곳은 제가 전에 순수 이미지레디만으로(플래쉬사용안함)제작한
사이트 입니다.
여러분도 노력하시면, 저것보다 이상으로 하실수 있을것입니다.
다음편엔 이어서 트윈효과에 대한 강좌가 있겠습니다.
어설픈 강좌 읽어주셔서 감사드립니다.^^
--아름지기식 홈페이지 만들기 강좌파이브 끄읕-
댓글 5
-
아름지기
2002.03.16 01:22
웅 오늘도 길어져 버렸당..^^ 좋은하루 되세요...열분들 모~~~~~~두~~~~~ -
산나라
2002.03.17 13:54
이미지레디에 이런 기능도 있었군요...
전 단지..이미지를 나누는 기능만 알고 있었는데..
이미지레디...배워야 되겠군요.. ^^ -
힐링포션
2002.04.01 20:28
멋집니다!
그런데 공백이 모니터 세로길이보다 길군요... -
신동원
2003.01.11 15:41
링크가 왜 저 딴데로 되있지 -,.-; -
ⓗolyⓢhield
2003.03.12 18:55
강의 다시 올리실 순 없나; 그림두 하나두 안나오고...
제목 | 글쓴이 | 날짜 |
---|---|---|
XE를 홈페이지 루트에 설치하여 BGM 설치가 불가능할 때... [6] | Firstlove | 2011.05.29 |
로그인풀림방지 - 주소 고정하기 [27] | ezi | 2011.05.28 |
웹폰트의 개념과 사용법 [2] | hika1 | 2011.05.26 |
유닉스에서 디스크 용량 체크 후 호출 해주는 프로그램 | 길버트전 | 2011.05.24 |
SSH 지원안하는 웹호스팅에서 빠르게 XE설치하기.
[5]
![]() | DynamicLaser | 2011.05.22 |
드림위버로 FTP 파일 바로 수정하기 : FTP다운로드->수정->FTP업로드 번거러운 수정과정 X
[3]
![]() | Treasurej | 2011.05.21 |
XE 첨부파일 문제로 게시판이 백지화 될때... [1] | 똑디 | 2011.05.20 |
[PHP 기초] 연산자1 | 난다날아 | 2011.05.19 |
모바일레이아웃에서의 통합검색 [11] | 카르마 | 2011.05.19 |
XE 프로젝트 호스팅 SVN 내용을 Google 프로젝트 호스팅으로 이전하기
![]() | 난다날아 | 2011.05.17 |
'왕' '왕초보'를 위한 ZB4-->XE버전으로 이전시 가장 간단한 순서 [1] | 쭈영 | 2011.05.17 |
XE core 1.4.5.7 코드 오류,(상자 위젯 배경 안될때) [2] | 홍성빈닌 | 2011.05.17 |
따른사이트와 내채팅방 연동하기~!<미니온4편>
[7]
![]() | 토끼매니아 | 2011.05.15 |
XE 공식 버튼2 삽입하기
[32]
![]() | 웹엔진 | 2011.05.14 |
th 엘리먼트에 scope 속성 사용
[1] ![]() | 엘카 | 2011.05.14 |
도와 주세요!!! Explorer 6에서는 제대로 보이는데 Explorer 7 이상에서는 사진이 안보여요 [2] | 이영규616 | 2011.05.12 |
서버이전후 캐시파일 재생성 안되시는분들 [2] | 우냠냠 | 2011.05.11 |
youtube (유튜브) 동영상 block없이 게시판에 embed 하기 [23] | 쏘프티 | 2011.05.10 |
회원 관리자 두기.. | DaKi | 2011.05.09 |
CafeXE에서 마이카페 목록을 셀렉트 박스로 바꾸기
![]() | 늘푸른이 | 2011.05.07 |