현재 위치

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

HTML5를 이용한 웹 제작관련 질문 입니다. 웹프로그래머분들 환영해요^^

joooon3의 이미지
글쓴이: joooon3 / 작성시간: 목, 2013/06/27 - 2:39오후

안녕하세요..
웹프로그래밍을 처음 접하는 초짜입니다..

바로 질문하겠습니다^^

보통 레이아웃이 헤더, 네비게이션바, 사이드, 본문, 푸터
이렇게 나눠지잖아요.

그리고 헤더속 네비게이션바에 여러 탭들이 있을태고
예로 공지사항 | 커뮤니티 | 질문&답변 | 자료실 ..등등..

메인페이지에서 공지사항이나 자유게시판 같은 탭을 클릭하면 본문이 바뀌잖습니까?
이때 본문을 제외한 나머지 헤더, 네비게이션바, 사이드, 푸터는 바뀌지 않으니
본문내용만 바뀔 코드를 수정하면 되는데...
여기서 하나하나 헤더부분 코드와 네비게이션바 코드 등 복사 붙여넣기하나요?

예)
index.html 코드가

...
<a href="noti.html">공지사항</a>
<a href="community.html">커뮤니티</a>
...
//본문
<p>메인페이지</p>
...

이렇다면

noti.html 코드는

...(복사 붙여넣기)
//본문
<p>공지사항 페이지</p>
...(복사 붙여넣기)

이런식으로 본분을 제외한 나머지는 복사 붙여넣기 하나요?

다른 웹제작 강좌나 헤외 포럼에서 이런식으로 대충대충 가르쳐주던데..
복사 붙여넣기는 정말 아닌거 같습니다. 프로그래밍에 복사 붙여넣기라니...

중복코드를 재사용 할 방법이 있을듯 한데...
어떻게 해야되는지 모르겠네요..

다른분이 frameset을 이용하라 했지만 제가 원하는건 frameset이용하지 않고
중복코드를 재사용 하는 것입니다. (HTML5에선 frameset을 지원도 하지 않고여)
보통 커뮤니티사이트 보면
탭 부분에

...
<a href="https://www.도메인.com/noti">공지사항</a>
...

이런식으로 바로 url링크를 걸어주던데;;
이 방법은 보니까 서버 웹루트폴더에 noti 디렉토리를 만들어주고
noti 디렉토리안에 index.html을 부른거 같던데.. 아닌가요?

웹 초짜라 아직 공부할게 많네요...ㅠㅠ
이렇게 써보고 읽고나니 무슨 말을 썼는지도 모르겠고..
최대한 열심히 이해하기 쉽게풀어 썼습니다..
긴 질문 읽어주셔서 감사합니다^^ (꾸벅)

Forums: 
프로그래밍 QnA
익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 목, 2013/06/27 - 3:10오후

디자인 자체는 CSS를 통해 외부로 분리할 수 있지만
내용 자체는 그런 식으로 분리하는 것이 불가능합니다.

하지만 대부분의 http 서버는 .php를 지원할테고
그러면 php의 include나 require를 통해 원하시는 방식대로
하나의 내용을 여러 파일에 포함할 수 있습니다.

혹은 웹서버가 php를 지원하지 않는다면,
make와 perl, php등을 이용해서
여러 파일들을 통합해서 결과물을 뽑아내주는 스크립트를 짜서
전처리(?)를 거친 파일을 올리는 방법도 있습니다.

다시 말하지만, HTML 자체엔 여러 파일을 조합하는 기능은 없어요.

joooon3의 이미지

글쓴이: joooon3 / 작성시간: 목, 2013/06/27 - 3:32오후

답변 대단히 감사드립니다^^
헤더레이아웃 따로, 사이드레이아웃 따로 만들어 php를 사용해 각각 레이아웃파일들을 불러와 한 페이지를 구성하는 그런 뜻인가요?
혹시 자바스크립트도 그런 일을 할 수 있나요..?

snowall의 이미지

글쓴이: snowall / 작성시간: 금, 2013/06/28 - 9:05오전

php같은 서버쪽 스크립트를 쓰는게 가장 낫겠죠?

자바스크립트로도 안될건 없겟지만, 그건 클라이언트쪽 스크립트니까 서버에 있는 웹페이지들을 클라이언트에게 다 알려준다는 뜻이 됩니다. 그런거 신경 안쓴다면 자바스크립트로 잘 해보시면 됩니다.

아니면 복사해서 붙여넣기 과정을 자동화 시켜주는 프로그램을 만드세요. 프로그래밍에서 복사해서 붙여넣기 빼면 뭔가 허전하지 않나요? ㅎㅎ

피할 수 있을때 즐겨라! http://melotopia.net/b

tigerjj의 이미지

글쓴이: tigerjj / 작성시간: 목, 2013/06/27 - 11:08오후

저도 요즘 유사한거를 해보고 있는데요
저는 css의 displa 옵션을 조절하고 있습니다.

elem.display = 'none'; // hide
elem.display = 'block'; // show - use this for block elements (div, p)
(참조: http://stackoverflow.com/questions/9456289/how-to-make-a-div-visible-and-invisible-with-javascript)

이런식으로 해서 해당 body에 여러개를 지정해놓고 hide와 block으로 원하는걸 보이고 숨기고 하고 있습니다.

사실 전 Android 개발자 인데 layout에서 이런식으로 visibility를 조절하기 때문에 유사한 방법을 찾다가 이렇게 하고 있습니다.

원하는 방법이 맞는지 모르겠네요? ㅎ

joooon3의 이미지

글쓴이: joooon3 / 작성시간: 금, 2013/06/28 - 6:43오전

답변 감사드립니다.
hided와 block도 제가 구상하고 있는 웹페이지를 구현시켜주긴 하지만
원하는 방법은 아니네요 ㅠㅠ
그래도 답변 진심으로 감사드리고 덕분에 더 배워가요!!
감사합니다 (꾸벅)

댓글 달기

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

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
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.