psd2css
Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
psd2css [2015/01/22 16:09] – created donghee | psd2css [2018/07/18 14:10] (current) – external edit 127.0.0.1 | ||
---|---|---|---|
Line 56: | Line 56: | ||
} | } | ||
- | | + | 6. 아티클 BOX 넣기. |
# | # | ||
| | ||
Line 64: | Line 64: | ||
# | # | ||
- | | + | |
+ | 7. 아티클 box의 아랫부분 추가. #footer | ||
출처 http:// | 출처 http:// | ||
Line 72: | Line 74: | ||
} | } | ||
- | | + | 8. 아티클 title 추가 |
< | < | ||
<div id=" | <div id=" | ||
Line 83: | Line 85: | ||
</ | </ | ||
</ | </ | ||
- | 9. 아티클 오른쪽에 sidebar 광고 추가 | ||
- | | ||
- | 흰 바탕이 알아서 잘리네. | ||
- | | + | 9. 아티클 오른쪽에 sidebar 광고 추가 |
- | | + | |
- | | + | |
+ | 10. 타이틀 타이포 그라피 적용. | ||
+ | | ||
h1 { | h1 { | ||
font-family: | font-family: | ||
Line 96: | Line 97: | ||
color: #a4828a; | color: #a4828a; | ||
} | } | ||
- | | + | |
- | p는 p로 모아서 쓰네. (태그 중심으로 내용을 모은다. | + | 11. metadata 타이포와 배경 적용. |
| | ||
background: #fff9a7; padding: | background: #fff9a7; padding: | ||
} | } | ||
- | | + | 12. 아티클의 오른쪽 사이드봐 Coloum추가. |
- | | + | |
#page-wrap { | #page-wrap { | ||
} | } | ||
Line 119: | Line 119: | ||
그래서 page-wrap의 마지막 div 요소로 <div class=' | 그래서 page-wrap의 마지막 div 요소로 <div class=' | ||
| | ||
- | 13. 웹사이트 그래픽 로고 대신 h1으로 웹사이트 이름 넣고, h1#logo로 그래픽 | + | 13. 웹사이트 그래픽 로고 대신 h1으로 웹사이트 이름 넣고, h1#logo로 그래픽 로고를 덥는 방법. |
- | 로고를 덥는 방법. | + | |
| | ||
| | ||
Line 128: | Line 127: | ||
} | } | ||
- | 14. 포토샵으로 웹페이지 막업 만들기. | + | 14. 포토샵으로 웹페이지 막업 만들기. |
참고: | 참고: | ||
- | - CSS Tricks #12 http:// | + | |
- | - https:// | + | - CSS Tricks #12 http:// |
+ | - https:// | ||
질문 | 질문 | ||
- | - display: inline, inline-block, | + | |
+ | - display: inline, inline-block, | ||
| | ||
- | - clear: both;의 의미? | + | |
| |
psd2css.1421942969.txt.gz · Last modified: 2018/07/18 14:09 (external edit)