CSS 작업을 하기 전 환경 세팅은 생산성에 큰 영향을 줍니다.
환경 세팅 작업 중 하나인 Reset CSS는 브라우저에서 제공하는 못생긴 요소들을 reset 시켜 주는 작업입니다.
a, button, input, textarea, list 와 같이 기본적으로 스타일이 좀 붙어있는 것들을 주로 손보게 됩니다.
https://meyerweb.com/eric/tools/css/reset/
위 사이트의 reset을 그대로 가져다 써도 무방하지만
본인 프로젝트에 맞는 최적의 reset을 해주는 것이 더 도움이 됩니다.
/* Reset CSS */
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea {
font-family: '_-_-_-_', 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;
color: #2b292d;
letter-spacing: -0.01em;
}
/* >= 768px (Desktop)*/
@media screen and (min-width:768px) {
/* Reset CSS*/
p {
font-size: 22px;
line-height: 1.3636363636;
}
}
'CSS' 카테고리의 다른 글
[CSS] 기타 분류 (0) | 2023.07.31 |
---|---|
[CSS] Page Layout (0) | 2023.07.31 |
[CSS] Transition & Animation (0) | 2023.07.28 |
[CSS] Background (0) | 2023.07.28 |
[CSS] Typography (0) | 2023.07.28 |