16. CSS문제 해결

해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 

인터넷 익스플로러 관련 CSS문제 해결

인터넷 익스플로러의 초기 버전에서 CSS구현체는 버그 투성이었고 표준에 벗어난 방식으로 동작했으며 W3C 표준을 명백히 잘못 이해한 결과물이었다. 인터넷 익스플로러 6과 이후 버전에서는 이러한 '쿼크'를 대부분 수정했지만 웹 브라우저가 갑자기 표준 호환 쪽으로 바뀌면 기존 웹 사이트가 망가질 수 있다. 

 

이에 대한 해결책은 독타입을 변환해 디자이너들이 기존 쿼크를 지원할지 표준을 지원할지 또는 둘 사이의 하이브리드 버전을 지원할지 지정하게 하는 것이었다. 

 

이론상으로 모드를 설정하기 위해 할 일은 독타입을 선언하는 것밖에 없다. 

 

• 쿼크 모드
  페이지가 표준 호환 페이지가 아니거나 페이지에 과도기(transitional) 독 타입이 사용될 것을 브라우저가 감지할 때 사용된다. 
• 엄격 모드
  특정 브라우저에서 정의한 표준을 사용하고 엄격한 독타입을 사용한다. 
• 준표준 모드
  파이어폭스, 사파리, 오페라(버전7.5이상)에는 테이블 셀의 가로 크기를 제외한 모든 CSS2 표준을 사용하는 세 번째 모드가 있다.

- 밑줄 핵

핵(hack)이란 원래 동작하지 않는 게 정상이지만 특정 상황에서 동작해서 특정 문제를 해결하는 게 사용할 수 있는 코드를 말한다. 일부 핵에서는 인터넷 익스플로러에서만 동작하는 CSS 코드를 포함하는 방법을 사용하지만 필자가 사용하기 가장 쉽다고 판단하는 방식은 밑줄 방식이다.

 

밑줄 핵은 CSS선언 앞에 있는 밑줄을 처리하는 실수를 활용해 인터넷 익스플로러 전용 CSS 코드를 포함시키는 가장 간단한 방법이다. 

 

CSS 표준에 따르면 밑줄로 시작하는 모든 선언은 마치 주석을 사용한 것처럼 무시된다. 하지만 마이크로 소프트가 인터넷 익스플로러 초기버전을 만들었을 때는 이러한 표준을 이해하지 못해 쿼크모드의 인터넷 익스플로러에서는 모두 이러한 CSS선언을 사용할 수 있게 됐다. 이런 실수를 활용하면 쿼크 모드에 사용할 CSS 재정의를 다른 브라우저가 해석하지 않게 할 수 있다. 

 

p{
width :100%;
_width:800px;
outline : 1px solid red;
_border : 1px solid red;
}

- IE 조건문 CSS

인터넷 익스플로러는 다른 브라우저에서 무시하는 조건문을 해석할 수 있다. 이를 활용하면 특정 인터넷 익스플로러 버전에 최적화된 CSS를 링크할 수 있다. 

<!--[if IE]>
	<link href="ie.css" rel="stylesheet">
<![endif]-->

 

인터넷 익스플로러 박스 모델 문제 해결

모든 엘리먼트는 마진, 보더, 패딩 및 너비와 높이를 갖는 콘텐츠로 이루어진 사각형 '박스'다. 하지만 모든 브라우저가 박스를 같은 방식으로 정의하지 않는데서 문제가 시작한다.

 

CSS를 사용해 만든 W3C의 박스 정의에서는 이미지나 기타 객체가 보이는 너비와 콘텐츠 영역의 너비와 높이만을 나타낸다고 명시하고 있다. 하지만 엘리먼트가 차지하는 전체 영역은 콘텐츠 영역에 패딩 및 보더 크기를 더한 영역이 된다. 

 

(콘텐츠) 너비 + 왼쪽 패딩 + 오른쪽 패딩 + 왼쪽 보더 + 오른쪽 보더 = (전체) 너비

 

인터넷익스플로러 5.5 까지는 패딩과 보더를 포함한 값을 너비와 높이 값으로 정의했다. 이로 인해 콘텐츠의 너비와 높이를 판단할 때는 패딩과 보더의 크기를 빼줘야 한다. 

 

(전체) 너비 - 왼쪽 패딩 - 오른쪽 패딩 - 왼쪽 보더 - 오른쪽 보더 = (콘텐츠) 너비

 

따라서 아래와 같은 CSS 코드가 있을 때

#object{
border: 5px solid #000;
paddinf : 10px;
width : 100px;
}

W3C 표준을 따르는 브라우저(파이어폭스, 사파리, 오페라)는 콘텐츠 영역을 100픽셀 너비로 설정하지만 전체 너비는 130픽셀이 된다. 

 

100 + 5 + 5 + 10 + 10 =130

 

그에 반해 인터넷 익스플로러 5.5 및 이전 버전의 IE에서는 엘리먼트의 전체 너비(보더에서 보더까지의 너비)를 100픽셀로 설정하고 콘텐츠 너비를 70픽셀로 줄인다. 

 

100 - 5 - 5 - 10 - 10 =70

 

