웹디자인 강의
기타 [나모]셀의 위치를 손쉽게 변경하자.
2003.11.26 19:48
많이들 사용하시리라 믿는
나모와 같은 프로그램을 위지윅에디터라 하고,
EditPlus와 같은 프로그램을 텍스트에디터라고 칭합니다.
아래는 셀의 위치를 사이트 재개편상, 바꿔야 할 필요가 있을때
유용할 듯 하군요.
물론, 소스-HTML편집(F6)으로도 손쉽게 가능하지만,
초보자분들에게 유용할 듯 싶고,
아직, 표나 셀에 대한
나모의 WYSIWYG (What You See Is What You Get)기능을 충분히 활용 못하시는
분들이 있으신 것 같아서 올려봅니다.
편의상 아래의 최근게시물이 삽입된 표(table)화면을 그대로 이용하겠습니다.
[그림 1]
위의 [그림 1]에는 웹디자인 tip과 자바스크립트 최근게시물이 상단에 위치하고 있습니다.
사이트 개편상, 하단부에 위치한 제로보드 tip 과 추천제로보드스킨을
제일 상단에 위치해야된다고 가정해봅시다.
[그림 2]와 같이 나모작업창을 다시 살펴봅시다.
[그림 2]
표(table)의 좌측의 셀에 마우스커서를 위치하면
이와 같은 화살표 아이콘이 보이게 됩니다. 이 화살표가 나타나면 셀선택을 할 수있다는 표시가 됩니다.
[그림 4]를 참조하십시오.
[그림 4]
화살표가 화면에 보인다면, 그대로 원하는 셀까지 드래그를 합니다.
현재 저는 웹디자인 tip과 자바스크립트최근게시물이 포함된
제로보드의 PHP코드를 선택하였습니다.
[그림 5]
※ 참고로, 최근게시물 상하의 간격을 두기위해서 저는 빈공백의 셀을 추가했기 떄문에,
두줄의 셀을 선택한 것입니다.
이제 아래와 같이 선택한 셀을 자르기명령으로 잘라냅니다. (단축키 : Ctrl+X)
[그림 6]
일단 잘라낸 셀은 클립보드에 임시적으로 저장되었으며, 작업창에서는 사라졌습니다.
[그림 7]
이제 아래와 같이 빈공백의 셀을 선택합니다.
※ 참고로, 이 선택된 셀은 제로보드 tip 과 추천제로보드스킨최근게시물의
하단부에 위치한 빈공백의 셀입니다.
[그림 8]
이제 클립보드에 저장된 조금전 잘라내었던 셀을 붙여넣기 합니다. (단축키 : Ctrl+V)
[그림 9]
이때, 표 붙이기 창이 뜨게됩니다.
웹디자인 tip과 자바스크립트최근게시물이 하단부에 위치하는 것이
목적이므로, 아래쪽 가로줄에 삽입을 선택한후, 확인 버튼을 클릭합니다.
[그림 10]
이제 적용한 결과를 FTP에 업로드 한후, 결과화면은
아래와 같습니다.
[그림 11]
위와 유사하게, 세로의 셀을 선택시에도 동일한 방법으로 위치변화를 줄 수 있습니다.
[그림 12]
나모와 같은 프로그램을 위지윅에디터라 하고,
EditPlus와 같은 프로그램을 텍스트에디터라고 칭합니다.
아래는 셀의 위치를 사이트 재개편상, 바꿔야 할 필요가 있을때
유용할 듯 하군요.
물론, 소스-HTML편집(F6)으로도 손쉽게 가능하지만,
초보자분들에게 유용할 듯 싶고,
아직, 표나 셀에 대한
나모의 WYSIWYG (What You See Is What You Get)기능을 충분히 활용 못하시는
분들이 있으신 것 같아서 올려봅니다.
편의상 아래의 최근게시물이 삽입된 표(table)화면을 그대로 이용하겠습니다.
[그림 1]
위의 [그림 1]에는 웹디자인 tip과 자바스크립트 최근게시물이 상단에 위치하고 있습니다.
사이트 개편상, 하단부에 위치한 제로보드 tip 과 추천제로보드스킨을
제일 상단에 위치해야된다고 가정해봅시다.
[그림 2]와 같이 나모작업창을 다시 살펴봅시다.
[그림 2]
표(table)의 좌측의 셀에 마우스커서를 위치하면
이와 같은 화살표 아이콘이 보이게 됩니다. 이 화살표가 나타나면 셀선택을 할 수있다는 표시가 됩니다.
[그림 4]를 참조하십시오.
[그림 4]
화살표가 화면에 보인다면, 그대로 원하는 셀까지 드래그를 합니다.
현재 저는 웹디자인 tip과 자바스크립트최근게시물이 포함된
제로보드의 PHP코드를 선택하였습니다.
[그림 5]
※ 참고로, 최근게시물 상하의 간격을 두기위해서 저는 빈공백의 셀을 추가했기 떄문에,
두줄의 셀을 선택한 것입니다.
이제 아래와 같이 선택한 셀을 자르기명령으로 잘라냅니다. (단축키 : Ctrl+X)
[그림 6]
일단 잘라낸 셀은 클립보드에 임시적으로 저장되었으며, 작업창에서는 사라졌습니다.
[그림 7]
이제 아래와 같이 빈공백의 셀을 선택합니다.
※ 참고로, 이 선택된 셀은 제로보드 tip 과 추천제로보드스킨최근게시물의
하단부에 위치한 빈공백의 셀입니다.
[그림 8]
이제 클립보드에 저장된 조금전 잘라내었던 셀을 붙여넣기 합니다. (단축키 : Ctrl+V)
[그림 9]
이때, 표 붙이기 창이 뜨게됩니다.
웹디자인 tip과 자바스크립트최근게시물이 하단부에 위치하는 것이
목적이므로, 아래쪽 가로줄에 삽입을 선택한후, 확인 버튼을 클릭합니다.
[그림 10]
이제 적용한 결과를 FTP에 업로드 한후, 결과화면은
아래와 같습니다.
[그림 11]
위와 유사하게, 세로의 셀을 선택시에도 동일한 방법으로 위치변화를 줄 수 있습니다.
[그림 12]
댓글 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 | 10569 |
1444 | 이미지 접힌 효과 내기 [27] | 이태운 | 2003.02.17 | 10518 |
1443 | 랜덤한 색상을 지닌 원형돌리기 [4] | gimbob | 2003.02.18 | 8566 |
1442 | 축전 만들기 [19] | 〃앵이〃 | 2003.02.19 | 7195 |
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 | 6249 |
1437 | 아즈망가대왕 - 치요쨩 - 1 [5] | 리샤 | 2003.02.22 | 5093 |
1436 | 아즈망가대왕 - 치요쨩 - 2 [17] | 리샤 | 2003.02.22 | 5852 |
현재 사용한 캡처이미지는 저희계정에 올려져있는데요.
Wings 님께 요청후, 용량이 추가되면 다시 저의 이미지박스에 올려서 재 수정하도록 하겠습니다.
이 작업도 소스편집을 주로 하시는 분들에게는 필요가 없을지도 모르겠군요 :-)
하지만, WYSIWYG 툴인 나모의 기능을 최대한 사용할려는 점을 어여쁘게 보아주시면 감사하겠습니다. :-)
---------
참, 저는 5.0버전을 기준으로 했답니다.
5.0버전 이상버전과 5.0버전과는 플래시나 약간은 기능이 미약하지만.
이미지편집등의 고급기능 외에는 별 차이점이 없다고 생각듭니다.
하지만, 4.0과 5.0은 html(php) 지원이 확실히 다르더군요.
---------
다음에는 유용한 셀서식 복사기능과 (4.0과 5.0이상 버전)에서 약간달라졌죠?
이미지경로가 변경될때 일괄적으로 바꾸는 작업(강좌의 예입니다.)을 올리도록 하겠습니다.
끝까지 글을 읽어주셔서 감사합니다.