"A군아 나 이거 content부분에 내용이 별거없어도 화면 꽉차게하고 bottom은 항상 그때 밑에 위치시키게 하고 싶어. 가능하지? 가르쳐줘.."

A군 왈, "휴.. 싫어 나 갈래.."

김군 왈, "왜? 그거 하나 안 가르쳐주냐?"

A군 왈, "그게... 일단 레이어 다루둣이 알아야 해, position이랑 z-index 부분, 또한  %단위 쓰는 것이랑, 또한 브라우저가 길이에 처리 방식 차이 같은 것을  몇개 더 알아야 한다. 갈길이 멀다. 나 갈래."

김군 왈, "그럼... 밥사줄께."

A군 왈, "그 정도로는 부족한데... 일단 height부터 다시 이야기하자."

김군 왈, "지난번에 height, width 봤어. 또 해? "

A군 왈, "어... 그것만으로 부족해. 일단 복습"

 

http://upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: white; background-position: initial initial; background-repeat: repeat repeat; ">

전에도 보았듯이 height, width의 처리방식의 차이입니다. IE와 W3C로 구별하였는데 엄밀히 말해서 IE의 쿼크모도, 다시말해 DTD가 삽입되지 않았을 경우의 IE 처리방십입니다. DTD가 있다면 W3C와 일단 IE의 차이는 없습니다. 다시 확인하면 height, width 설정은 해당 박스에서 margin, padding, border를 제외한 내부 content 만을 말합니다. 

A군왈, "일단 화면에 꽉찬 블록하나 만들어봐"

김군왈, "어차피 블록이니 좌우로 채울테고, 일단 height만 맞추면 되겠지. <div style='height:100%'>꽉촸어용~</div>.. 어때 나 천재?"

A군왈. "거봐. 안돼... 나 집에 갈래...."

CSS에서 %단위는 부모의 크기에 대해서 자신의 값을 정합니다. 그러기 위해서는 부모의 길이가 정해져 있어야 자신의 값이 나올 수 있습니다. 

김군 왈, "아하.. 근데 body margin을 왜 0 으로 만들었어?"

A군 왈, "또 스크롤이 왜 생기냐고 불평할까봐 미리 넣었지, 브라우저마다 body에 margin이 설정되어 있어. 보통 8px이고 구형 IE는 15px 10px인가 그래. 그리고 이 단위는 절대 길이 단위로 상대 길이 단위가 아니어서 DPI에 영향을 받은 것이 아니고... 

이것을 알기 위해서 직접 테스트를 해봤다고. 넌 지금 남이 직접 브라우저 돌아가면서, 운영체제 DPI까지 변경해가면서 해당 값을 받아오는 프로그램을 짜서 확인한 내용을 꽁짜로 얻어 가고 있는 것이야 ㅜ.ㅜ 

어찌 되었든 HTML 문서를 작성하기 시작하면 브라우저간의 body 마진이 틀리기에, 정확히 말하면 구형 IE가 다르기에 다시 설정해야해. 스크롤바가 생기는 이유는 <꽉찼어용> 블록의 100% height + body의 상하마진 값으로 문서 크기가 되기에 늘 스크롤바가 생길수 밖에 없다우. 알았지? 

그리고 %단위는 height는 부모의 크기에 따라 자신의 값을 정한다고 했는데, 여전히 의문점이 있어야 하는데 그렇지 않아? 대충 이렇게 알고 있는 것이 아니라 계산을 하는 부분은 보다 제대로 기준점을 알아둬야 해. 부모의 어떤 것에 %인지.

가령 자식의 %가 부모의 content영역에 대한 %인지, 아니면 padding까지 포함하는지, 아니면 border나 margin까지 포함된 부모에서 %인지 말이야. 이렇게 까지 확실히 알아둬야겠지?"

김군왈, "그럼 일단 스크롤바가 생기는 것을 보니, 부모의 margin은 제외하겠고.. 아무래도 찍어야 하곘는데.. IE 방식의 height 계산을 유추하면 border부터 되지 않을까 하고, 아무래도 W3C의 방법을 생각하면 content만 해당되는 것이 아닐까 하고.. 찍자.. content 영역에 대한 %야."

