조회수: 168, 추천수: 4, 2007.08.28 02:21:40
- 게시글 주소 : http://www.zeroboard.com/13185554
- 엮인글 주소 : http://www.zeroboard.com/13185554/trackback
많이 밀렸네요. 잘 될지 모르지만 이제부터 간결하게 가겠습니다.
2-2회 바로 가죠. 오늘 올릴 내용은 아래와 같습니다.
2-2. 레이아웃에서
(1) 이미지 사용법,
(2) 자바스크립트와 css파일의 사용법
읽으면서 모르는 말이 나와도 일단 쭉 따라가 봅니다...
(1) 이미지 사용법
chochobo 레이아웃에서 이미지를 사용하려면
1) zbxe/layouts/chochobo/ 밑에 images 디렉토리를 생성합니다.
2) 만든 images 디렉토리에 사용할 이미지를 올립니다.
3) layout.html에서 사용하려면
<img src="./images/이미지파일명" />
위와 같은 이미지 경로를 이용하시면 됩니다.
4) 주의할 점은, 제가 확인한 바로는 layout.html 에 "http://~" 로 시작하는 이미지 경로를 사용하시면 안됩니다.
<img src="http://~" /> 이런 식의 이미지 경로는 사용하지 마세요.
layout.html파일에서 사용할 이미지는 모두 images 디렉토리에 저장한 후 "./images/이미지파일명" 경로를 이용해 사용하세요.
(2) js 파일 사용법
1) zbxe/layouts/chochobo/ 밑에 js 디렉토리를 생성합니다.
2) 만든 js 디렉토리에 사용할 js 파일를 올립니다.
3) layout.html 에서 사용하려면 layout.html 위쪽에 아래와 같이 작성해줍니다.
<!--%import("js파일의경로")-->
<!--%import( )-->는 js파일이나 css파일을 불러와야 할 때 사용하는 양식~ 양식입니다.
참고 : js 파일에서 images 디렉토리에 있는 이미지의 경로를 사용할 경우에는 chochobo/images/chobo.gif 처럼 해당 레이아웃에서부터 시작하는 경로를 사용하셔야 합니다.
(3) css 파일 사용법
1) zbxe/layouts/chochobo/ 밑에 css 디렉토리를 생성합니다.
2) 만든 css 디렉토리에 사용할 css 파일를 올립니다.
3) layout.html에서 사용하려면 layout.html 위쪽에 아래와 같이 작성해줍니다.
<!--%import("css파일의경로")-->
js 파일 불러오기는 방법과 같죠? css파일의 경로만 바꿔 주면 됩니다.
그럼, 1회부터 지금까지 작성한 layout.html 내용을 간결하게 정리해 나가면서 아래처럼 작성 합니다.
그전에 태그 하나 소개합니다.
div 태그입니다. 영역 분할 하는데 쓰이는 태그 입니다. 요즘은 레이아웃 잡는데 table 태그를 쓰지 않고 이 div 태그를 이용합니다.
<div> 내용 </div>
의 형식으로 쓰시면 됩니다. 각 div에 id나 class 명를 지정할 수 있고 css파일에서 각각의 id와 class의 스타일을 지정할 수 있습니다.
div 태그는 p 태그의 단락 구분 속성을 갖고 있어서 화면에 보여주기도 좋습니다. 이게뭐야 싶어도 그냥 div 태그를 써보죠. 트랜드에 뒤쳐지면 안되잖아요.
이 모든 것들을 이번 초초보레이아웃작성 팁으로 작성할 능력이 안되서; 팁 게시가 끝날 때 도움이 될 사이트를 소개하도록 하겠습니다. 그래서 일단은 따라하기...;
이렇게 작성하고 자신의 계정 zbxe/layouts/chochobo/ 디렉토리 밑에 layout.html 파일을 올려서 덮어쓰기 합니다.
위 (1), (2), (3)의 각 준비 과정을 거치고 layout.html 파일도 새로 작성했다면, 이제 화면에 어떻게 출력되는지 볼까요? 아래와 같이 나오면 정상입니다.
미리보기
지금까지 무미건조 했던 모습과는 조금 달라졌죠?
하늘색의 배경그림(chobobg.gif)이 출력되는 이유는 chobo.css 파일을 불러왔고(import) 그 파일의 body{~~~ 스타일 내용이 적용됐기 때문입니다.
파이어 폭스에서 즐겨찾기 기능은 작동을 안하네요;; 아무튼..
그럼 바뀐 페이지의 소스 보기를 해보세요. 마우스 오른쪽 버튼->소스보기 혹은
단축키(ie 에서는 alt v + c , 파폭에서는 alt v + o)를 이용해서 볼 수 있습니다.
우리가 layout.html 상단에
오늘은 여기까지 입니다.
말씀 드린대로 도움이 될 사이트 소개합니다. 천천히 읽으면서 받아 들이도록 애써 보세요. 저도 다 읽으려면 많이 남았습니다. |-)
1. http://ilmol.com/wp/2005/06/09/25/ 저도 읽어 봤는데 테이블은 이제 과연 어디에 써야하나.. 고민됩니다;;
2. http://ilmol.com/wp/2005/08/15/110/ 쭉 읽어보시고 하단 부분에 보시면 ul 태그에 대해 나옵니
다. 익혀 두세요. 메뉴 사용과 관련해서 많이 나오는 태그 입니다.
3. http://ilmol.com/wp/css 이 페이지와 그곳에 링크된 페이지 그리고 우측 메뉴를 이용해 css에 대해 배워 봅니다.
이제 3회에서 메뉴 출력부분과 본문 출력 부분을 배우면 끝날 것 같습니다.
일단 메뉴 1개부터 다수까지 연결하는 부분을 배우고 출력할 수 있는 여러가지 유형의 메뉴 타입를 제시함으로써 마치려고 합니다. 질문은 댓글이나 쪽지로 주세요. 수고하셨습니다.
좋은 하루 되세요.
2-2회 바로 가죠. 오늘 올릴 내용은 아래와 같습니다.
2-2. 레이아웃에서
(1) 이미지 사용법,
(2) 자바스크립트와 css파일의 사용법
읽으면서 모르는 말이 나와도 일단 쭉 따라가 봅니다...
(1) 이미지 사용법
chochobo 레이아웃에서 이미지를 사용하려면
1) zbxe/layouts/chochobo/ 밑에 images 디렉토리를 생성합니다.
2) 만든 images 디렉토리에 사용할 이미지를 올립니다.
3) layout.html에서 사용하려면
<img src="./images/이미지파일명" />
위와 같은 이미지 경로를 이용하시면 됩니다.
4) 주의할 점은, 제가 확인한 바로는 layout.html 에 "http://~" 로 시작하는 이미지 경로를 사용하시면 안됩니다.
<img src="http://~" /> 이런 식의 이미지 경로는 사용하지 마세요.
layout.html파일에서 사용할 이미지는 모두 images 디렉토리에 저장한 후 "./images/이미지파일명" 경로를 이용해 사용하세요.
준비1 : chochobo 디렉토리 밑에 images 디렉토리를 생성한 다음,
아래 첨부파일 2개의 이미지를 images 디렉토리에 chobo.gif chobobg.gif 파일명으로 각각 저장하세요. 무슨 그림인지 한 번 보기도 하세요.
아래 첨부파일 2개의 이미지를 images 디렉토리에 chobo.gif chobobg.gif 파일명으로 각각 저장하세요. 무슨 그림인지 한 번 보기도 하세요.
(2) js 파일 사용법
1) zbxe/layouts/chochobo/ 밑에 js 디렉토리를 생성합니다.
2) 만든 js 디렉토리에 사용할 js 파일를 올립니다.
3) layout.html 에서 사용하려면 layout.html 위쪽에 아래와 같이 작성해줍니다.
<!--%import("js파일의경로")-->
<!--%import( )-->는 js파일이나 css파일을 불러와야 할 때 사용하는 양식~ 양식입니다.
준비2 : chochobo 디렉토리 밑에 js 디렉토리를 생성한 다음,
빈문서를 하나 불러와 아래 내용을 입력하고 js 디렉토리 밑에 chobo.js 파일명으로 저장하세요.
( 지금 페이지를 즐겨찾기로 지정해주는 자바스크립트 내용입니다. )빈문서를 하나 불러와 아래 내용을 입력하고 js 디렉토리 밑에 chobo.js 파일명으로 저장하세요.
function addfavorites(favoriteurl, favoritetitle){
if (document.all)
window.external.AddFavorite(favoriteurl,favoritetitle)
}
if (document.all)
window.external.AddFavorite(favoriteurl,favoritetitle)
}
참고 : js 파일에서 images 디렉토리에 있는 이미지의 경로를 사용할 경우에는 chochobo/images/chobo.gif 처럼 해당 레이아웃에서부터 시작하는 경로를 사용하셔야 합니다.
(3) css 파일 사용법
1) zbxe/layouts/chochobo/ 밑에 css 디렉토리를 생성합니다.
2) 만든 css 디렉토리에 사용할 css 파일를 올립니다.
3) layout.html에서 사용하려면 layout.html 위쪽에 아래와 같이 작성해줍니다.
<!--%import("css파일의경로")-->
js 파일 불러오기는 방법과 같죠? css파일의 경로만 바꿔 주면 됩니다.
준비3 : chochobo 디렉토리 밑에 css 디렉토리를 생성한 다음,
빈문서를 하나 불러와 아래 내용을 입력하고 css 디렉토리 밑에 chobo.css 파일명으로 저장하세요.
(body 의 배경색을 흰색으로 하고, 배경그림은 ../images/chochobg.gif 로 하며, 배경그림을 가로로 반복하라는 스타일지정입니다.)빈문서를 하나 불러와 아래 내용을 입력하고 css 디렉토리 밑에 chobo.css 파일명으로 저장하세요.
body{ background:#FFFFFF url(../images/chobobg.gif) repeat-x; }
그럼, 1회부터 지금까지 작성한 layout.html 내용을 간결하게 정리해 나가면서 아래처럼 작성 합니다.
그전에 태그 하나 소개합니다.
div 태그입니다. 영역 분할 하는데 쓰이는 태그 입니다. 요즘은 레이아웃 잡는데 table 태그를 쓰지 않고 이 div 태그를 이용합니다.
<div> 내용 </div>
의 형식으로 쓰시면 됩니다. 각 div에 id나 class 명를 지정할 수 있고 css파일에서 각각의 id와 class의 스타일을 지정할 수 있습니다.
div 태그는 p 태그의 단락 구분 속성을 갖고 있어서 화면에 보여주기도 좋습니다. 이게뭐야 싶어도 그냥 div 태그를 써보죠. 트랜드에 뒤쳐지면 안되잖아요.
이 모든 것들을 이번 초초보레이아웃작성 팁으로 작성할 능력이 안되서; 팁 게시가 끝날 때 도움이 될 사이트를 소개하도록 하겠습니다. 그래서 일단은 따라하기...;
<!-- js 파일을 가져옵니다. -->
<!--%import("js/chobo.js")-->
<!-- css 파일을 가져옵니다. -->
<!--%import("css/chobo.css")-->
<div>
<!-- 홈타이틀 -->
{$layout_info->home_title}
</div>
<div>
<!-- 로고이미지, 클릭하면 홈으로 이동 -->
<a href="{$layout_info->home_url}"><img src="{$layout_info->logo_image}"></a>
</div>
<div>
<!-- 이미지를 사용해보자. img 태그를 쓸 때, alt 값 지정하는 것을 잊지 맙시다. -->
<img src="/images/chobo.gif" alt="chobo이미지" />
</div>
<div>
<!-- chobo.js 에 저장했던 즐겨찾기 스크립트를 이용해 봅시다. -->
<a href="javascript:addfavorites('{$layout_info->home_url}','{$layout_info->title}')">즐겨찾기에 추가</a>
</div>
<!--%import("js/chobo.js")-->
<!-- css 파일을 가져옵니다. -->
<!--%import("css/chobo.css")-->
<div>
<!-- 홈타이틀 -->
{$layout_info->home_title}
</div>
<div>
<!-- 로고이미지, 클릭하면 홈으로 이동 -->
<a href="{$layout_info->home_url}"><img src="{$layout_info->logo_image}"></a>
</div>
<div>
<!-- 이미지를 사용해보자. img 태그를 쓸 때, alt 값 지정하는 것을 잊지 맙시다. -->
<img src="/images/chobo.gif" alt="chobo이미지" />
</div>
<div>
<!-- chobo.js 에 저장했던 즐겨찾기 스크립트를 이용해 봅시다. -->
<a href="javascript:addfavorites('{$layout_info->home_url}','{$layout_info->title}')">즐겨찾기에 추가</a>
</div>
이렇게 작성하고 자신의 계정 zbxe/layouts/chochobo/ 디렉토리 밑에 layout.html 파일을 올려서 덮어쓰기 합니다.
위 (1), (2), (3)의 각 준비 과정을 거치고 layout.html 파일도 새로 작성했다면, 이제 화면에 어떻게 출력되는지 볼까요? 아래와 같이 나오면 정상입니다.
미리보기
지금까지 무미건조 했던 모습과는 조금 달라졌죠?
하늘색의 배경그림(chobobg.gif)이 출력되는 이유는 chobo.css 파일을 불러왔고(import) 그 파일의 body{~~~ 스타일 내용이 적용됐기 때문입니다.
파이어 폭스에서 즐겨찾기 기능은 작동을 안하네요;; 아무튼..
그럼 바뀐 페이지의 소스 보기를 해보세요. 마우스 오른쪽 버튼->소스보기 혹은
단축키(ie 에서는 alt v + c , 파폭에서는 alt v + o)를 이용해서 볼 수 있습니다.
우리가 layout.html 상단에
<!--%import("js/chobo.js")-->
<!--%import("css/chobo.css")-->
이 두 줄을 추가했는데 소스 내용의 <head>와 </head> 사이에 잘 찾아보면 <!--%import("css/chobo.css")-->
<script type="text/javascript" src="/zbxe/layouts/chochobo/js/chobo.js"></script>
와 <link rel="stylesheet" href="/zbxe/layouts/chochobo/css/chobo.css" type="text/css" />
이 들어가 있는 것을 알 수 있습니다. zbxe의 템플릿이 알아서 추가 해준 것이죠. 역시 zbxe 좋죠?오늘은 여기까지 입니다.
말씀 드린대로 도움이 될 사이트 소개합니다. 천천히 읽으면서 받아 들이도록 애써 보세요. 저도 다 읽으려면 많이 남았습니다. |-)
1. http://ilmol.com/wp/2005/06/09/25/ 저도 읽어 봤는데 테이블은 이제 과연 어디에 써야하나.. 고민됩니다;;
2. http://ilmol.com/wp/2005/08/15/110/ 쭉 읽어보시고 하단 부분에 보시면 ul 태그에 대해 나옵니
다. 익혀 두세요. 메뉴 사용과 관련해서 많이 나오는 태그 입니다.
3. http://ilmol.com/wp/css 이 페이지와 그곳에 링크된 페이지 그리고 우측 메뉴를 이용해 css에 대해 배워 봅니다.
이제 3회에서 메뉴 출력부분과 본문 출력 부분을 배우면 끝날 것 같습니다.
일단 메뉴 1개부터 다수까지 연결하는 부분을 배우고 출력할 수 있는 여러가지 유형의 메뉴 타입를 제시함으로써 마치려고 합니다. 질문은 댓글이나 쪽지로 주세요. 수고하셨습니다.
좋은 하루 되세요.
Tip이 도움이 되었다면 댓글과 평가 부탁합니다.
Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다.