웹디자인 강의
기타 [나모]셀의 위치를 손쉽게 변경하자.
2003.11.26 19:48
많이들 사용하시리라 믿는
나모와 같은 프로그램을 위지윅에디터라 하고,
EditPlus와 같은 프로그램을 텍스트에디터라고 칭합니다.
아래는 셀의 위치를 사이트 재개편상, 바꿔야 할 필요가 있을때
유용할 듯 하군요.
물론, 소스-HTML편집(F6)으로도 손쉽게 가능하지만,
초보자분들에게 유용할 듯 싶고,
아직, 표나 셀에 대한
나모의 WYSIWYG (What You See Is What You Get)기능을 충분히 활용 못하시는
분들이 있으신 것 같아서 올려봅니다.
편의상 아래의 최근게시물이 삽입된 표(table)화면을 그대로 이용하겠습니다.
[그림 1]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch01_09.gif)
위의 [그림 1]에는 웹디자인 tip과 자바스크립트 최근게시물이 상단에 위치하고 있습니다.
사이트 개편상, 하단부에 위치한 제로보드 tip 과 추천제로보드스킨을
제일 상단에 위치해야된다고 가정해봅시다.
[그림 2]와 같이 나모작업창을 다시 살펴봅시다.
[그림 2]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_01.gif)
표(table)의 좌측의 셀에 마우스커서를 위치하면
이와 같은 화살표 아이콘이 보이게 됩니다.
이 화살표가 나타나면 셀선택을 할 수있다는 표시가 됩니다.
[그림 4]를 참조하십시오.
[그림 4]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_03.gif)
화살표가 화면에 보인다면, 그대로 원하는 셀까지 드래그를 합니다.
현재 저는 웹디자인 tip과 자바스크립트최근게시물이 포함된
제로보드의 PHP코드를 선택하였습니다.
[그림 5]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_04.gif)
※ 참고로, 최근게시물 상하의 간격을 두기위해서 저는 빈공백의 셀을 추가했기 떄문에,
두줄의 셀을 선택한 것입니다.
이제 아래와 같이 선택한 셀을 자르기명령으로 잘라냅니다. (단축키 : Ctrl+X)
[그림 6]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_05.gif)
일단 잘라낸 셀은 클립보드에 임시적으로 저장되었으며, 작업창에서는 사라졌습니다.
[그림 7]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_06.gif)
이제 아래와 같이 빈공백의 셀을 선택합니다.
※ 참고로, 이 선택된 셀은 제로보드 tip 과 추천제로보드스킨최근게시물의
하단부에 위치한 빈공백의 셀입니다.
[그림 8]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_07.gif)
이제 클립보드에 저장된 조금전 잘라내었던 셀을 붙여넣기 합니다. (단축키 : Ctrl+V)
[그림 9]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_08.gif)
이때, 표 붙이기 창이 뜨게됩니다.
웹디자인 tip과 자바스크립트최근게시물이 하단부에 위치하는 것이
목적이므로, 아래쪽 가로줄에 삽입을 선택한후, 확인 버튼을 클릭합니다.
[그림 10]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_09.gif)
이제 적용한 결과를 FTP에 업로드 한후, 결과화면은
아래와 같습니다.
[그림 11]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_10.gif)
위와 유사하게, 세로의 셀을 선택시에도 동일한 방법으로 위치변화를 줄 수 있습니다.
[그림 12]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_11.gif)
나모와 같은 프로그램을 위지윅에디터라 하고,
EditPlus와 같은 프로그램을 텍스트에디터라고 칭합니다.
아래는 셀의 위치를 사이트 재개편상, 바꿔야 할 필요가 있을때
유용할 듯 하군요.
물론, 소스-HTML편집(F6)으로도 손쉽게 가능하지만,
초보자분들에게 유용할 듯 싶고,
아직, 표나 셀에 대한
나모의 WYSIWYG (What You See Is What You Get)기능을 충분히 활용 못하시는
분들이 있으신 것 같아서 올려봅니다.
편의상 아래의 최근게시물이 삽입된 표(table)화면을 그대로 이용하겠습니다.
[그림 1]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch01_09.gif)
위의 [그림 1]에는 웹디자인 tip과 자바스크립트 최근게시물이 상단에 위치하고 있습니다.
사이트 개편상, 하단부에 위치한 제로보드 tip 과 추천제로보드스킨을
제일 상단에 위치해야된다고 가정해봅시다.
[그림 2]와 같이 나모작업창을 다시 살펴봅시다.
[그림 2]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_01.gif)
표(table)의 좌측의 셀에 마우스커서를 위치하면
이와 같은 화살표 아이콘이 보이게 됩니다.
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_02.gif)
[그림 4]를 참조하십시오.
[그림 4]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_03.gif)
화살표가 화면에 보인다면, 그대로 원하는 셀까지 드래그를 합니다.
현재 저는 웹디자인 tip과 자바스크립트최근게시물이 포함된
제로보드의 PHP코드를 선택하였습니다.
[그림 5]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_04.gif)
※ 참고로, 최근게시물 상하의 간격을 두기위해서 저는 빈공백의 셀을 추가했기 떄문에,
두줄의 셀을 선택한 것입니다.
이제 아래와 같이 선택한 셀을 자르기명령으로 잘라냅니다. (단축키 : Ctrl+X)
[그림 6]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_05.gif)
일단 잘라낸 셀은 클립보드에 임시적으로 저장되었으며, 작업창에서는 사라졌습니다.
[그림 7]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_06.gif)
이제 아래와 같이 빈공백의 셀을 선택합니다.
※ 참고로, 이 선택된 셀은 제로보드 tip 과 추천제로보드스킨최근게시물의
하단부에 위치한 빈공백의 셀입니다.
[그림 8]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_07.gif)
이제 클립보드에 저장된 조금전 잘라내었던 셀을 붙여넣기 합니다. (단축키 : Ctrl+V)
[그림 9]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_08.gif)
이때, 표 붙이기 창이 뜨게됩니다.
웹디자인 tip과 자바스크립트최근게시물이 하단부에 위치하는 것이
목적이므로, 아래쪽 가로줄에 삽입을 선택한후, 확인 버튼을 클릭합니다.
[그림 10]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_09.gif)
이제 적용한 결과를 FTP에 업로드 한후, 결과화면은
아래와 같습니다.
[그림 11]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_10.gif)
위와 유사하게, 세로의 셀을 선택시에도 동일한 방법으로 위치변화를 줄 수 있습니다.
[그림 12]
![](http://woored.com/bbs/icon/member_image_box/3/na_ch02_11.gif)
댓글 3
-
아치
2003.11.26 19:54
-
Wings
2003.11.27 17:48
이미지박스 용량 추가해드렷습니다^^
좋은강좌 감사드립니다 -
아치
2003.11.28 11:49
바쁘신데도 도움주셔서 감사합니다.
좋은 내용을 담도록 최선을 다하겠습니다. :-)
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
공지 | 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] | Eccen | 2004.12.15 | 48031 |
1455 |
눈사람의나도고수대고파[토트1편]첨성대
[8]
![]() | snowman | 2003.02.14 | 5753 |
1454 |
[초허접강좌] 산수화 만들어보기;
[7]
![]() | [It's]순수군 | 2003.02.15 | 6480 |
1453 |
삼베 질감 나타내기
[9]
![]() | 마리아 | 2003.02.15 | 6145 |
1452 |
[jin]도트 사과그림 강좌로 다시 올립니다.
[24]
![]() | jin | 2003.02.16 | 7828 |
1451 | 웹 디자이너가 주의해야 할 주요원리 [13] | 깜보 | 2003.02.16 | 7606 |
1450 |
모래를 뿌린듯한 테두리..
[4]
![]() | puki | 2003.02.17 | 12070 |
1449 |
- 의문의 소년 - 얼음 텍스쳐 만들기 :)
[11]
![]() | 의문의소년 | 2003.02.17 | 6613 |
1448 |
[하이링고]칵테일 아쿠아
[96]
![]() | 하이링고 | 2003.02.17 | 34383 |
1447 |
[jin]두번째 강좌. 풍선그리기.
[15]
![]() | jin | 2003.02.17 | 7706 |
1446 |
크리스탈과 파인드 에지 필터를 이용한 이미지 만들기
[4]
![]() | hoosh | 2003.02.17 | 8593 |
1445 |
특별한 스타버스트효과.
[28]
![]() | Nersion | 2003.02.17 | 10570 |
1444 |
이미지 접힌 효과 내기
[27]
![]() | 이태운 | 2003.02.17 | 10518 |
1443 | 랜덤한 색상을 지닌 원형돌리기 [4] | gimbob | 2003.02.18 | 8566 |
1442 |
축전 만들기
[19]
![]() | 〃앵이〃 | 2003.02.19 | 7196 |
1441 | 이상하고 이상한.. 배경만들기... [10] | 재로 | 2003.02.19 | 10760 |
1440 |
축전 만들기
[15]
![]() | 〃앵이〃 | 2003.02.20 | 6376 |
1439 |
[jin]3번째 강좌. 양을 그리자.
[5]
![]() | jin | 2003.02.21 | 3893 |
1438 |
초급! 레이어합치기
[8]
![]() | rang-* | 2003.02.22 | 6250 |
1437 |
아즈망가대왕 - 치요쨩 - 1
[5]
![]() | 리샤 | 2003.02.22 | 5094 |
1436 |
아즈망가대왕 - 치요쨩 - 2
[17]
![]() | 리샤 | 2003.02.22 | 5853 |
현재 사용한 캡처이미지는 저희계정에 올려져있는데요.
Wings 님께 요청후, 용량이 추가되면 다시 저의 이미지박스에 올려서 재 수정하도록 하겠습니다.
이 작업도 소스편집을 주로 하시는 분들에게는 필요가 없을지도 모르겠군요 :-)
하지만, WYSIWYG 툴인 나모의 기능을 최대한 사용할려는 점을 어여쁘게 보아주시면 감사하겠습니다. :-)
---------
참, 저는 5.0버전을 기준으로 했답니다.
5.0버전 이상버전과 5.0버전과는 플래시나 약간은 기능이 미약하지만.
이미지편집등의 고급기능 외에는 별 차이점이 없다고 생각듭니다.
하지만, 4.0과 5.0은 html(php) 지원이 확실히 다르더군요.
---------
다음에는 유용한 셀서식 복사기능과 (4.0과 5.0이상 버전)에서 약간달라졌죠?
이미지경로가 변경될때 일괄적으로 바꾸는 작업(강좌의 예입니다.)을 올리도록 하겠습니다.
끝까지 글을 읽어주셔서 감사합니다.