ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [WebPage] 실전 웹 프로젝트 구축 !!(실전 예제) - 웹 페이지 제작 강좌
      Web/WebPage 2015. 7. 7. 14:32

      마지막 장으로 지금까지 배워온 기술들을 토대로 실전 프로젝트를 진행해보도록 하겠습니다.


      먼저 실전 예제를 통해 몸을 풀어봅시다.



      클라이언트 페이지를 생성할 것입니다.



      1. 먼저 Aptana Studio에서 프로젝트를 생성합니다. 프로젝트 명은 ClientExample 로 지정합니다.











      2. BootStrap 모듈을 프로젝트에 끌어다 놓습니다.








      3. 프로젝트 오른쪽 클릭하여 html 파일을 생성합니다. (example.html)



      4. 생성된 html 파일에 아래와 같이 기본 틀 코드를 입력합니다.



      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <!DOCTYPE html>
      <html lang="ko">
          <head>
              <meta charset="utf-8"/>
              <title>Client Example</title>
          </head>
          <body>
              
          </body>
      </html>
       
      		cs





      5. 다음으로 bootstrap과 jquery를 추가해줘야 합니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
       
      <!DOCTYPE html>
      <html lang="ko">
          <head>
              <meta charset="utf-8"/>
              <title>Client Example</title>
              
              <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
              <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/>
          </head>
          <body>
              <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
              <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
              <script src="bootstrap/js/bootstrap.js"></script>
          </body>
      </html>
       
      		cs



       head 태그에 bootstrap css와 body 태그에 jquery js 및 bootstrap js를 추가해줬습니다.





      6. 배경을 간단히 작성하겠습니다. Head 태그안에 작성하세요.




      1
      2
      3
      4
      5
      6
      7
       
              
              <style type="text/css">
                  body {
                      background-color: #C0DEED;
                  }
             </style>
      		cs






      7. 네비게이션 메뉴를 추가 구성하겠습니다. Body 태그안에 작성하세요.




      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
              <!-- Start of NavBar -->
              <div class="navbar navbar-inverse navbar-fixed-top">
                  <div class="navbar-inner">
                      <div class="container">
                          <a class="brand" href="#">EXAMPLE</a>
                          <a class="btn btn-navbar" data-toggle="collapse" data-target="#navMenu">
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                          </a>
                          <div class="nav-collapse" id="navMenu">
                              <ul class="nav">
                                  <li class="active">
                                      <a href="#">Home</a>
                                  </li>
                                  <li>
                                      <a href="#">Menu2</a>
                                  </li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
              <!-- End of NavBar -->
      		cs





       현재까지 작성된 페이지 입니다.








       data-toggle="collapse" 속성은 화면이 작아지는 경우 자동으로 메뉴를 접도록 해줍니다. 위 화면의 경우 화면이 작아져서 메뉴를 사용자가 펼친 경우입니다. 





      8. 페이지의 메인은 부트스트랩의 hero-unit을 통해 구현하겠습니다.



      1
      2
      3
      4
      5
      6
      7
      8
      9
              <!-- End of NavBar -->
              <div class="container">
                  <div class="hero-unit">
                      <h1>BlueBlackBerry</h1>
                      <br>
                      <h3>Stay Hungry, Stay Foolish...</h3>
                  </div>
              </div>
              <!-- End of container -->
      		cs



       body 의 스타일을 추가합니다.



      1
      2
      3
      4
      5
      6
      7
              <style type="text/css">
                  body {
                      background-color: #C0DEED;
                      padding-top: 60px;
                      padding-bottom: 40px;
                  }
             </style>
      		cs








      9. 이제 다음 라인으로 span4 속성을 이용한 3열 레이아웃을 만들어 보겠습니다.

       

      코드 작성은 클래스 container 안에 hero-unit div가 끝나는 지점에 입력하겠습니다.



      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
                  </div><!-- End of hero-unit -->
                  <div class="row-fluid">
                      <div class="span4">
                          <h2>Span 4</h2>
                          <input id="first" class="btn btn-danger" type="button" value="Section 2"/>
                      </div>
                      <div class="span4">
                          <h2>Span 4</h2>
                          <input id="second" class="btn btn-info" type="button" value="Alert Color"/>
                      </div>
                      <div class="span4">
                          <h2>Span 4</h2>
                          <input id="third" class="btn btn-primary" type="button" value="Progress"/>
                      </div>
                  </div>
      		cs




       span을 위한 style을 추가하겠습니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
              <style type="text/css">
                  body {
                      background-color: #C0DEED;
                      padding-top: 60px;
                      padding-bottom: 40px;
                  }
                  
                  .row-fluid div[class*="span"] {
                      background-color: white;
                      -webkit-border-radius: 6px;
                      -moz-border-radius: 6px;
                      border-radius: 6px;
                      margin-bottom: 10px !important;
                      text-align: center;
                  }
             </style>
      		cs











      10. 다음 줄은 2열 컴포넌트 입니다. SPAN6을 사용해서 만들게 됩니다. row-fluid가 끝나는 부분에 작성하세요.



      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
                  <div class="row-fluid">
                      <div class="span6">
                          <h2>SPAN 6</h2>
                          <div class="tabbable">
                              <!-- Only required for left/right tabs -->
                              <ul class="nav nav-tabs">
                                  <li class="active">
                                      <a href="#tab1" data-toggle="tab">Section 1</a>
                                  </li>
                                  <li>
                                      <a href="#tab2" data-toggle="tab" id="section2">Section 2</a>
                                  </li>
                              </ul>
                              <div class="tab-content">
                                  <div class="tab-pane active" id="tab1">
                                      Section 1.
                                  </div>
                                  <div class="tab-pane" id="tab2">
                                      Section 2.
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="span6">
                          <h2>SPAN 6</h2>
                          <div class="progress">
                              <div id="bar" class="bar" style="width: 50px;"></div>
                          </div>
                          <div class="progress progress-danger progress-striped active">
                              <div id="bar" class="bar" style="width: 50px;"></div>
                          </div>
                      </div>
                  </div><!-- End of span6 row-->
              </div>
              <!-- End of container -->
      		cs












      11. 마지막 1열 레이아웃 SPAN 12 부분입니다. span 6이 끝나는 부분에 작성하세요.



      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
                  </div><!-- End of span6 row-->
                  <div class="row-fluid">
                      <div class="span12">
                          <br>
                          <div class="alert alert-error fade in" id="alert">
                              <a class="close" data-dismiss="alert" href="#">x</a>
                              <strong>SPAN 12</strong>
                          </div>
                      </div>
                  </div><!-- ENd of span12 row -->
      		cs










      12. 이제 스크립트 부분입니다. </body> 태그 바로 위에 작성하세요.




      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
              <script src="bootstrap/js/bootstrap.js"></script>
              <script>
                  $(document).ready(function() {
                      
                      $("#first").click(function() {
                          $("#section2").trigger("click");
                      });
                      
                      $("#second").toggle(function() {
                          $("#alert").removeClass("alert-error");
                          $("#alert").addClass("alert-info");
                      }, function() {
                          $("#alert").removeClass("alert-info");
                          $("#alert").addClass("alert_error");
                      });
                      
                      $("#third").click(function() {
                          var width = $("#bar").width();
                          $(".bar").width(width + 50);
                      });
                  });
             </script>
      		cs









      Span 4를 클릭하여 반응을 살펴봅니다.






       * 본 포스팅은 이재근 등 4명 저 "Fast Web Service Build up: 웹 서비스를 쉽고 빠르게 구축하는 기술" 저서를 참고하여 작성하였습니다

      저작자표시

      'Web > WebPage' 카테고리의 다른 글

      [WebPage] 실전 웹 프로젝트 구축 !!(Client Part 1) - 웹 페이지 제작 강좌  (0) 2015.07.09
      [WebPage] 실전 웹 프로젝트 구축 !!(Server Part 2) - 웹 페이지 제작 강좌  (0) 2015.07.09
      [WebPage] 실전 웹 프로젝트 구축 !!(Server Part 1) - 웹 페이지 제작 강좌  (0) 2015.07.08
      [WebPage] 4. 웹 프로그래밍의 필수요소, JavaScript와 jQuery - 웹 페이지 제작 강좌  (1) 2015.07.07
      [WebPage] 3-3. 장고 프로젝트 시작 - 웹 페이지 제작 강좌  (0) 2015.06.26
      [WebPage] 3-3. 서버개발을 빠르게, 웹 프레임워크 Django  (0) 2015.06.26

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바