웹 사이트 개발 시 궁금한게 있어 질문드립니다.

조회수 2530회

공부할 겸 웹 관련 프로젝트를 하나 해보려고 합니다. 제가 구현하고 싶은 사이트가 기본적으로 다음과 같은 기능을 필요로 하는데 어떤 기술을 사용해야 하는지 잘 모르겠습니다. 정확한 키워드가 떠오르지않아 구글링도 사실 되게 애매하더라구요. 제가 원하는 기능은 다음과 같습니다.

-특정 링크로 이동 시 헤더 및 푸터는 고정되지만 나머지 콘텐츠 부분만 부분 페이지 갱신

-하나의 창처럼 여러 창을 하나의 페이지 안에 출력하고 닫기 버튼을 누를 경우 하나의 창이 닫히는 기능

질문에 대한 이해를 해주시길 바라는 마음으로 간략하게 그림을 만들었습니다.

이미지

이미지

  • (•́ ✖ •̀)
    알 수 없는 사용자

3 답변

  • -특정 링크로 이동 시 헤더 및 푸터는 고정되지만 나머지 콘텐츠 부분만 부분 페이지 갱신

    여러가지 방법이 있습니다. 하나 소개해드리자면 jsp에는 include 라는 디렉티브가 있습니다. 다른페이지의 내용을 현재 페이지에 적용시키는 방법인데요. 사용방법은

    <%@include file="포함될 파일의 URL"%>

    위의 태그를 현재 페이지에 넣어주면 "포함될 파일의 URL" 을 호출해서 현재 페이지에 포함시켜주게됩니다 . 위와같은 방법으로 헤더영역과 푸터영역의 페이지를 각 페이지에 포함시켜줄 수 있습니다.

    -하나의 창처럼 여러 창을 하나의 페이지 안에 출력하고 닫기 버튼을 누를 경우 하나의 창이 닫히는 기능

    모달창을 띄어서 css로 전체화면으로 잡아주는 방법도 있겠네요.

    • (•́ ✖ •̀)
      알 수 없는 사용자
  • 특정 링크로 이동 시 헤더 및 푸터는 고정되지만 나머지 콘텐츠 부분만 부분 페이지 갱신

    iframe을 사용하시면 됩니다.

    하나의 창처럼 여러 창을 하나의 페이지 안에 출력하고 닫기 버튼을 누를 경우 하나의 창이 닫히는 기능

    창이라고 하신 부분이 윈도우를 말하는건지, 아니면 단순 영역을 말하는건지 모르겠네요. 단순 영역을 의미하는거라면 div 태그로 레이어를 나누고 자바스크립트로 해당 영역을 날려버리는걸 구현할 수 있습니다.

  • - 특정 링크로 이동 시 헤더 및 푸터는 고정되지만 나머지 콘텐츠 부분만 부분 페이지 갱신

    iframe 웹 표준에는 별로 추천하지 않는 기능이라.

    HTML과 JAVASCRIPT (+ jQuery)로 설명드리자면

    HTML

    <nav>
        <a href="index.html" class="active" >Home</a>
        <a href="html5.html">HTML5</a>
        <a href="css3.html">CSS3</a>
        <a href="javascript.html">JavaScript</a>
    </nav>
    <section id="content">
        <div class="container">
         // 여기에 내용 출력
        </div>
    </section>
    

    JavaScript

    $(function(){
        $('nav a').on('click', function(e) {
            e.preventDefault(); // 링크 기본 동작 취소
            var url = this.href;
    
            $('nav a.active').removeClass('active'); // 현재 링크 활성화 제거
            $(this).addClass('active');
    
            $('#cotent .container').remove();  // 이 전 페이지 내용 제거
            $('#content').load(url + ' #content').hide().fadeIn('slow'); 
              // 새 페이지에서 #content 부분을 가져와 추가한다.
        });
    });
    

    -하나의 창처럼 여러 창을 하나의 페이지 안에 출력하고 닫기 버튼을 누를 경우 하나의 창이 닫히는 기능

    모달(modal)창기능을 말씀하시는 것 같네요. 닫기버튼(dismiss, close button) 기능이랑.. 구글에서 모달창 검색하면 나올듯 하네요.. 아님면 Bootstrap 프레임워크를 사용해 보시는 것도 괜찮겠네요..

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)