Chrome
- 웹 브라우저에서 우클릭 > 검사(inspect) or F12 > 상단 왼쪽 검사 아이콘 눌러 원하는 영역 html, 스타일 요소를 확인할 수 있다
- Elements 탭에서는 html, 아래 Styles 탭에서는 적용된 css 스타일을 확인할 수 있다
- Styles 탭에서 상단에 위치한 스타일이 우선 순위가 높은 스타일이다
- Styles 탭의 element.style 은 html에서 style 속성을 부여한 것을 의미한다
- Styles 탭에서 밑줄 쳐진 스타일은 적용되지 않았다는 걸 의미한다
IE
- 마찬가지로 우클릭 > 검사를 통해 확인할 수 있다
- 에뮬레이터(Emulator) 탭에서 IE 버전을 변경해볼 수 있다
IE 호환성
<head>
<link href="css/main.css" rel="stylesheet">
<!--[if lt IE 10]>
<link href="css/ie.css" type="text/css"
rel="stylesheet"/>
<![endif]-->
</head>
<body>
<div class="nav-bar ie-nav">
</body>- IE 구버전에서 스타일 호환이 잘 되는 웹페이지를 만들기 위해서는 IE 구버전 CSS 파일을 따로 만들어서 조건문 안에 넣어주면 된다
- 구버전 CSS class를 적용시켜 줄 때 ie-nav 등 유틸리티로 만들어 적용 시켜주면 다른 스타일에 영향을 주지 않고 호환성을 높일 수 있다
eunji yang