프론트엔드 CS - 크로스 브라우징

김서영·2024년 7월 24일

프론트엔드 CS

목록 보기

9/11

크로스 브라우징

웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말한다.

크로스 브라우징을 고려하지 않으면 HTML, CSS, JS 등 코드가 원하는대로 작동이 안될 수 있기 때문에 W3C의 웹 규격에 맞는 표준 웹 기술을 적용해 모든 브라우저, 기기에서 사이트가 의도된 대로 보여지게 해야한다.

크로스 브라우징이 작업마다 필요한 이유는 브라우저마다 렌더링 엔진이 다르기 때문이다.

크로스 브라우징을 구현하려면?

1. 표준 준수

HTML/CSS/JavaScript 표준 준수

웹 표준을 준수하여 코딩하는 것이 중요하다. 표준을 준수하면 여러 브라우저 간 호환성을 크게 향상시킬 수 있다.
최신 HTML5, CSS3 표준을 사용하되, 브라우저 지원 여부를 확인해야 한다.

2. 반응형 디자인

미디어 쿼리나 메타 태그 사용

반응형 웹 디자인을 사용하면 데스크톱에서 모바일, 그 사이의 모든 것에 이르기까지 디자인을 볼 수 있는 모든 장치에 맞게 디자인을 조정할 수 있다.

미디어 쿼리

미디어 쿼리는 특정 조건에 따라 CSS 스타일을 적용하는 방법이다.

/* 기본 스타일 */
body {
  background-color: lightblue;
}
/* 화면 너비가 600px 이하일 때 스타일 */
@media (max-width: 600px) {
  body {
    background-color: lightcoral;
  }
}

메타 태그

메타 태그는 HTML 문서의 머리 부분에 위치하며, 문서에 대한 메타데이터를 제공한다. 반응형 웹 디자인에서는 viewport 메타 태그가 매우 중요한데, 이 태그는 브라우저에게 페이지의 뷰포트 설정을 지시한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Design</title>
  <style>
    /* 기본 스타일 */
    body {
      background-color: lightblue;
    }
    /* 화면 너비가 600px 이하일 때 스타일 */
    @media (max-width: 600px) {
      body {
        background-color: lightcoral;
      }
    }
  </style>
</head>
<body>
  <h1>Responsive Design Example</h1>
  <p>Resize the browser window to see the effect!</p>
</body>
</html>

3. Don't Repeat Yourself (DRY)

DRY는 Don't Repeat Yourself의 약자로 정보의 반복을 줄이는 것을 목표로 하는 개발의 기본 원칙

웹 사이트를 개발할 때 코드를 단순하고 재사용 가능하게 유지하는 것이 바람직하다. 많은 파일에서 코드를 복사하여 붙여넣는 대신 필요할 때 호출할 수 있는 재사용 가능한 함수(JavaScript 함수 또는 Sass mixin)를 작성한다. 즉, 문제가 발생할 때마다 여러 파일을 수정하는 대신 하나의 기능만 수정하면 실수할 가능성이 최소화된다.

4. CSS 초기화

CSS 스타일 초기화는 브라우저마다 기본으로 제공하는 스타일이 있어서 기본값을 주기 위해 설정을 해주는 세팅

각각의 브라우저(크롬,IE,사파리 등등)에는 브라우저마다 기본으로 제공하는 스타일이 있는데, 이러한 것들을 초기화 하면서 브라우저마다 스타일의 차이를 줄이고자 사용하는 것이다.
즉, 브라우저마다 내장된 고유 CSS 스타일 속성을 리셋 CSS를 사용하여 초기화 시켜서 일관된 스타일을 적용하는 것이다.

김서영

개발과 지식의 성장을 즐기는 개발자

이전 포스트

프론트엔드 CS - 토큰기반 인증방식

다음 포스트

프론트엔드 CS - 크로스 브라우징