A군왈, "ㅋㅋ 잘 찍었어. 그렇다면 직접 만들어서 눈으로 비교해봐"

와 padding:50px를 넣은 부모인 

을 비교해보면.. 마찬가지로 자식 50% 블록의 크기 변경이 없음이 확인할 수 있습니다. %단위 길이는 부모의 content 영역을 기준으로 자신의 길이를 결정합니다. (이를 보통 content box라 합니다. 예외적으로 padding을 포함하는 padding box에 % 단위를 사용하거나, 대상이 되는 부모 content가 바귈 수 있기에 미리 적습니다.)

A군 왈, "그렇다면 상하 100%로 꽉채우는 블록이어도 내부 content가 viewport보다 커지면 문서가 늘어나야겠지? 그렇다면 min-height를 알아야해"

김군 왈, "저기 viewport는 모야? 그리고 min-height는 구형 IE에서 쓸 수 없으니.. 쓰나 마나잖아.. ㅜ.ㅜ"

A군 왈, "viewport는 사용자 화면에 표시되는 영역이야. 그러니까 문서가 크면 스크롤이 생기잖아. 이때 보이는 부분만을 말해. 그렇게 알고 있어. 그리고 min-height는 구형 IE가 height 계산하는 방법이 잘못되어서 height로 min-height 처럼 쓸 수가 있어. 이를 한번 살펴보자.

그렇다면 100px 높이 블럭에 이보다 더큰 200px 블록이 들어오면 어떻게 될까?"

김군 왈, "그럼 부모가 자식을 채우기 위해서 200px 높이로 바뀌지 않을까.."

A군 왈, "휴.....그건 구형 IE, 다시 말해 IE6에서나 그렇고... 너 몸에 IE가 착착 붙었다. 그것도 구형 브라우저 처리로만.. 확인해보자 "

김군 왈, "어랏. 그냥 자식이 부모를 뚫고 나와서 위치했네.. 이래도 되는 것이야? 그런데 IE6만은 부모 height가 바뀌어서 이놈을 모두 포함하고 있네."

A군 왈, "어. 그래서 IE6의 height는 min-height처럼 처리하기에.. 비록 min-height가 없지만 그냥 height를 가지고 쓰면 돼. 그리고 min-height는 IE7에서 들어왔기에 둘다 써면 min-height처럼 작동하겠지? 참고로 IE6의 min-height가 아주 없는 것은 아니야, 테이블의 <td>와 <th>는 min-height가 가능해. 참고로 알아두게.."

김군 왈, "그럼 height와 min-height 모두 병기하면 이제 min-height 하나처럼 쓸 수 있겠네"

A군 왈, "그럴리가... 그럼 멀쩡한 브라우저는 height 받으면 어떻게 처리해? 무시해야 하잖아. ㅎㅎ  어떻게 해결할까?"

김군 왈, " 가르쳐줘..."

A군 왈, "그래서 저녁가지고는 안된다고... 일단은 css의 해당 프로퍼티 값에 !important 쓰는 것을 알지? 단일 중복된 해당 프로퍼티 값에 대해 이것이 먼저 처리된다고... "

김군 왈, "그거야.. CSS 시작하면서 배우잖아. 가령 color:#f00 !important 해놓으면 다른 그냥 color만 써있는 것들이 중복되어도 이게 먼저 우선되고...그럼 이것으로 돼? 그래도 어차피 브라우저마다 다 똑같이 Imporant로 인식해 처리할 것 아니야? "

A군 왈. "그게... 흐흐흐.. IE6에 또 버그가 있어. 그래서 가능해. 아니면 IE6만 작동되게 CSS 핵을 써도 되고. 그러나 일단 버그 먼저 알아두는 것이 핵쓰는 것 보다 중요하겠지? 그리고 핵 자체는 처리상 무시하기를 바라는 문법적 오류가 있는 것이기도 하고. 핵보다는 트릭으로 가능하면 그것을 써야 하는 것이야.  물론 대 전제는 일단 브라우저 버그를 알아둬야 대응이 가능하지, 그냥 묻지마식으로 해결하면 안되겠고... 이젠 IE6의 !impornat 버그 이야기다." 

