SPACE RUMI

Hi, I am rumi. Let's Splattack!

[IT] 프로덕트 개발/DOM, HTML, CSS - 퍼블리싱

reset css / CSS 초기화하기

백루미 2022. 9. 1. 19:37
반응형

css를 초기화 해주자. 초기화 코드는 정답이 없고, 가장 많이쓰고 유명한 에릭마이어의 reset code를 사용해도 된다. 
https://meyerweb.com/eric/tools/css/reset/

 

CSS Tools: Reset CSS

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

meyerweb.com

 

하지만 나는 최소한의 리셋코드만 사용하기위해 항상 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;}


더 필요한게 있으면 추가하는걸로..
초기화 작업에 이어 사전에 만들어두면 좋은 기본 클래시스들을 정리해보자.

반응형