크로스 브라우징 (Cross Browsing) :
모든 브라우저에서 화면이 동일하게 보이는 것이 아니라, 동등한 수준의 정보 및 기능 제공이 우선이라는 개념이다.
우리가 사용하는 웹브라우저들은 각기 다른 속성과 기술요소(렌더링엔진)가 존재하며,
이로 인해 웹브라우저 별로 표현하는 것에는 차이가 있을 수밖에 없습니다.
동일한 웹사이트라 하더라도 어떤 웹브라우저로 보느냐에 따라 다르게 보일 수 있는 것이죠.
'모든 브라우저에서 동일하게 보여준다'는 현실적으로 불가능한 얘기입니다.
다만, '크로스 브라우징'은 최대한 다양한 브라우저에서 제작자가 의도한 내용을 이상 없이 동작하게 해줍니다.
[출처] 크로스브라우징 (Cross Browsing) 이란|작성자 패치워크
홈피온의 웹과 온라인마케팅 이야기 : 네이버 블로그
웹개발/제작, 온라인마케팅 패치워크의 공식 블로그. 홈페이지 : hompion.com
blog.naver.com
웹 표준에 의거하여 각각의 벤더사들(e.g.애플, 구글 ect.)이 브라우저를 제작할 때
조금씩 다른 결과물이 나올 수 있다.
i.e. 브라우저에서 제공하는 Css 스타일을 초기화 하고 작업을 시작하는 것이 좋다.
현재 사용하는 크롬 브라우저에서는 흰색 영역이 기본으로 margin 값이 셋팅된 것이 보인다.
구글 검색창에 'reset.css cdn' 입력한다.
링크들어가 아래 코드 복사 후 index.html의 css link 코드 위에 붙여넣기 하면 된다.
<link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"
rel="stylesheet"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css
" rel="stylesheet"> <!-- 복사한 코드를 css링크 위에 붙여넣기 -->
<link rel="stylesheet" href="/login/css/main.css">
<style>
body {
font-size: 50px;
}
</style>
</head>
적용 후 새로고침하면 브라우저 공간이 없어진 것을 볼 수 있다.
반응형
'CSS' 카테고리의 다른 글
| [CSS] CSS 선택자 (0) | 2023.12.12 |
|---|---|
| [CSS] CSS 선언 방식, Types of CSS (0) | 2023.12.09 |
| [CSS] To change text color in list (0) | 2023.11.15 |
| [CSS] To remove underline / dots from a link (0) | 2023.11.15 |
| [CSS] 인라인(글자) VS 블럭(상자) 요소 (0) | 2023.11.15 |
