ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [WebPage] 2. 실전 예제 - 개인용 포트폴리오 페이지 만들기 - 웹 페이지 제작 강좌
      Web/WebPage 2015. 6. 20. 15:39

      Intro.

       지금까지 CSS, Bootstrap을 알아보았습니다. 여태까지는 각각의 요소를 알아보는 시간이었다면, 이제는 직접 실습을 진행해보겠습니다. 지금부터는 개인을 위한 포트폴리오 페이지를 만들어 보도록 하겠습니다.



      1. 프로젝트 이해

       이 프로젝트는 간단한 개인용 포트폴리오 웹 페이지 입니다.



      2. 프로젝트 생성하기

       - File -> New -> Project -> Web Project를 선택하여, default Project를 선택합니다.

       - 프로젝트 명은 Mini-proj 으로 지정합니다.

       - 이전 챕터에서 다운받아논 bootstrap 파일들을 프로젝트에 Drag & Drop 해서 옮겨둡니다.









       - 다음 프로젝트 오른쪽 클릭하여 New from template -> HTML -> Blank File 선택한 뒤, mini-proj.html로 지정합니다.




       1) 기본 틀 잡기

        - 생성된 HTML 파일에 아래와 같은 틀을 잡기 위한 코드를 입력합니다.


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

       



        - 다음으로 이 문서에서 jQuery와 bootstrap을 사용할 수 있도록 링크를 추가하는 작업을 해야 합니다. 

        - <head> 태그 안에 link와 script를 통해 추가해주세요.




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

        






       2) 네비게이션 메뉴

        - 부트스트랩을 이용해서 상단의 메뉴 바를 설정해 보도록 하겠습니다. 

        - Body 태그안에 아래 코드를 추가합니다.



      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
              <div class="navbar navbar-fixed-top">
                  <div class="navbar-inner">
                      <div class="container">
                          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                          </button>
                          
                          <a class="brand" href="">My CV</a>
                          <div class="nav-collapse in collapse" style="height: 0px; ">
                              <ul class="nav">
                                  <li class=""><a href="#">Education</a></li>
                                  <li class=""><a href="#">Work Experience</a></li>
                                  <li class=""><a href="#">Interests</a></li>
                                  <li class=""><a href="#">Portfolios</a></li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
      		cs




       Line 4: data-toggle="collapse" 속성으로 화면이 작을 때는 메뉴를 자동으로 접도록 만듭니다. data-target 속성으로 어떤 메뉴를 자동으로 접을지 정하게 됩니다.

       Line 5~7: 접힌 상태에서 표시되는 메뉴 아이콘을 정의합니다.

       Line 10: a 태그의 brand 클래스로 메뉴 바의 타이틀을 정해줍니다.

       Line 11~18: 메뉴 바 안에 메뉴를 설정하는 부분입니다. <div> 태그에 nav-collapse 속성과 id를 지정해서 접히는 메뉴라고 지정한 뒤에 <ul> 태그 안에 <li> 태그 각각이 하나의 메뉴가 됩니다.









       3) 메인 페이지 시작 & 이름 및 추가도구

        - 컨텐츠가 들어갈 부분을 작성할 차례입니다. 

        - 상단에는 네비게이션 바를 작성했고, 하단을 통째로 감싸 줄 레이아웃을 만듭니다. 

        - 위에서 작성한 <div> 태그안에 작성합니다.




      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
       
              <div class="navbar navbar-fixed-top">
                  ...
                  <div class="container">
                      <div class="row">
                          <div class="span9 logo">
                              <h1><a href="#">2NE1</a></h1>
                          </div>
                          <div class="span3 pull-right">
                              <p>
                                  <a class="btn w101" href="#"><i class="icon-print"></i> Print</a>
                                  <a class="btn w101" href="#"><i class="icon-download-alt"></i> Download</a>
                              </p>
                          </div>
                      </div>
                  </div>
              </div>
      		cs
       




       Line 4: span을 나눌 컨테이너를 지정합니다. 영역은 9:3의 비율로 나누기 위해 아래 span9과 span3을 이용합니다.

       Line 7: Logo 문구를 만들기 위해 상위에서 logo 클래스를 적용하고 <h1> 태그를 적용했습니다.

       Line 9~14: span3 영역에 Print 와 Download가 가능하게 아이콘을 추가하였습니다.










       4) 주소, 스킬, 퀵 컨택트 폼


        - 포트폴리오의 메인을 다룰 차례입니다. 

        - 하단 레이아웃은 레이아웃 상에서 결국 하나의 'row'를 형성합니다. 따라서 하단을 통으로 커버할 'row' <div>를 작성합니다.

        - 그리고 4:8 비율을 유지하기 위해 'span4' 그리드를 그 안에 작성합니다.

        - 두 번째 컨테이너 다음 <hr/> 태그를 넣은 후 아래 코드를 작성하세요.



      1
      2
      3
      4
      5
      <div class="row">
          <div class="span4">
          ...
          </div>
      </div>
      		cs



        - 이 안에 프로파일 사진과 간단한 주소를 넣겠습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
                  <div class="row">
                      <div class="span4">
                          <div class="well sidebar-nav">
                              <a href="#" class="thumbnail"><img src="2ne1.jpg" alt=""/></a>
                              <hr>
                              <address>
                                  <i class="icon-home"></i> 희우정로1길 3
                                  <br/>
                                  <i class="icon-map-marker"></i> Mapo-gu Seoul
                                  <br/>
                                  <i class="icon-signal"></i> (02)1221-2321
                                  <br/>
                                  <i class="icon-envelope"></i> 2NE1@YG.com
       
                              </address>
                          </div>
                      </div>
                  </div>
      		cs













       - 다음으로 자신이 보유한 스킬을 리스트 형식으로 나타내고, 각각의 스킬 레벨을 프로그레스 바를 활용하여 나타내겠습니다.

       - 먼저, 스킬 항목의 타이틀을 'nav-list'를 이용해서 그려보겠습니다.

       - 'nav-list'는 <ul>태그에 클래스 명을 'nav nav-list'로 작성하여 사용합니다. (address 태그 끝나는 부분아래 작성합니다)




      1
      2
      3
      4
      5
      6
      7
                              </address>
                              <hr/>
                              <ul class="nav nav-list">
                                  <li class="active">
                                      <a href="javascipt:"><i class="icon-white icon-tag"></i> Skills</a>
                                  </li>
                              </ul>
      		cs





















       - 다음으로 보유한 스킬을 나타낼 차례입니다.

       - 보유한 스킬명은 라벨로 표시하고 보유한 스킬의 레벨은 프로그레스 바를 이용해서 나타낼 것 입니다.

       - 상위에 작성한 코드 밑에 작성합니다.



      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
                              </ul>
                              <br/>
                              <div class="row"> <!-- Skill Progress Web -->
                                  <div class="span1">
                                      <span class="label">Web </span>
                                  </div><!-- span1 -->
                                  <div class="progress">
                                      <div class="bar" style="width: 75%"></div>
                                  </div><!-- progress -->
                              </div> <!-- End of Web -->
                              <div class="row"> <!-- Skill Progress Java -->
                                  <div class="span1">
                                      <span class="label">Java </span>
                                  </div><!-- span1 -->
                                  <div class="progress">
                                      <div class="bar" style="width: 88%"></div>
                                  </div><!-- progress -->
                              </div> <!-- End of Java -->
                              <div class="row"> <!-- Skill Progress C/C++ -->
                                  <div class="span1">
                                      <span class="label">C/C++ </span>
                                  </div><!-- span1 -->
                                  <div class="progress">
                                      <div class="bar" style="width: 57%"></div>
                                  </div><!-- progress -->
                              </div> <!-- End of C/C++ -->
                              <div class="row"> <!-- Skill Progress Database -->
                                  <div class="span1">
                                      <span class="label">DB </span>
                                  </div><!-- span1 -->
                                  <div class="progress">
                                      <div class="bar" style="width: 82%"></div>
                                  </div><!-- progress -->
                              </div> <!-- End of DB -->
      		cs















       - 마지막으로 컨택트 폼을 작성하도록 하겠습니다. 



      1
      2
      3
      4
      5
      6
      7
      8
      </div> <!-- End of DB -->
       
      <hr/>
      <ul class="nav nav-list"><!-- Contact Form -->
      <li class="active">
          <a href="javascipt:"><i class="icon-white icon-envelope"></i> Quick Contact Form</a>
      </li>
      </ul> <!-- End of Contact -->
      		cs
















       - 기본 틀을 생성했으니, 내용 구성을 위해 코드를 작성합니다.




      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      <!-- End of DB -->
       
      <hr/>
      <ul class="nav nav-list">
          <!-- Contact Form -->
          <li class="active">
              <a href="javascipt:"><i class="icon-white icon-envelope"></i> Quick Contact Form</a>
          </li>
      </ul>
      <form class="contact">
          <br>
          <label><strong>Name: </strong></label>
          <input type="text" placeholder="Name..."/>
          <label><strong>Email: </strong></label>
          <input type="text" placeholder="Email..."/>
          <label><strong>Message: </strong></label>
          <textarea rows="3" placeholder="Input text..."></textarea>
      </form>
      <!-- End of Contact -->
      		cs















       - 마지막으로 컨택트 폼의 전송 버튼만 생성해 주시면 됩니다.




      1
      2
      3
      4
                              <br/>
                              <button class="btn">
                                  <i class="icon-envelope"></i> Submit
                              </button>
      		cs













       5) 메인 컨텐츠 & 테이블

        - 'span8' 그리드를 하나 추가합니다.(span4 그리드의 닫힘 태그 다음에 작성합니다)



      1
      2
      3
      4
                      </div> <!-- End of Span 4 -->
                      <div class="span8">
                          ...
                      </div>
      		cs




        - 그리드를 추가했으니, 컨텐츠를 넣을 차례입니다.

        - 먼저 추가할 카테고리는 'Education' 입니다. 

        - 위 코드의 span8 div 태그 안에 작성하세요.

       

       






        - 다음은 Work Experience 부분입니다.

        - <div class="span8"> 닫히는 부분 아래에 작성합니다.







        - 다음으로는 Interest 부분입니다.

        - span8 태그가 닫히는 부분에 작성합니다.




      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <div class="span8">
          <ul class="nav nav-list">
              <li id="Interests" class="active">
                  <a href="javascript:"><i class="icon-white icon-ok-sign"></i><strong> Interests</strong></a>
              </li>
          </ul>
          <br>
          <p>
              Pellentesque sollicitudin congue diam, et gravida leo posuere at. Nunc fermentum erat at diam convallis vel porttitor purus congue. Proin blandit, odio ac aliquet fermentum, lectus est dictum nisl, ac elementum dui ante et ipsum.
          </p>
          <br>
          <p>
              Pellentesque sollicitudin congue diam, et gravida leo posuere at. Nunc fermentum erat at diam convallis vel porttitor purus congue. Proin blandit, odio ac aliquet fermentum, lectus est dictum nisl, ac elementum dui ante et ipsum.
          </p>
          <br>
      </div><!-- end of span8 - 3 -->
      		cs









        - 메인 하단의 마지막 부분인 Portfolio 입니다.

        - 위 방식처럼 닫힌 태그 바로 아래 작성합니다.

        - 포트폴리오 이미지는 임시적으로 썸네일을 가져와서 적용시켰습니다.



      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <div class="span8">
          <ul class="nav nav-list">
              <li id="Portfolios" class="active">
                  <a href="javascript:"><i class="icon-white icon-file"></i><strong> Portfolios</strong></a>
              </li>
          </ul>
          <br>
          <div class="row-fluid">
              <div class="span3">
                  <a href="#" class="thumbnail"> <img src="http://placehold.it/160x120" alt=""> </a>
              </div>
              <div class="span3">
                  <a href="#" class="thumbnail"> <img src="http://placehold.it/160x120" alt=""> </a>
              </div>
              <div class="span3">
                  <a href="#" class="thumbnail"> <img src="http://placehold.it/160x120" alt=""> </a>
              </div>
              <div class="span3">
                  <a href="#" class="thumbnail"> <img src="http://placehold.it/160x120" alt=""> </a>
              </div>
          </div>
      </div><!-- end of span8 - 4 -->
      		cs













       6) footer 넣기

        - footer는 웹 페이지를 마무리 짓는 부분입니다. 

        - footer는 일반적으로 로고, 주소, 저작권 표시, 저작권자 등을 담고 있습니다.

        - body 태그가 끝나는 지점에 <footer> 태그를 추가합니다.


      1
      2
      3
      4
      5
      6
          </body>
          <footer>
              <p>
                  Copyright C 2015
              </p>
          </footer>
      		cs




       7) 네비게이션 이동 연결하기

        - 지금 상태로는 상단의 네비게이션이 동작하지 않습니다.

        - 'href' 프로퍼티를 이용하여 네비게이션 메뉴와 페이지 내 카테고리와 연결시키겠습니다.

        - 각각의 카테고리에 id 프로퍼티를 지정한 적이 있습니다.
        - 상단 바 네비게이션을 아래와 같이 수정하여 각 카테고리로 이동하는 코드로 수정하겠습니다.




      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <div class="nav-collapse in collapse" style="height: 0px; ">
          <ul class="nav">
              <li class="">
                  <a href="#Education">Education</a>
              </li>
              <li class="">
                  <a href="#WorkExperience">Work Experience</a>
              </li>
              <li class="">
                  <a href="#Interests">Interests</a>
              </li>
              <li class="">
                  <a href="#Portfolios">Portfolios</a>
              </li>
          </ul>
      </div>
      		cs

       





       자 이렇게 해서 개인용 포트폴리오 제작 프로젝트가 완성이 되었습니다.









       


       






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


      저작자표시

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

      [WebPage] 3-3. 장고 프로젝트 시작 - 웹 페이지 제작 강좌  (0) 2015.06.26
      [WebPage] 3-3. 서버개발을 빠르게, 웹 프레임워크 Django  (0) 2015.06.26
      [WebPage] 3. 서버 프로그래밍을 위한 Python과 Django - 웹 페이지 제작 강좌  (0) 2015.06.21
      [WebPage] 2-3. Bootstrap, 쉽고 빠른 웹 프레임워크 - 웹 페이지 제작 강좌  (0) 2015.06.20
      [WebPage] 2-3. Bootstrap, 쉽고 빠른 웹 프레임워크 - 웹 페이지 제작 강좌  (0) 2015.06.17
      [WebPage] 2. CSS 요소(Elements) - 웹 페이지 제작 강좌  (0) 2015.06.17

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바