웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기
2003.07.11 17:11
제로보드를 이용한 노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기
직접 따라해 보실 분들은 첨부 파일을 다운로드 받으세요
홈을 만들기 전에 제일 먼저 해야 할 일은 컨텐츠를 구상하고 대충의 레이아웃을 잡는겁니다
링크를 클릭해서 완성된 모습을 한 번 보세요.. 예제라서 대충 간단하게 만든 홈입니다
나모 5.0를 기준으로 설명하지만 드림위버나 다른 툴들도 만드는 원리는 같답니다
01. 단축키 ctrl + F2 해서 문서 속성으로 들어간 후 스타일에서 여백을 0 으로 지정하세요
근데 뭐 꼭 지정할 필요는 없어요.. ^^;;; 이건 홈 디자인에 달린겁니다.
![46.gif](/files/attach/images/19360727/631/365/019/1f8cc4499750e64ab536f44a1fd64857.gif)
02. 먼저 메인 페이지를 만들어줍니다. 홈페이지는 메인이 제일 기본이고 복잡하며
나머지 서브 페이지는 메인 페이지를 수정하면 쉽게 만들 수 있습니다
표 >새 표 한 다음 나오는 표 속성에서 너비 780 픽셀, 가로 4, 세로 1 칸의 표를 만듭니다
(참고로 가로 780 픽셀은 800*600 브라우저에 딱 맞는 크기거든요)
여기서 중요한 것은 높이는 설정하지 않는다는 겁니다. 노프레임 홈에서는 게시판 길이에 따라
자동으로 페이지 길이가 늘어나야 하므로 높이는 입력하지 않으셔도 됩니다.
정렬은 가운데로 해야 보기 좋겠죠.. 그리고 테두리 선 종류는 감추기로 안 보이게 합니다
![02.gif](/files/attach/images/19360727/631/365/019/de6bb0e9be954c4b56704d82e3ecdcf7.gif)
03. 표가 만들어지면 첫 번째 줄을 두 칸으로 나눕니다. 왼쪽에 로고, 오른쪽에 메뉴를 넣게요
첫 번째 줄에 커서를 둔채 오른쪽 마우스를 클릭하면 다음 그림과 같이 메뉴가 나옵니다
![03.gif](/files/attach/images/19360727/631/365/019/90bf9c2bebbaf809c04f1866c2515c2f.gif)
![04.gif](/files/attach/images/19360727/631/365/019/591ce81a747442b405a37107125a1900.gif)
04. 위쪽 툴바에서 액자 모양 아이콘을 클릭하면 그림을 삽입할 수 있습니다.
두 칸으로 나뉘어진 왼쪽 셀에 로고 그림을 삽입하세요
![05.gif](/files/attach/images/19360727/631/365/019/17c6084af6a356c916d27fcc8f16de5d.gif)
![06.gif](/files/attach/images/19360727/631/365/019/8a2e69ab30070e810535de4148e300ef.gif)
05. 그리고 오른쪽 셀에도 메뉴 그림들을 똑같은 방법으로 삽입합니다.
그리고 셀 속성을 아래 그림과 같이 맞춰주면 오른쪽 아래에 메뉴들이 위치하게 됩니다
![07.gif](/files/attach/images/19360727/631/365/019/af0502b1c052b316bbffa39a6d5c29fa.gif)
06. 그 다음 두 번째 줄에도 파란 그림(01.gif) 을 삽입해주고
맨 마지막 셀에는 배경 색을 넣고 저작권을 써주세요
중간에는 로그인과 최근게시물이 들어갈 것이므로 일단은 그냥 비워둡니다.
07. 비어있는 세 번째 줄에 너비 100%, 가로 1, 세로 2 칸인 새로운 표를 만들어 삽입합니다.
그리고 새로 삽입한 표의 로그인이 들어갈 왼쪽 셀의 너비는 160 픽셀로 해주세요..
![09.gif](/files/attach/images/19360727/631/365/019/91a73d1dd2968bfdeb27016f8eb210a7.gif)
근데 왜 그냥 셀을 바로 나누지 않고 번거롭게 다시 표를 만들어 삽입할까요?
로고와 메뉴가 들어간 첫 번째 줄은 이미 세로로 두 칸 나뉘어져 있습니다
그런데 세 번째 줄도 마찬가지로 왼쪽에 로그인이 들어가야 하므로 세로로 두 칸 나눠야 합니다
하지만 그냥 바로 셀을 나누게 되면 첫 번째 줄과 세 번째 줄이 같이 움직여 버립니다
로그인이 들어갈 셀의 너비는 로고가 들어가 있는 셀의 너비보다 훨씬 작습니다
로그인의 들어갈 셀의 너비를 160 으로 정해준다해도 로고 때문에 더 이상 줄어들지 않거든요
이게 무슨 말인지는 직접 해보시면 아실거에요.. 암튼 표 안에 다시 표를 넣는 것은 아주 중요합니다
이것처럼 첫번째 로고와 메뉴가 들어간 셀도 바로 나누지 않고 그 안에 새 표를 삽입하고
그 새로 삽입한 표를 두 칸으로 나눠서 왼쪽에 로고, 오른쪽에 메뉴를 넣어도 됩니다.
08. 그런데 표에 양쪽으로 테두리가 있다면 훨씬 정돈되어 보일겁니다.
테두리는 1픽셀 셀을 이용하여 표로 만들 수도 있지만 전 주로 스타일을 이용합니다.
새로 삽입한 표가 선택된 상태에서 표 속성으로 들어가 스타일을 클릭하고 테두리 >모양에서
solid를 선택하고 색을 정해줍니다. 너비는 1로 해주세요
표의 왼쪽과 오른쪽 양 끝에만 테두리가 생겨야 하므로 위 아래는 none을 선택합니다.
모양은 여러 가지가 있는데 쉬운 영어니까 척 보면 아실 듯..
![10.gif](/files/attach/images/19360727/631/365/019/ff9980c4ee00c9ed74dfa16f127fa737.gif)
09. 그리고 로그인이 들어갈 왼쪽 셀 속성으로 들어가 아래처럼 테두리 모양을 지정합니다.
그러면 로그인이 들어갈 왼쪽 셀과 최근게시물이 들어갈 셀의 중간에 선이 생겨서 구분이 되겠죠
이처럼 스타일은 이쁜 표를 만드는데 여러 가지로 응용이 가능하므로 잘 배워두시기 바랍니다.
스타일은 표 속성, 셀 속성 각각 지정할 수 있다는걸 아시겠죠?
![11.gif](/files/attach/images/19360727/631/365/019/27fa6df0fa37104a6ab3955e053b6ec2.gif)
10. 그러면 다음과 같이 기본적인 레이아웃은 일단 완성됩니다.
양쪽과 중간에 회색 테두리 선이 생긴게 보이죠?
![15.gif](/files/attach/images/19360727/631/365/019/ea05386820d206d1aeaca9a14dce3efd.gif)
직접 따라해 보실 분들은 첨부 파일을 다운로드 받으세요
홈을 만들기 전에 제일 먼저 해야 할 일은 컨텐츠를 구상하고 대충의 레이아웃을 잡는겁니다
링크를 클릭해서 완성된 모습을 한 번 보세요.. 예제라서 대충 간단하게 만든 홈입니다
나모 5.0를 기준으로 설명하지만 드림위버나 다른 툴들도 만드는 원리는 같답니다
01. 단축키 ctrl + F2 해서 문서 속성으로 들어간 후 스타일에서 여백을 0 으로 지정하세요
근데 뭐 꼭 지정할 필요는 없어요.. ^^;;; 이건 홈 디자인에 달린겁니다.
![46.gif](/files/attach/images/19360727/631/365/019/1f8cc4499750e64ab536f44a1fd64857.gif)
02. 먼저 메인 페이지를 만들어줍니다. 홈페이지는 메인이 제일 기본이고 복잡하며
나머지 서브 페이지는 메인 페이지를 수정하면 쉽게 만들 수 있습니다
표 >새 표 한 다음 나오는 표 속성에서 너비 780 픽셀, 가로 4, 세로 1 칸의 표를 만듭니다
(참고로 가로 780 픽셀은 800*600 브라우저에 딱 맞는 크기거든요)
여기서 중요한 것은 높이는 설정하지 않는다는 겁니다. 노프레임 홈에서는 게시판 길이에 따라
자동으로 페이지 길이가 늘어나야 하므로 높이는 입력하지 않으셔도 됩니다.
정렬은 가운데로 해야 보기 좋겠죠.. 그리고 테두리 선 종류는 감추기로 안 보이게 합니다
![02.gif](/files/attach/images/19360727/631/365/019/de6bb0e9be954c4b56704d82e3ecdcf7.gif)
03. 표가 만들어지면 첫 번째 줄을 두 칸으로 나눕니다. 왼쪽에 로고, 오른쪽에 메뉴를 넣게요
첫 번째 줄에 커서를 둔채 오른쪽 마우스를 클릭하면 다음 그림과 같이 메뉴가 나옵니다
![03.gif](/files/attach/images/19360727/631/365/019/90bf9c2bebbaf809c04f1866c2515c2f.gif)
![04.gif](/files/attach/images/19360727/631/365/019/591ce81a747442b405a37107125a1900.gif)
04. 위쪽 툴바에서 액자 모양 아이콘을 클릭하면 그림을 삽입할 수 있습니다.
두 칸으로 나뉘어진 왼쪽 셀에 로고 그림을 삽입하세요
![05.gif](/files/attach/images/19360727/631/365/019/17c6084af6a356c916d27fcc8f16de5d.gif)
![06.gif](/files/attach/images/19360727/631/365/019/8a2e69ab30070e810535de4148e300ef.gif)
05. 그리고 오른쪽 셀에도 메뉴 그림들을 똑같은 방법으로 삽입합니다.
그리고 셀 속성을 아래 그림과 같이 맞춰주면 오른쪽 아래에 메뉴들이 위치하게 됩니다
![07.gif](/files/attach/images/19360727/631/365/019/af0502b1c052b316bbffa39a6d5c29fa.gif)
06. 그 다음 두 번째 줄에도 파란 그림(01.gif) 을 삽입해주고
맨 마지막 셀에는 배경 색을 넣고 저작권을 써주세요
중간에는 로그인과 최근게시물이 들어갈 것이므로 일단은 그냥 비워둡니다.
07. 비어있는 세 번째 줄에 너비 100%, 가로 1, 세로 2 칸인 새로운 표를 만들어 삽입합니다.
그리고 새로 삽입한 표의 로그인이 들어갈 왼쪽 셀의 너비는 160 픽셀로 해주세요..
![09.gif](/files/attach/images/19360727/631/365/019/91a73d1dd2968bfdeb27016f8eb210a7.gif)
근데 왜 그냥 셀을 바로 나누지 않고 번거롭게 다시 표를 만들어 삽입할까요?
로고와 메뉴가 들어간 첫 번째 줄은 이미 세로로 두 칸 나뉘어져 있습니다
그런데 세 번째 줄도 마찬가지로 왼쪽에 로그인이 들어가야 하므로 세로로 두 칸 나눠야 합니다
하지만 그냥 바로 셀을 나누게 되면 첫 번째 줄과 세 번째 줄이 같이 움직여 버립니다
로그인이 들어갈 셀의 너비는 로고가 들어가 있는 셀의 너비보다 훨씬 작습니다
로그인의 들어갈 셀의 너비를 160 으로 정해준다해도 로고 때문에 더 이상 줄어들지 않거든요
이게 무슨 말인지는 직접 해보시면 아실거에요.. 암튼 표 안에 다시 표를 넣는 것은 아주 중요합니다
이것처럼 첫번째 로고와 메뉴가 들어간 셀도 바로 나누지 않고 그 안에 새 표를 삽입하고
그 새로 삽입한 표를 두 칸으로 나눠서 왼쪽에 로고, 오른쪽에 메뉴를 넣어도 됩니다.
08. 그런데 표에 양쪽으로 테두리가 있다면 훨씬 정돈되어 보일겁니다.
테두리는 1픽셀 셀을 이용하여 표로 만들 수도 있지만 전 주로 스타일을 이용합니다.
새로 삽입한 표가 선택된 상태에서 표 속성으로 들어가 스타일을 클릭하고 테두리 >모양에서
solid를 선택하고 색을 정해줍니다. 너비는 1로 해주세요
표의 왼쪽과 오른쪽 양 끝에만 테두리가 생겨야 하므로 위 아래는 none을 선택합니다.
모양은 여러 가지가 있는데 쉬운 영어니까 척 보면 아실 듯..
![10.gif](/files/attach/images/19360727/631/365/019/ff9980c4ee00c9ed74dfa16f127fa737.gif)
09. 그리고 로그인이 들어갈 왼쪽 셀 속성으로 들어가 아래처럼 테두리 모양을 지정합니다.
그러면 로그인이 들어갈 왼쪽 셀과 최근게시물이 들어갈 셀의 중간에 선이 생겨서 구분이 되겠죠
이처럼 스타일은 이쁜 표를 만드는데 여러 가지로 응용이 가능하므로 잘 배워두시기 바랍니다.
스타일은 표 속성, 셀 속성 각각 지정할 수 있다는걸 아시겠죠?
![11.gif](/files/attach/images/19360727/631/365/019/27fa6df0fa37104a6ab3955e053b6ec2.gif)
10. 그러면 다음과 같이 기본적인 레이아웃은 일단 완성됩니다.
양쪽과 중간에 회색 테두리 선이 생긴게 보이죠?
![15.gif](/files/attach/images/19360727/631/365/019/ea05386820d206d1aeaca9a14dce3efd.gif)
댓글 45
제목 | 글쓴이 | 날짜 |
---|---|---|
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝!
[22]
![]() | CoolUnit | 2004.03.01 |
그림위에 마우스를 올렸을때 그림저장 버튼 안나타나게 하기...
[17]
![]() | PHASE | 2004.01.19 |
스크롤바 색상을 아름답게.
[17]
![]() | 해리포터포에버 | 2003.12.16 |
마우스 커서에 대해서...
[16]
![]() | impre | 2003.09.20 |
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때...
[9]
![]() | PHASE | 2003.09.08 |
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1)
[31]
![]() | 토끼군 | 2003.08.20 |
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기
[27]
![]() | @kihwa | 2003.07.26 |
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치
[31]
![]() | @kihwa | 2003.07.26 |
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기
[45]
![]() | @kihwa | 2003.07.11 |
쭘's식 홈페이지 만들기 No.5 - (미리보기 포함)
[18]
![]() | 쭘's | 2003.07.07 |
쭘's식 홈페이지 만들기 No.4 - (미리보기 포함)
[26]
![]() | 쭘's | 2003.06.16 |
쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함)
[37]
![]() | 쭘's | 2003.06.07 |
css3 안쪽과 바깥쪽 그림자 만들기 입니다
![]() | 낮은자 | 2014.03.06 |
[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기
[6]
![]() | 999 | 2011.01.11 |
노프레임 홈페이지 만들기 강좌
![]() | H.N커뮤니티 | 2009.02.28 |
메뉴에 마우스오버시 레이어서브메뉴창 뜨게하기 (나모웹)
![]() | H.N커뮤니티 | 2009.02.22 |
css 정리 파일(한글)
[3]
![]() | 미곰탱 | 2009.01.22 |
스크립트 모음
[1]
![]() | *이종민* | 2008.11.29 |
계산기
[1]
![]() | *이종민* | 2008.11.29 |
바탕화면에 바로가기 만들기
![]() | *이종민* | 2008.11.29 |