본격적인 작업 전에, 작업을 수월하게 할 수 있도록 Setting / 생산성을 높이는 작업
・ 디자인 시안을 보고 사용해야 하는 폰트의 종류와 개수를 파악해서 link:css
・ Bootstrap이 제공하는 Grid System link (한 번도 안 써본 사람은 있어도, 한 번 쓰고 안 쓰는 사람이 없다고 언급)
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: "DM Sans", sans-serif;
}
/* Reset CSS */
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea {
font-family: "DM Sans", sans-serif;
font-size: 16px;
}
button:focus,
button:active,
input:focus,
input:active,
textarea:focus,
textarea:active {
outline: none;
box-shadow: none;
}
ul,
ol,
li {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
p {
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.05em;
color: #2B292D;
}
/* min-width: 768px */
@media screen and (min-width: 768px){
p {
font-size: 22px;
line-height: 1.4545454545;
}
}
깨끗한 도화지를 만드는 것처럼 이 정도의 기본적인 작업을 해주고
더 필요한 게 있으면 순간 순간마다 더 적어준다.
'Front End > HTML & CSS' 카테고리의 다른 글
[HTML/CSS] CSS Architecture (0) | 2021.07.09 |
---|---|
[HTML] 김버그의 HTML&CSS는 재밌다 | Bootstrap Grid system (0) | 2021.05.01 |
[CSS] 김버그의 HTML&CSS는 재밌다 | Screen Only (0) | 2021.04.29 |
[CSS] 김버그의 HTML&CSS는 재밌다 | Background (0) | 2021.04.29 |
[CSS] 김버그의 HTML&CSS는 재밌다 | Typography (0) | 2021.04.28 |
댓글