이것도 문제지만 인터넷 익스플로러 6 이후부터는 W3C 표준을 따라 이 문제를 해결했다. 하지만 페이지에 과도기 독 타입 정의(DTD)를 사용하거나 브라우저가 인식하지 못하는 DTD를 사용하면 IE6과 IE7이 박스 모델의 '쿼크' 버전으로 돌아간다. 

 

CSS 리셋

CSS 리셋은 브라우저 기본 디자인의 적용 범위 수준을 결정하고 '천편일률적인' 디자인을 막기 위해 개발됐다. 정확한 CSS리셋은 디자인 필요에 따라 선택 가능하다. 

 

주요 CSS속성을 (보통 none 또는 0으로) 재정의하면 몇가지 장점이 있다. 

• 나쁜 스타일을 줄일 수 있다. 
  브라우저 제조사에서 추가한 이상하고 눈에 거슬리는 스타일을 없애거나 동작하지 않는 스타일을 제거할 수 있다. 
  일례로 폼 필드 처럼 포터스 상태의 항목을 강조할 때 외곽선을 사용하는 것을 예로 들 수 있다. 물론 키보드로 이동할 때 이러한 강조선이 유용하기는 하지만 이런 부분은 직접 디자인하는 게 맞다. 
  
  
• 기본 디자인을 제거한다. 
  디자인을 시작할 시작점을 설정할 수 있다. 브라우저가 페이지의 외양을 마음대로 정하게 하기보다는 당신이 디자인 주도권을 쥐는 것이다. 
  
  
• 브라우저 스타일의 일관성을 유지한다. 
  다양한 브라우저 타입과 버전에 동일한 스타일 값을 사용한다. 브라우저마다 기본 스타일 값이 조금씩 다르기 때문에 리셋을 잘 활용하면 사용자의 브라우저와 상관없이 스타일 일관성을 최대한 유지할 수 있다. 

CSS 리셋을 사용하려면 CSS 코드 최상단에 원하는 코드를 투가하기만 하면 된다. 

 

- 간단한 CSS리셋 

스타일을 리셋하는 가장 쉬운 방법은 공통 선택자를 사용해 모든 태그에 적용할 기본 스타일을 설정하는 것이다. CSS 리셋은 최대한 간단히 적용해야 한다. 

 

이렇게 하면 대부분의 주요 스타일을 금방 리셋할 수 있지만 한 가지 단점이 있다. IE6에서는 공통선택자를 인식하지 못한다. IE6 지원 문제가 걸린다면 선택자 목록에 모든 HTML 태그를 포함시켜야 한다. 공통 선택자를 사용할 때의 장점으로는 간단명료함뿐 아니라 새로 추가하는 HTML 태그에도 선택자가 항상 적용된다는 점을 들 수 있다. 

 

*{
margin : 0;
padding : 0;
border : 0;
outline :0;
line-height : 1.4em;
vertical-align : baseline;
text-decoration: none;}

 

- 어떤 스타일을 리셋해야하는가?

• 패딩, 보더, 마진
• 텍스트 밑줄
• 줄 간격
• 외곽선
• 세로 정렬

플로팅 문제 해결 

CSS에는 원해 기능으로 만들었지만 지저분한 버그가 하나 있다. 바로 블록 레벨 엘리먼트 내에서 플로팅 하면 자식 엘리먼트가 부모의 공간을 하나도 차지하지 않는 문제다. 

자식 엘리먼트는 당신이 생각하는 웹 페이지상에 그대로 있지만 문제는 배경이나 보더를 부모에 추가하면 마치 자식이 없는 것처럼 박스가 합쳐진다는 것이다 이러한 버그는 칼럼을 설정하려고 할 때 특히 성가신 버그다.

 

이런 '기능'을 해결하고 부모가 버려진 자식 엘리먼트들을 모두 받아들이도록 강제하는 여러 가지 해결책이 개발됐지만 이 두 가지 해결책이 가장 안정적이다. 첫 번째 해결책은 HTML구조를 활용하는 것이고 두 번째 해결책은 순수 CSS만 활용하는 해결책이다. 

- 줄 바꿈 태그를 사용하면 모든 문제가 해결된다 

플로팅 엘리먼트의 문제는 해당 엘리먼트가 문서의 정상 흐름을 벗어나게 되면서 엘리먼트의 바닥을 지정하는 엘리먼트가 아무것도 남지 않게 된다는 점이 다. 

이러한 문제를 해결하려면 (플로팅 자식들이 모두 나온 다음) 엘리먼트의 바닥에서 플로팅을 제거하면 된다. 이렇게 하면 엘리먼트가 자연스러운 크기로 되돌아온다. 

 

- clearfix적용 

/*
모든 플로팅 제거를 위한 클래스 생성
*/
clearfix { clear: both;}

- 오버플로우 해결책

엘리먼트의 높이를 되살리려면 엘리먼트에 overflow를 설정하면 된다. 엘리먼트의 오버플로우는 그냥 기본값인 auto로 설정하면 된다. 이렇게 하면 엘리먼트는 자식들을 모두 수용할 수 있는 공간을 계속 차지하게 된다. 

article { overflow : auto; }