11장: 브라우저 호환성

웹 페이지가 다양한 브라우저와 디바이스에서 일관되게 표시되도록 하기 위해서는 브라우저 호환성을 고려해야 합니다. 이 장에서는 브라우저 호환성 문제를 해결하는 방법과 도구를 소개합니다.

### 11.1 브라우저 호환성 문제

브라우저 호환성 문제는 웹 페이지가 다양한 브라우저와 디바이스에서 다르게 표시될 때 발생합니다. 이러한 문제를 해결하기 위해서는 각 브라우저의 특성과 지원하는 CSS 속성을 이해해야 합니다.

### 11.2 벤더 프리픽스 (Vendor Prefix)

벤더 프리픽스는 브라우저 벤더가 CSS 속성을 실험적으로 구현할 때 사용하는 접두사입니다. 벤더 프리픽스를 사용하여 새로운 CSS 기능을 지원하는 브라우저에서 사용할 수 있습니다.

#### 주요 벤더 프리픽스:
- `-webkit-`: Google Chrome, Safari, iOS
- `-moz-`: Mozilla Firefox
- `-ms-`: Internet Explorer, Edge
- `-o-`: Opera

예제:
.box {
    -webkit-border-radius: 10px; /* Chrome, Safari */
    -moz-border-radius: 10px; /* Firefox */
    border-radius: 10px; /* 표준 */
}

### 11.3 CSS 리셋과 노멀라이즈

CSS 리셋과 노멀라이즈는 브라우저 기본 스타일을 제거하거나 일관되게 만들어 브라우저 호환성을 높이는 도구입니다.

#### 11.3.1 CSS 리셋

CSS 리셋은 모든 브라우저에서 기본 스타일을 제거하여 스타일링을 위한 일관된 출발점을 제공합니다.

예제 (Eric Meyer’s CSS Reset):
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

#### 11.3.2 노멀라이즈 (Normalize.css)

노멀라이즈는 브라우저 간 일관성을 유지하면서 기본 스타일을 유지하여 보다 자연스럽고 일관된 스타일링을 제공합니다.

예제:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

### 11.4 호환성 테스트 도구

호환성 테스트 도구를 사용하면 웹 페이지가 다양한 브라우저와 디바이스에서 제대로 작동하는지 확인할 수 있습니다. 다음은 몇 가지 유용한 도구입니다.

#### 11.4.1 BrowserStack

BrowserStack은 다양한 브라우저와 디바이스에서 웹 페이지를 테스트할 수 있는 클라우드 기반 도구입니다.

#### 11.4.2 CrossBrowserTesting

CrossBrowserTesting은 실제 브라우저와 디바이스에서 웹 페이지를 테스트하고 스크린샷을 비교할 수 있는 도구입니다.

#### 11.4.3 Can I Use

Can I Use는 특정 CSS 속성이나 HTML 요소의 브라우저 지원 여부를 확인할 수 있는 웹 사이트입니다.

#### 11.4.4 Polyfill

Polyfill은 최신 웹 표준 기능을 지원하지 않는 브라우저에서 해당 기능을 사용할 수 있도록 하는 자바스크립트 코드입니다.

예제 (HTML5 Shiv):
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

### 연습 문제

1. 벤더 프리픽스를 사용하여 CSS 속성을 다양한 브라우저에서 호환되도록 작성해 보세요.
2. CSS 리셋을 사용하여 웹 페이지의 스타일링을 위한 일관된 출발점을 만들어 보세요.
3. 노멀라이즈를 사용하여 기본 스타일을 일관되게 설정해 보세요.
4. BrowserStack이나 CrossBrowserTesting을 사용하여 웹 페이지를 다양한 브라우저와 디바이스에서 테스트해 보세요.
5. Can I Use를 사용하여 특정 CSS 속성의 브라우저 지원 여부를 확인해 보세요.