웹마스터 팁
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
강의 다시 올리실 순 없나; 그림두 하나두 안나오고...
제목 | 글쓴이 | 날짜 |
---|---|---|
홈페이지 만들기 ① ▶계정 만들기◀ (아름지기님과 다름) [6] | 냠냠 | 2002.03.09 |
프레임 만들기
[6]
![]() | 냠냠 | 2002.03.10 |
아름지기식 홈페이지 만들기4 [14] | 아름지기 | 2002.03.12 |
아름지기식 홈페이지만들기5 [5] | 아름지기 | 2002.03.16 |
두 개의 프레임을 동시에 제어하기
[4]
![]() | (づ_-) 위드 | 2002.03.25 |
엔지오식 레이어 메뉴 구성하기 (허접) [3] | 정영순 | 2002.03.28 |
드래그하면 바뀌는 마술거울효과 (-_-")v
[16]
![]() | 짱나 | 2002.04.05 |
DHTML의 시작 - CSS와 객체 관계 [2] | Legend | 2002.04.12 |
DHTML의 시작 - Typing 스크립트 (예제) [2] | Legend | 2002.04.19 |
저기에서 이리로 온 글입니다.
[3]
![]() | 이성영 | 2002.05.07 |
DHTML의 시작 - Form 예제 (폼처리 HTML) | Legend | 2002.05.09 |
홈페이지의 대문에서 스크롤바 없애기 [10] | keymove | 2002.06.15 |
메타태그(Meta)의 모든것 [11] | ZipShin | 2002.06.20 |
로보트 검색엔진에 잘 걸리는 Meta Tag 작성법 [8] | 이성영 | 2002.06.20 |
제로보드 가입폼에 css쉽게 적용하기 | {동준짱} | 2002.06.26 |
마우스 오버시에 텍스트 버튼느낌 style.css 와 자동 스크롤 기능 [5] | HomeBox™ | 2002.06.27 |
[Tip]로딩속도 높이는 10가지 방법. [8] | HomeBox™ | 2002.06.28 |
[Siren]글자(문자,폰트) 링크 커서 제어하기 [8] | 세이렌 | 2002.07.30 |
[Siren]이미지 주변에 점선 테두리 생기게 하기 ^_^ [6] | 세이렌 | 2002.07.30 |
웹페이지 소스보기. [4] | ZipShin | 2002.07.31 |