앱 만들기/CSS study

브라우저 스타일 초기화 하는 방법

나도처음이야 2023. 5. 30.

CSS 에서 웹 페이지 스타일을 정하지 않아도 기본적으로 적용되는 스타일이 있습니다.

이를 브라우저 기본 스타일 이라고 표현합니다. 

 

 

브라우저 기본 스타일 이란?

'스타일'이란 HTML 웹 문서에 글꼴, 색상, 정렬 등의 디자인 요소들을 설정하는 것을 의미합니다. 그리고, 여러개의 스타일을 모아둔 것을 '스타일 시트'라고 부릅니다. CSS(Cascading Style Sheet) 에는 2

soo0100.tistory.com

크로스 브라우징 이란

이런 브라우저 기본 스타일은 브라우저 마다 약간의 차이를 가지고 있습니다.

개발된 하나의 웹 페이지가 모든 브라우저에서 동일하게 보이기 위해서는 바로 이런 차이를 제거 해주어야 합니다. 이를  크로스 브라우징 이라고 합니다.

크로스 브라우징이란, 여러 브라우저에서 결과물이 똑같이 보이게 만드는 것 이라고 생각하면 쉽습니다. 

크로스 브라우징을 위해서, 브라우저 기본 스타일을 초기화 하는 과정이 필요합니다. 

브라우저 기본스타일 초기화 하기

1. reset.css bin 을 구글페이지에서 검색합니다.

  첫번째 검색된 jsdeliver.com 사이트에 접속합니다.

reset.css cdn 검색하기

2. Copy 아이콘 선택후 Copy HTML 을 선택합니다.

3. 작성 html 파일에 붙여넣기

코드를 삽입하면, 해당 페이지는 브라우저 기본 스타일 값들에 영향을 받지 않게됩니다.

구글,파이어폭스, 웨이브 등등 여러 브라우저 들의 스타일 값들이 초기화 되게 됩니다.

브라우저 기본 마진값이 삭제된 모습

크로스 브라우징을 위한 초기화 작업을 실행해보았습니다.

감사합니다.

반응형

댓글