User Tools

Site Tools


psd2css

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
psd2css [2015/01/22 16:09] – created dongheepsd2css [2018/07/18 14:10] (current) – external edit 127.0.0.1
Line 56: Line 56:
        }        }
  
-  6. 아티클 BOX 넣기.+6. 아티클 BOX 넣기.
      #page-wrap의 배경으로 추가      #page-wrap의 배경으로 추가
      background: url(images/content-bg.jpg) repeat-y;      background: url(images/content-bg.jpg) repeat-y;
Line 64: Line 64:
      #page-wrap에 #main-content div 요소 넣고, padding:30px 추가.      #page-wrap에 #main-content div 요소 넣고, padding:30px 추가.
  
-  7. 아티클 box의 아랫부분 추가. #footer+ 
 +7. 아티클 box의 아랫부분 추가. #footer 
     출처 http://goo.gl/XQuvRh     출처 http://goo.gl/XQuvRh
  
Line 72: Line 74:
      }      }
  
-  8. 아티클 title 추가+8. 아티클 title 추가
      <div id="main-content">      <div id="main-content">
         <div id="article-area">         <div id="article-area">
Line 83: Line 85:
         </div>         </div>
      </div>      </div>
-  9. 아티클 오른쪽에 sidebar 광고 추가 
-     포토샵 Trim 옵션에 색깔로 자르는 옵션이 있네. 왼쪽 흰색을 기준으로 자르기. 
-     흰 바탕이 알아서 잘리네. 
  
-  10. 타이틀 타이포 그라피 적용.  +9. 아티클 오른쪽에 sidebar 광고 추가 
-     기존의 웹사이트 보고, 참고해서 타이포 그래피 결정. +     포토샵 Trim 옵션에 색깔로 자르는 옵션이 있네. 왼쪽 흰색을 기준으로 자르기.  흰 바탕이 알아서 잘리네. 
-      포토샵에서 스포이드로 글자 색깔 찍어서 찾음+ 
 +10. 타이틀 타이포 그라피 적용.  
 +     기존의 웹사이트 보고, 참고해서 타이포 그래피 결정.  포토샵에서 스포이드로 글자 색깔 찍어서 찾음
       h1 {       h1 {
           font-family: Georgia, serif;           font-family: Georgia, serif;
Line 96: Line 97:
           color: #a4828a;           color: #a4828a;
       }       }
-  11. metadata 타이포와 배경 적용. + 
-     p는 p로 모아서 쓰네. (태그 중심으로 내용을 모은다.+11. metadata 타이포와 배경 적용.  p는 p로 모아서 쓰네. (태그 중심으로 내용을 모은다.
      p.metadata {      p.metadata {
       background: #fff9a7; padding:3테;       background: #fff9a7; padding:3테;
      }      }
  
-  12. 아티클의 오른쪽 사이드봐 Coloum추가. +12. 아티클의 오른쪽 사이드봐 Coloum추가.  Coloum width 알기위해서 맥의 스크린샷 도구로 크기를 재네
-      Coloum width 알기위해서 맥의 스크린샷 도구로 크기를 재네+
       #page-wrap {       #page-wrap {
       }       }
Line 119: Line 119:
       그래서 page-wrap의 마지막 div 요소로 <div class='clear'></div> .clear {clear:both;> 를 넣는다.        그래서 page-wrap의 마지막 div 요소로 <div class='clear'></div> .clear {clear:both;> 를 넣는다. 
              
-   13. 웹사이트 그래픽 로고 대신 h1으로 웹사이트 이름 넣고, h1#logo로 그래픽 +13. 웹사이트 그래픽 로고 대신 h1으로 웹사이트 이름 넣고, h1#logo로 그래픽 로고를 덥는 방법. 
-       로고를 덥는 방법. +
        h1#logo {        h1#logo {
            width: 654px;            width: 654px;
Line 128: Line 127:
        }        }
  
-   14. 포토샵으로 웹페이지 막업 만들기.+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 달러.+  - 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을 나란히 한줄에 배치할려고+ 
 +  - display: inline, inline-block, block의 차이. (div을 나란히 한줄에 배치할려고
    한다. 이때 각각 div은 어떤 속성을 가지고 있어야 하나?)    한다. 이때 각각 div은 어떤 속성을 가지고 있어야 하나?)
- - clear: both;의 의미?+  - clear: both;의 의미?
    
psd2css.1421942969.txt.gz · Last modified: 2018/07/18 14:09 (external edit)