psd로 만들어진 mock 웹페이지를 html 웹페이지로 바꾸기.

1. psd파일을 그래픽 요소를 구분하는 guide를 만든다.
2. 웹페이지의 배경으로 사용할 파일의 텍스쳐를 크롭한다.
   Save for web & Devices 로 저장. png24로 저장. 투명지원
3. 배경 타일 파일을 body-bg.jpg로 지정하고 body 태그의 스타일 쉬트를 수정한다.
    body {
        background: url(images/body-bg.png) top left repeat;
    }
4. top logo 붙이기.
   page-wrap 사이즈가 로고의 센터를 잡아줌. 가장 넓은 이미지의 길이를 page-wrap width로 수정한다.
   #page-wrap {
       width: 654px;
       margin: 0 auto;
   }
   <div id="page-wrap">
       <img src="image/header.jpg" alt="">
       <ul id="nav"> ...
   </div

5. Navigation
   출처: http://goo.gl/8AUu3

   포토샵:navigation mouse roll over 그래픽 요소 만들기. 기존의 bottom 부분 레이어
   복사해서 버튼 바탕을 흰색으로 만든다.
   navagation 그래픽 요소 자르기. 포토샵에 'Slices From Guide' 라는 가이드 기준으로
   자르는게 있네. (취소할려면 Clear Slices라는 명령이 있다.)
   버튼의 기본상태, 롤오버상태 등 3가지 그래픽 요소를 하나의 파일로 조장하고
   스프라이트 처럼 쓰는 방법이 있다. 
   ul#nav {
       
       }
       ul#nav li {
           display: inline;
       }
       ul#nav li a {
           display: block;
           height: 62px;    
           text-indent: -9999px;
           float: left;
       }
       ul#nav li.articles a {       
           width: 200px; ; 그림 크기
           background: url(images/nav-articles.jpg) bottom center no-repeat
       }
       ul#nav li.downloads a {       
           width: 287px; ; 그림 크기
           background: url(images/nav-downloads.jpg) bottom center no-repeat
       }
       ul#nav li.videos a {       
           width: 167px; ; 그림 크기
           background: url(images/nav-videos.jpg) bottom bottom center no-repeat
       }
       ul#nav li a:hover {
           background-position: center center
       }

6. 아티클 BOX 넣기.
     #page-wrap의 배경으로 추가
     background: url(images/content-bg.jpg) repeat-y;

     BOX에 글을 추가하여 글자 넘어가는지 확인

     #page-wrap에 #main-content div 요소 넣고, padding:30px 추가.


7. 아티클 box의 아랫부분 추가. #footer

    출처 http://goo.gl/XQuvRh

     # footer {
         min-height: 149px; 푸터 이미지에서 가져옴
         background: url(images/footer-bg.jpg) no-repeat;
     }

8. 아티클 title 추가
     <div id="main-content">
        <div id="article-area">
             <h1> Hello Title </h1>
             <p class=metadata>by Donghee Park, 2015년 1월 13일 - <a href="#">7
     Comments</a><p>
             <p>
              Fox jump ....
            </p>
        </div>
     </div>

9. 아티클 오른쪽에 sidebar 광고 추가
     포토샵 Trim 옵션에 색깔로 자르는 옵션이 있네. 왼쪽 흰색을 기준으로 자르기.  흰 바탕이 알아서 잘리네.

10. 타이틀 타이포 그라피 적용. 
     기존의 웹사이트 보고, 참고해서 타이포 그래피 결정.  포토샵에서 스포이드로 글자 색깔 찍어서 찾음
      h1 {
          font-family: Georgia, serif;
          font-size: 2.4em;
          font-weight: normal;
          color: #a4828a;
      }

11. metadata 타이포와 배경 적용.  p는 p로 모아서 쓰네. (태그 중심으로 내용을 모은다.
     p.metadata {
      background: #fff9a7; padding:3테;
     }

12. 아티클의 오른쪽 사이드봐 Coloum추가.  Coloum width 알기위해서 맥의 스크린샷 도구로 크기를 재네
      #page-wrap {
      }
          #article-area {
           width: 425px;
           float: left:
          }
          #sidebar {
           width: 92px;
           float: right:
          }

      이렇게만 하면 밖에 칼럼을 담지 않고, 박스가 줄어들어 버린다. 이문제를
      해결하기 위해서는 clear:both; 가 필요.
      그래서 page-wrap의 마지막 div 요소로 <div class='clear'></div> .clear {clear:both;> 를 넣는다. 
      
13. 웹사이트 그래픽 로고 대신 h1으로 웹사이트 이름 넣고, h1#logo로 그래픽 로고를 덥는 방법. 
       h1#logo {
           width: 654px;
           height: 112px;
           background: url(images/header.jpg) no-repeat center center;
           text-indent: -9999px;
       }

14. 포토샵으로 웹페이지 막업 만들기.


참고:

  - CSS Tricks #12 http://css-tricks.com/video-screencasts/12-converting-a-photoshop-mockup-part-two-episode-one/
  - https://www.psd2html.com/order-now.html 1페이지 당 149 달러.


질문

  - display: inline, inline-block, block의 차이. (div을 나란히 한줄에 배치할려고
   한다. 이때 각각 div은 어떤 속성을 가지고 있어야 하나?)
  - clear: both;의 의미?
 -