반응형
css를 초기화 해주자. 초기화 코드는 정답이 없고, 가장 많이쓰고 유명한 에릭마이어의 reset code를 사용해도 된다.
https://meyerweb.com/eric/tools/css/reset/
하지만 나는 최소한의 리셋코드만 사용하기위해 항상 padding margin box-sizing 와일드카드(*)문법으로 선언하곤 했었는데.. 인앱 브라우저에서 안보이는(?) 현상이 발생해버려서, 리셋코드와 기본값을 적어주는 초기작업의 필요성을 매우 간절하게 느꼈다. 어떤 페이지에서 내가 누락시키는 기본값들이 있을지 모르니말이다. 매번 이미지에 블록속성 넣는것도 까먹고 해서 이참에 정리해볼까 한다.
reset css
html, body {height:100%; padding:0; margin:0;}
body {-webkit-font-smoothing:antialiased;line-height:1.5; overflow-wrap:break-word; color:#121212};
html, body, input, select, textarea {font-family:'Apple SD Gothic Neo', arial, sans-serif}
h1, h2, h3, h4, h5, h5, p {
margin:0;
padding:0;
}
::after, ::before {box-sizing:border-box;flex-shrink:0;}
canvas, img, video {display:block; max-width:100%}
ol li {list-style:none}
ol, ul, li {margin:0;padding:0}
a{-webkit-tap-highlight-color: transparent;}
a, a:active, a:hover {color:inherit; text-decoration:none}
button {color:inherit; background:transparent; border:0; cursor:pointer; -webkit-tap-highlight-color: transparent;}
더 필요한게 있으면 추가하는걸로..
초기화 작업에 이어 사전에 만들어두면 좋은 기본 클래시스들을 정리해보자.
반응형
'[IT] 프로덕트 개발 > DOM, HTML, CSS - 퍼블리싱' 카테고리의 다른 글
Color 변수화하기 / css color 사전 정의하기 (1) | 2022.09.06 |
---|---|
자주 사용하는 인라인 클래스, base class 만들기 (1) | 2022.09.02 |
[SCSS] ... 처리하기 css 말줄임 ellipsis mixin (1) | 2022.08.31 |
[SCSS] 스크롤 믹스인 만들기 (0) | 2022.08.30 |
[SCSS] font size mixin class 믹스인으로 폰트 사이즈, 커스텀폰트 클래시스 만들기 (0) | 2022.08.29 |