크롬 개발자 도구와 IE호환성 잡기

 

크롬 개발자 도구를 열면 버그 수정이 편해집니다. 

 

 

 

브라우저에서 우클릭 - 검사를 누르시면 이렇게 HTML과 CSS를 한눈에 볼 수 있습니다. 

혹은 F12 눌러서 개발자도구를 미리 열고 (맥은 alt + command + i)

 

 

▲ 이렇게 생긴 버튼을 누르고 검사를 원하는 요소를 선택하면 됩니다.

선택하면 우측 하단에 지금 선택한 요소에 적용된 모든 스타일을 보여줍니다.

그 중에 어떤 속성을 만져야 수정이되는지 직접 조작해보며 확인가능합니다.

 

 

 

1. 여러 개의 중복 스타일이 있을 경우 가장 우선 적용되는것만 보여주고

나머지 적용안되는 것들은 취소선 처리해줍니다.

 

2. html에 적용되는 여러개의 class가 있으면 전부 보여주는데 가장 위에 있을 수록 class의 우선순위가 높습니다.

 

3. 저기서 직접 스타일을 수정하며 테스트해볼 수 있습니다. 물론 실제 파일에 반영은 되지 않습니다.

 

 

 

 

 

CSS 속성들 중엔 예전 브라우저에서 지원하지 않는 속성들이 있습니다.

이런걸 사용하면 과거 IE8, IE9 브라우저들에선 우리 사이트가 이상하게 보일 수 있기 때문에 

예전 브라우저에서도 호환성을 챙길 수 있는 방법을 소개해드립니다. 

 

 

 

예전 인터넷 익스플로러 브라우저에서 미리보기 

 

 

윈도우10은 시작 - 검색창에서 internet explorer를 검색하거나 

윈도우11은 직접 internet explorer 11 버전 설치를 하셔서 

아무튼 인터넷 익스플로러 11버전을 켜신 후 우클릭 - 검사를 눌러보시면

크롬 개발자 도구와 유사한 메뉴들이 뜹니다. 

거기서 에뮬레이션 탭으로 들어가시면 예전 IE 브라우저에서 미리볼 수 있습니다. 

 

 

 

 

조건부로 익스플로러 버전용 CSS파일 첨부하기

 

익스플로러 X 버전 이하에서만 적용할 수 있는 CSS파일을 첨부할 수 있습니다. 

 

<!--[if lt IE 9]>
  <link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->

 

이렇게 첨부해주시면 css폴더내의 ie8.css 라는 파일은 인터넷 익스플로러 9 미만에서만 적용됩니다.

저걸 [if lt IE 10] 이렇게 바꾸면 익스플로러 10 미만에서만 적용됩니다.

이렇게 첨부하신 후 ie8.css에 여러분이 수정하고 싶은 코드를 담고 head태그 내에 다른 CSS 파일들과 함께 첨부해주시면 됩니다.

참고로 ie8.css 파일은 다른 브라우저에선 전혀 읽지 않습니다. 

(link 태그 첨부 순서는 가장 마지막이 좋습니다. 중요한 덮어쓰기 파일일 수록 밑으로 보내시면 됩니다.) 

 

11부터 flex가 가능함 >> 수정을 해야함