0. CSS reset하기.
- 자신이 주로 사용하는 CSS 기본 스타일을 넣어주자.
- .clelarfix:after {content: ''; display: block; clear: both;} ← float으로 인한 에러 수정
- img {vertical-align: top; 또는 상황에 따라 display: block;}
- 공통(general)되는 부분을 먼저 파악.
ㄴTypograph: h1, h2 ,h3, h4, p 등... (폰트: color, font-family, font-size, line-height)
ㄴLayout: width
ㄴMenu
ㄴHeader
ㄴMain Content
ㄴFooter
1. padding / border을 사용할때 디자인의 정확한 너비/높이 값을 파악.
padding과 border는 컨텐츠의 너비/높이 값에 영향을 준다
2. 폰트
- 자간(letter-spacing): 1000 = 1em / 100 = 0.1em
- 행간(line-height): ((행간 – 폰트사이즈) / 2)
** 포토샵은 위쪽 기준 / ** css는 가운데 기준 (vertical-align)
- 굵기(font-weight): normal / bold
** 부모요소 보다 더 굴게 하려면 bolder / 더 가늘게는 lighter
** 100 ~ 900 에서 100 ~ 500은 normal / 600 ~ 900은 bold
귀하는 복제를 금지하는 사이트에서 콘텐츠를 복사해 사용하려고 하고 있습니다. 이 콘텐츠를 블로그나 웹사이트 또는 인쇄물의 콘텐츠로 사용하면 저작권 문제로 처벌 받을 수 있습니다. : https://martian36.com/858
Copyright © 베누시안
3. 텍스트 박스를 만들때 너비는 padding으로, 높이는 line-height를 사용해야 한다.
또한 반드시 border값을 염두해 두고 디자인에 맞게 코딩해야 한다.
4. 포토샵에서 텍스트 레이어의 너비를 확인할때
텍스트 레이어를 crtrl + 클릭 → 창(window) → 정보(info)에서 확인. [주의] 너비 값 그대로 사용하면 안된다. 짤릴 수 있다.
5. line-height가 적용된 컨텐츠를 기준으로 디자인 시 주의!!
텍스트와 컨텐츠들과의 거리를 잴때 텍스트의 line-height를 염두하자.
6. content의 layout은 padding을 이용한다. (margin x)
7. 색상은 eye drop툴을 사용하지 말자!! 레이어를 클릭하여 정확한 값을 사용하자.
[주의] 색상에 투명도가 들어가 있을 수도 있는 점을 참고하자.
8. 하나 이상의 글꼴 사용 시 쉼표사용. 이름에 공란이 있을 시 인용부포("", '') 사용
ex) font-family: arial, 바탕체, "Times New Roman", serif;
댓글