현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

노프레임 레이아웃에서 메뉴와 내용을 "좀 더 확실히" 분리할 수는 없습니까?

noblepylon의 이미지
글쓴이: noblepylon / 작성시간: 일, 2008/07/06 - 12:41오후

XHTML과 CSS를 사용하여 간단한 노프레임 레이아웃을 만들어보았습니다. (예제 보기)

프레임을 썼을때보다 깔끔해보이기는 합니다만, HTML코드에서 메뉴와 내용이 확실하게 구분이 되지 않아서 상당히 찝찝합니다.

<div id="layout">
<div id="menu">
<table class="menu">
    <tr>
        <td class="emphasized">
            <a href="index.html">대문</a>
        </td>
    </tr>
    <tr>
        <td class="menu">
            <a href="menu1.html">메뉴1</a>
        </td>
    </tr>
    <tr>
        <td class="menu">
            <a href="menu2.html">메뉴2</a>
        </td>
    </tr>
    <tr>
        <td class="menu">
            <a href="menu3.html">메뉴3</a>
        </td>
    </tr>
</table>
</div> <!-- 여기까지가 메뉴 -->
<div id="bodycontent"> <!-- 여기부터가 내용 -->
    <p>내용</p>
</div>
</div>

코드 상에서도 메뉴와 내용이 확실하게 구분되어 보이게 할 수는 없나요?
(아예 파일을 두개로 쪼갠다던가 하는...)
Forums: 
프로그래밍 QnA
klara의 이미지

글쓴이: klara / 작성시간: 일, 2008/07/06 - 2:05오후

말씀하시는 내용을 보니, 시맨틱웹의 내용과 디자인의 분리에서의 내용이 아니라, 단지 페이지에서 메뉴를 제외한 나머지 부분을 말씀하시는 것 같네요.
브라우저에서 보이는 페이지는 하나의 HTML페이지이고, 그안에서 다른 페이지를 불러오기 위한 것이 프레임인데, 노프레임이라면 당연히 안되겠죠.
물론 iframe등을 이용할수도 있지만, 프레임을 이용하는 것과 다를바 없을테구요...

페이지를 나누는 방법을 쓰고 싶다면 php등을 이용해서 각각의 HTML을 하나의 HTML페이지에서 include하는 방법을 이용하셔야 할 듯합니다.
확실친 않지만, php가 지원되지 않는 서버라면, 자바스크립트를 이용해서도 어떻게 될지도 모르겠네요.
어느쪽이든 노프레임인 경우라면 HTML만으로는 불가능할 것같습니다.

noblepylon의 이미지

글쓴이: noblepylon / 작성시간: 일, 2008/07/06 - 2:22오후

include라는게 C언어의 그것과 비슷한 개념인가요?
그렇게 된다면 상당히 편리할 것 같습니다.

ps. 이 서버는 php를 지원한다고 합니다.
---
"The truth will make you free."(John 8:32)
"I am the way, and the truth, and the life: no one comes to the Father but through Me."(John 14:6)

---
“내게 능력주시는 자 안에서 내가 모든 것을 할 수 있느니라.”(빌립보서 4:13)

klara의 이미지

글쓴이: klara / 작성시간: 일, 2008/07/06 - 2:33오후

다른 페이지의 내용을 포함시킨다는 의미에서는 yes이고, C처럼 선언과 정의를 분리해서 이용하냐는 의미에서는 no입니다.
예를 들어 include("a.php")라고 적으면 , a.php 내용을 그대로 해당 위치에 넣어버립니다.
PHP도 프로그래밍 언어이므로, 여기서 PHP에 대해 설명하는 건 무리가 있습니다만, 단지 include를 위한 것이라면, 다음과 같이 하면 됩니다.

menu.php

<table class="menu">
    <tr>
        <td class="emphasized">
            <a href="index.html">대문</a>
        </td>
    </tr>
    <tr>
        <td class="menu">
            <a href="menu1.html">메뉴1</a>
        </td>
    </tr>
    <tr>
        <td class="menu">
            <a href="menu2.html">메뉴2</a>
        </td>
    </tr>
    <tr>
        <td class="menu">
            <a href="menu3.html">메뉴3</a>
        </td>
    </tr>
</table>

view.php

<div id="layout">
<div id="menu">
<? include("./menu.php"); ?>
</div> <!-- 여기까지가 메뉴 -->
<div id="bodycontent"> <!-- 여기부터가 내용 -->
    <p>내용</p>
</div>
</div>

더자세한것이 알고 싶으시다면 PHP를 공부해보시길 추천합니다.

댓글 달기

텍스트 포맷에 대한 자세한 정보

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.