Do it 웹사이트 따라 만들기 - 도서소개 페이지 추가하기

# 7-1. Ajax 사용하기

• 내용이 많아지고 하나의 태그 안에 많은 내용을 표현할 경우 페이리 로딩 속도가 느려질 수 있다.
• 따라서 도서별 상세 페이지를 따로 만들고, Ajax를 사용해 패당 페이지가 표시되는 동적화면을 만드는 것이 좋다.
• 대부분의 브라우저에서는 XSS를 막기 위해 요청한 페이지의 도메인과 HTTP 응답의 도메인이 상이할 경우 응답을 거부하는 보안 정책이 적용한다.
• 이런 경우 Ajax가 동작하지 않는데, 브라우저의 속성 - 대상에서 한 칸을 띄고 --allow-file-access-from-files 옵션을 추가하면 Ajax가 로컬에서 동작이 가능한 상태가 된다.

1. class="detail_content"로 그룹화한 도서 상세 내용 페이지를 별도의 페이지로 만든다. Ajax로 불러오는 내용은 현재 문서의 특정 영역이다. 즉, 불러온 문서는 index.html 문서의 지정된 영역(class="notebook")에 결합된다.
2. detail_content(갱신될 부분)만 따로 html문서로 만든다. 추가되는 페이지를 boo1.html, boo2.html, ... 등 html파일을 만들어 index.html과 같은 위치에 저장한다.
3. 도서 목록 "book_roll"의
4. 태그에 data-url 속성을 추가한 후 각 도서 상세 내용이 있는 html파일의 url을 작성한다.

<div class="detail_content">
    <div class="img_book">
        <img src="./images/book1.png" alt="Do it! HTML5+CSS3 웹 표준의 정석 <개정판>" />
    </div>
    <section class="book_description">
        <h4>Do it! HTML5+CSS3 웹 표준의 정석 &#60; 개정판 &#62;</h4>
        <ul class="bullet_list">
            <li><em>저자 </em> 고경희</li>
            <li><em>발행일 </em> 2017-01-03</li>
            <li><em>사양 </em> 608쪽 | 188*257mm</li>
            <li><em>I S B N</em> 979-11-87370-68-0 13000</li>
            <li><em>정가 </em> 28,000 원</li>
            <li><em>상태 </em> 판매중</li>
        </ul>
        <p class="point_text"> 
            <strong>문과생도 컴맹도 아무 것도 몰라도 <br />이 한권으로 OK!</strong>
            이 책으로 공부하면 기초 태그부터 반응형 웹까지 한 번에 배울 수 있습니다. 자세한 설명과 
            간단명료한 많은 예제로 웹 표준의 정석을 익힐 수 있습니다.
        </p>
        <a href="http://easyspub.co.kr/20_Menu/BookView/119/PUB" target="blank" class="commbtn pink">구매사이트</a>
    </section>
</div>

(위와 같이 detail_content 부분만 만든다)

 

스크립트를 작성한다.

• click() : 도서 클릭
• data("url") : 도서에 해당되는 내용의 페이지(데이터)를 찾는다.
• $.ajax({settings}) : Ajax로 해당하는 페이지를 불러온다.

 

1. 먼저 js 파일을 열어 .book_roll 클래스의 li에 클릭 이벤트를 작성한다.
2. 선택한 li를 기준으로 url을 찾아 해당 영역(.notebook)에 도서 소개 페이지를 동적으로 구성한다. 클릭 이벤트로 선택된 태그($(this))를 변수로 만든다.
3. _this의 data 속성에는 해당 도서의 소개 페이지 url이 있다. 클릭할때마다 해당 url을 가져와 변수에 담는다.
4. 새로운 내용을 갱신하기 위해 기존에 있는 영역(.notebook)의 html을 삭제한다.
5. url에 갱신해야 하는 새로운 페이지의 url을 입력한다.

$(document).ready(function(){

//ajax 사용하기
$(".book_roll li").click(function(){
    var _this =$(this);
    var liurl =_this.data("url");
    $(".notebook").html();
    $.ajax({
        type : 'post', //HTTP 요청 방식
        url : liurl, //해당 url
        dataType : 'html', //data 타입
        success : function(data) { //HTTP 요청 성공 후 데이터 전송
            $(".notebook").html(data);
        }
    });
});

Ajax...문제가 좀 있었다..^^

 

---

# 7-2. 3D 모션 활용하기

1. .notebook 클래스에 transform-style의 속성값을 preserve-3d로 지정하여 3D 표현이 가능하도록 한다.
2. 페이지가 시작될 때는 이미지가 보이지 않도록 opacity 속성값을 0으로 지정한다.
3. transform의 속성 중 matrix3d의 속성값을 다음과 같이 지정하여 노트북이 접힌 상태가 되도록 한다.
4. 모든 속성이 0.6s 동안 바뀌도록 transition의 속성값과 transition-delay의 속성값을 지정하여 속성 변화를 지연시킨다.
5. 노트북이 접힌 상태에서 도서 소개 페이지가 구성되면 노트북이 열려야 한다. 해당 메뉴를 클릭한 후 페이지 형태가 되면 <section id="menu2" class="content">태그에 .this 클래스가 추가된다. 선택자를 만들 때 .ntoebook으로 상속시켜 만들고 matrix3d와 opacity의 속성값을 지정한다.

.notebook{width:954px; height:650px; margin:100px auto 0 auto; background:url(../images/mackbook.png) no-repeat; background-size:954px; position:relative; transform-style:
preserve-3d; transform:matrix3d(1,0,0,0,0,0.1,0,0,0,0,1,0,0,0,0,1); transition:all ease-in-out 0.6s; transition-delay:.8s; opacity:0;}
#menu2.this .notebook{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity:1;}

노트북이 열린다

---

# 회고

 

Ajax를 위해 chrom의 속성도 바꿨는데 적용이 안된다....

카페에서 질문해가면서 겨우 해결했다.

원인 찾으면 따로 정리해야겠다.