현재 위치

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

[완료] 요즘은 홈페이지 만들때 frameset 안쓰나요?

sinwho의 이미지
글쓴이: sinwho / 작성시간: 화, 2011/10/11 - 11:11오후

지금 홈페이지를 리뉴얼 하고 있는데요

예전에 배웠던 html과 제로보드로만 하다보니 한계가 보여

xhtml을 공부하고 있는데요

네이버나 뽐뿌 처럼

메인 메뉴는 항상 고정되게 하려면 어떻게 해야 되는건가요?

그리고 예를 들어 뽐뿌의 게시판 게시글의 하나의 링크를 다시 열면 그 게시판의 링크만 열리는게

아니라 전체 사이트의 모습은 그대로인채로 열리잖아요

이것도 좀 가르쳐주시면 감사하겠습니다.

너무 초보적인 질문인거 같아 죄송해요..^^;

Forums: 
프로그래밍 QnA
jachin의 이미지

글쓴이: jachin / 작성시간: 수, 2011/10/12 - 1:55오전

웹 퍼블리싱 하시는 분들이 많이 계셨다면,
아마 좋은 답변을 드렸을지도 모르겠네요. ^^
(그리고 KLDP 사이트 디자인도 조금 더 멋졌을지도... >_<)a

요새는 div 태그를 씁니다.

div 태그 내에 style 속성을 주는데,
style="position:absolute; top: 100px; left: 300px;" 와 같이 CSS 속성 값을 줍니다.
<div style="position: absolute; top: 100px; left: 300px;"> 어쩌구</div> 하는 식이지요.

HTML 문법과 함께, CSS 에 대해서 공부하시면 많은 도움이 되실 겁니다. :)

amorette의 이미지

글쓴이: amorette / 작성시간: 목, 2011/10/13 - 7:40오전

최상위에서 position: absolute; 하면 공중부양합니다.

winner의 이미지

글쓴이: winner / 작성시간: 수, 2011/10/12 - 9:20오전

과거 frame이 남발되었던 것은 table 처럼 화면영역을 나누고 영역별로 동적으로 나누기 위한 기술이 별로 발달하지 않았기 때문이죠.
지금은 div와 ajax의 발전으로 거의 안 쓰게 되었습니다.
하지만 쓰면 적절한 경우가 남아있기는 합니다.

sisuc의 이미지

글쓴이: sisuc / 작성시간: 수, 2011/10/12 - 9:54오전

레이아웃 개념을 알고 계시면 됩니다.

메인 페이지을 만들고 그안에서

헤더, 컨테이너, 풋터를 읽어어오는 식으로 만들어지더군요.

위대한 한글

ucla의 이미지

글쓴이: ucla / 작성시간: 수, 2011/10/12 - 2:06오후

질문하신 부분은 윗분들이 다 해결해 주신 것 같고..
제로보드를 언급하면서 프레임 이야기가 나오는걸 보니 제로보드 4 인것 같다는 생각이 듭니다.
질문자님의 상황을 제가 어렴풋이 추측해봤을때 제로보드 XE를 사용하지면 쉽고 빠르게 리뉴얼 하실 수 있을 것 같다는 생각이 듭니다^^;

----------------------------------------
Instead of thinking about where you are,
think about where you want to be
.Vince Lombardi

cleansugar의 이미지

글쓴이: cleansugar / 작성시간: 수, 2011/10/12 - 2:18오후

여기 아직도 프레임 씁니다.
http://www.fntec.com/

http://www.fntec.com/uploads/board/uboard.asp?id=t1&skin=board_fntec2&color=Black&code=&page=1&page_num=&order1=u_no&order2=desc&u_no=6046&u=0

재벌 2세가 재벌이 될 확률과
금메달리스트 2세가 금메달을 딸 확률이 비슷해지도록
자유오픈소스 대안화폐를 씁시다.

아이디의 아이디어 무한도전
http://blog.aaidee.com

귀태닷컴
http://www.gwitae.com

amorette의 이미지

글쓴이: amorette / 작성시간: 목, 2011/10/13 - 7:39오전

질문하신 웹사이트 같은 경우에는 프레임을 사용하지 않는 대신,
탬플렛 구조로 만들어 레이아웃을 유지하는 겁니다.
이렇게 하면 frameset을 사용할 때와는 달리 페이지 영역 전체를 새로 가져오게 됩니다.

탬플렛 구조로 웹사이트를 설계한다면 일반적으로, 헤더, 컨테이너, 풋터로 나눕니다.
헤더 영역은 레이아웃 최상위에서 여러 페이지가 공유하는 영역입니다.
말씀하신 네이버와 뽐뿌 사이트의 메뉴 부분에 해당합니다.

탬플렛 구조를 사용할 때에는 정적 html 파일만으로는 힘듭니다.
보통 php와 같은 웹 프로그래밍 언어를 사용합니다.
php의 경우 간단히 다른 php파일을 include()하거나 전반적인 뼈대를 제공하는 php 웹프레임워크를 사용합니다.

레이아웃 영역을 나누기 위해 보통 div 태그를 감싸는 식으로 사용합니다.
거기에 css를 사용해서 레이아웃과 표현을 조정할 수 있습니다.
그러나 div 태그를 그 외의 용도에서 남발하면 안됩니다.

요즘에는 레이아웃을 유지하기 위한 목적 외에 필요한 경우에 프레임을 사용하곤 합니다만,
특히 frameset은 잘 쓰이지 않습니다. 하지만 쓰면 안되는 건 아닙니다.

댓글 달기

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

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