css 재설정을 통해 브라우저별 CSS 제거

8778 단어 CSStech

CSS 재설정


기본적으로 각 브라우저는 별도의 설정이 없는 경우에도 스타일시트를 정의합니다.
스타일시트를 취소하는 데 사용되는 스타일시트를 CSS 재설정이라고 합니다.
읽기 재설정 CSS는 각 브라우저의 차이를 제거합니다.
cf. 유사한 개념normalize.css라는 것도 있어요.이 점은 공통적으로 모든 브라우저의 차이를 없애지만 다른 점은 브라우저 특유의 CSS를 없애지 못했다는 것이다.

사용법


CSS 재설정을 정의한 후 일반 CSS를 정의합니다.낡은 것도 있으니 주의해야 한다.
나중에 CSS 재설정이 정의되면 재설정된 CSS가 덮어씁니다.
복사할 때는 허가증에 주의해야 한다.
<head>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
</head>

예제


스스로 CSS 재설정을 정의할 수 있지만 이미 정의된 CSS가 있으므로 쉽게 읽을 수 있습니다coliss나는 복사하고 붙이는 것이 가장 쉽다고 생각한다.

CSS 재설정 사용


우리는 각각 구글 크롬과 Firefox를 이용해 CSS 리셋 앱 전후를 비교했다.
간격을 보기 쉽게 배경만 변경합니다.

적용 전


  • chrome
    リセットCSS適用前(chrome)

  • firefox
    リセットCSS適用前(firefox)
  • 예가 좋지 않은지 크롬과 Firefox의 차이 자체가 명확하지 않고 각각 h1과 h2 사이에 공간이 있는 등 브라우저 특유의 CSS가 적용된다.

    응용 후


  • chrome
    リセットCSS適用後(chrome)

  • firefox
    リセットCSS適用後(firefox)
  • 재설정하면 표시 간격을 줄일 수 있습니다.
    cf. 소스 코드
    
    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="reset.css" />
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <h1>h1</h1>
        <h2>h2</h2>
        <input type="text" />
        <div>div</div>
      </body>
    </html>
    
    

    참고 자료


    소스 코드
    CSS 재설정

    좋은 웹페이지 즐겨찾기