이때 "잇힝!"은 blue 색상이 되겠지?

이때 "!important"가 있는 red가 우선되어 빨간색 "잇힝!"이 되겠고... 

"test1 클래스에 yellow를 추가했어. 상관없이 !important에 따라서 이때는 여전히 "잇힝!" 빨강색이어야 하겠지. 그런데 IE6에서는 그렇지 않아. IE6에서는 !important가 있던 프로퍼티를 해당 Rule Set에서 다시 재선언하면 이때 해당 프로퍼티에 !important가 없는 것으로 재설정돼. 그래서 결국 그냥 yellow를 적용시켜. 그리고 다시 내려와 test2의 파랑을 보고 "잇힝!"에 적용시켜 결국 파랑색 "잇힝!"이 돼. 이게 IE6의 버그야.

정리하면 동일 Rule Set에서 !important가 있는 프로퍼티 내용을 다시 재선언하면 IE6은 해당 !important가 없는 것으로 무시된다. 이런 것이지.. 이것으로 IE6을 위한 문법상 오류있어 무시되는 핵을 쓰지 않고도 트릭으로 해결할 수 있는 것이지... 한번 더 확인할려면 이제 다음 예제로"

 

A군왈, " 이번에는 test2를 지웠어. 이때 잇힝!의 IE6에서 색상은?"

김군왈, "노란색..."

A군왈, "잘했어. 보람이 있구나! ㅎㅎ..

자 그럼... 이제 IE6을 위해서 !important 트릭도 익혔고, height가 min-height 처럼 처리되는 것도 알고 있으니 드디어 첫 과제로 이 내용을 정리해서 min-height: 200px의 브라우저 호환 블록을 만들어봐"

김군왈, "할 수 있을 것 같어..."

<div style="min-height:200px; height:auto !important; height:200px;background:#0f0">

   난 min-height: 200px 입니다용. 그리고 IE6에서도 min-height가 된다구엽!  

</div>

A군 왈, "헉... 천잰데... 한번 설명해봐"

김군 왈, "그러니까 min-height가 작동되는 IE7 이상의 브라우저는 그냥 쓰고, 이떄 height는 auto 값으로 남아 있어야 해. 그리고 IE6은 height가 min-height처럼 작동하니까 !imporant 트릭을 써서 다시 height:200px로 써서 적용시키고.. 다른 버그 없는 브라우저는 여전히 !imporant가 우선이니 auto 값으로 남고.. "

A군 왈, "얼~~"

김군 왈, "그렇다면 IE6에서 height가 min-height처럼 동작하면 제대로 다른 브라우저처럼 height가 작동되게 할 수 없어?"

A군 왈, " 나 집에 갈래... "

김군 왈, "그러지 말고 가르쳐 줘"

A군 왈, " 딱히 방법이 있디가 보다는, 일단 자식이 부모보다 큰 width나 height를 갖는 것은 보통 흔한 경우가 아니야. 어디서 무언가 잘못된 경우지. 제대로 height나 width 계산을 못한 것이 대부분이겠고.. 굳이 꼭 맞추겠다면 2개의 서로 다른 브라우저는 overflow를 이용해서 합의를 볼 수는 있어

overflow:hidden을 써서 둘다 초과시 숨기거나, scroll이나 auto를 써서 스크롤로 표시하게 하거나.. 정녕 IE6에서도 큰 자식이 튀어나오게 하고 싶다면 position을 absolute로 설정하면 되는데, 이건 아직 좀 말리고 싶다. 최후의 수단은 자바스크립트로 해결해야겠지. 일단은 여기까지 알아두면 대충 왠만한 것들은 고생없을 것 같은데 말이야.

자 그러면 오늘 총 복습, content가 height가 작은 경우에도 꽉찬 블록을 만들어 보거라"

그리고 확인용

---- 다음 시간에.. 휘리리릭 

important에서 t가 자꾸 빠지네요. 오타 수정하였음.