Firefox 1.0pr 에서의 몇가지 스타일
Posted: 2004 10 18 21:14 35
안녕하세요.
일단 이 글이 이곳에 어울리는 글인지 모르겠네요.
아무튼 제가 XHTML 의 표준에 맞는 문서를 작성하면서 느꼈던 몇가지 불편사항(?) 과 비슷한 것들을 모아서 올려 봅니다. 어떻게 보면 '이렇게 안되니까 불편해요' 처럼 보일 수도 있겠네요.
일단 프레임 셋인데요.
XHTML 1.0 frameset dtd 에서의 프레임 셋과 프레임의 역할이 애매합니다.
프레임셋에는 cols 와 row 밖에 속성을 줄 수 없는데요, 물론 class 속성을 줄 수 있기는 하지만 이것의 역할이 애매합니다.
일단 스타일의 background-image 나 background-color 등의 적용이 애매합니다.
frame 태그에 이 스타일을 적용했을 때 해당 프레임의 내용이 없다면 해당 색상이나 이미지가 보이는 것은 이해가 됩니다. 프레임은 문서를 표시하기 때문에 어떻게 생각하면 background 가 될 수도 있다고 봅니다.
하지만 frameset 에 이 background 스타일을 적용했을 때에도 frame 에 적용했을 때와 효과가 같다면 이것은 아니라고 봅니다. (단순히 제 생각일 뿐입니다.)
제가 생각하기에 효과적인 방법은 frameset 는 프레임과 프레임 사이를 구분하는 프레임 바에 스타일이 적용되는 것이 맞다고 봅니다. (이것도 역시 그냥 그렇게 되었으면 하는 땡깡입니다.)
관련 문서 : http://myhome.naver.com/mcpinky/xhtml_frameset.htm
위의 것은 그냥 단순히 제 우기기였고요, 지금부터는 나름대로 중요한 사항이라고 생각합니다.
우선 table 태그의 cell 에 쓰이는 속성 중 nowrap 속성이 있습니다.
이 속성을 적용하는 스타일이 제가 생각하기에는 white-space:nowrap 같은데, 속성에 적용된 nowrap 와 다른 역할을 합니다. (사실 이 부분은 white-space:nowrap 가 정확히 테이블의 셀 속성 nowrap 와 같은 역할인지 확신할 수 없기 때문에 자신있게 말할 수는 없지만 줄바꿈 금지... 와 비슷한 역할이기 대문에 맞다고 추정했습니다.)
예시 http://myhome.naver.com/mcpinky/xhtml_tdnowrap.htm
위의 문서에서 첫번째 테이블은 style 만을 사용해서 만든 것이고 두번째 테이블은 스타일 없이 XHTML 표준에서 어긋난 속성값을 이용해서 만든 것입니다.
그리고 세번째 테이블은 어떤 스타일이 적용되지 않는 것인가를 알아보기 위해 쓰인 것이고요.
확신할 수 없지만 만약 white-space:nowrap 가 nowrap 와 같은 역할을 하기 위해 만들어진 스타일이라면 Firefox 에서는 정상적으로 동작하지 않는 것으로 보여 집니다.
div 의 너비와 높이의 적용 차이.
XHTML 에는 테이블 태그를 사용하는 것을 권하지 않는 눈치라 div로 페이지를 구상하려다가 한계에 부딪혔습니다.
혹시 저 같은 타입이 또 계실지도 모르겠는데...
<body> 다음에 <table> 태그를 하나 추가하고 그 테이블을 100%, 100% 의 너비와 높이 속성을 줍니다. 이 경우 테이블은 화면에 가득 차게 되고 스크롤 바 없이도 내용이 표시 가능하죠. (전 이 테이블의 안에다가 iframe 등을 넣어서 썼'었'습니다. XHTML 의 표준에 의거한 페이지를 만들기 전에요.)
저런 테이블의 경우 DOCTYPE 이 없는 채로 익스플로러나 Firefox 모두에서 테이블이 화면 전체에 가득 찹니다. (표준과는 거리가 멀지만요.)
XHTML 에서도 전 여전히 저런 것을 하고 싶었습니다.
하지만 div 태그에 주는 height 스타일은 % 값을 전혀 인식하지 못했습니다.
너비와 높이의 비교 예시 http://myhome.naver.com/mcpinky/xhtml_div.htm
위의 문서에서 보시는 그대로 너비값은 화면의 % 대로 표시가 됩니다. 하지만 높이값은 그렇지가 않습니다.
만약 div 에 position:absolute 를 적용할 경우 높이 대로 출력이 됩니다. 하지만 이 경우에도 문제가 있는데, 이 div 의 하위 div의 경우에도 여전히 높이를 무시합니다.
만약
<div style="position:absolute;">
<div style="position:absolute;"></div>
</div>
이런 식으로 스타일을 주면 div 의 하위에 있는 div의 높이값은 상위 div의 높이값을 기준으로 맞춰집니다. (%로 설정할 경우)
하지만 다음의 경우, position absolute 덕분에 하위 div 는 상위 div를 벗어나서 출력되게 됩니다.
<div style="position:absolute; height:10px;">
<div style="position:absolute; height:20px;"></div>
<div style="position:absolute; height:100%;"></div>
</div>
이 경우 최상위 div의 childNodes[2] 는 최상위 객체를 벗어나게 됩니다.
테이블의 경우
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</table>
이 경우에 테이블 태그에 높이값이 있고 첫번째 셀에 높이값이 있다면 두번째 셀 (tr) 의 높이는 나머지 모두가 됩니다.
하지만 div 의 경우 absolute 가 아니라면 높이값을 무시하기 때문에 이런 것을 전혀 할 수 없습니다. (이것이 원래 의도인지 아니면 무시되는 것인지 모르겠습니다.)
하지만 다음의 경우 div 태그의 높이를 설정할 수 있고, 하위 div가 상위 div 를 벗어나지 않도록 할 수 있는데요, 사실 테이블과 같습니다.
http://myhome.naver.com/mcpinky/xhtml_div_row.htm
위의 문서에 있는 div 는 가장 상위 div에 position:fixed 스타일과 함께 height:100%, width:100% 속성을 주고 하위 div 에 display:table-row 스타일을 준 것입니다.
이 경우에 div에 자유롭게 높이를 줄 수 있지만 사실 이것과 테이블은 다를바가 없습니다. 반대로 말하면 테이블에 position:fixed 와 함께 height:100% width:100% 스타일을 적용하면 위 문서에 있는 div 처럼 되는 것이죠. 하위 셀에 display:table-tow 속성을 줄 필요도 없고요.
이것이 문제가 되는 이유가 % 의 기준이 너비와 높이가 다르다는 점입니다.
너비의 경우 상위 엘리먼트의 x% 가 되지만 높이는 그렇지 않거든요. 보통은 하나로 통일하지 않나요?
여기까지 입니다.
위의 내용은 순전히 제 지식이 부족한 것일수도 있고요. (만약 이 경우, 초보자의 실수로 받아들여주시면 고맙겠습니다.)
영어가 생소한 언어인 관계로 W3C 등에서 원하는 정보를 찾기가 매우 힘들어 정확하지 못한 부분을 썼을수도 있습니다. 양해 바랍니다.
긴 글 읽어 주셔서 감사합니다.
일단 이 글이 이곳에 어울리는 글인지 모르겠네요.
아무튼 제가 XHTML 의 표준에 맞는 문서를 작성하면서 느꼈던 몇가지 불편사항(?) 과 비슷한 것들을 모아서 올려 봅니다. 어떻게 보면 '이렇게 안되니까 불편해요' 처럼 보일 수도 있겠네요.
일단 프레임 셋인데요.
XHTML 1.0 frameset dtd 에서의 프레임 셋과 프레임의 역할이 애매합니다.
프레임셋에는 cols 와 row 밖에 속성을 줄 수 없는데요, 물론 class 속성을 줄 수 있기는 하지만 이것의 역할이 애매합니다.
일단 스타일의 background-image 나 background-color 등의 적용이 애매합니다.
frame 태그에 이 스타일을 적용했을 때 해당 프레임의 내용이 없다면 해당 색상이나 이미지가 보이는 것은 이해가 됩니다. 프레임은 문서를 표시하기 때문에 어떻게 생각하면 background 가 될 수도 있다고 봅니다.
하지만 frameset 에 이 background 스타일을 적용했을 때에도 frame 에 적용했을 때와 효과가 같다면 이것은 아니라고 봅니다. (단순히 제 생각일 뿐입니다.)
제가 생각하기에 효과적인 방법은 frameset 는 프레임과 프레임 사이를 구분하는 프레임 바에 스타일이 적용되는 것이 맞다고 봅니다. (이것도 역시 그냥 그렇게 되었으면 하는 땡깡입니다.)
관련 문서 : http://myhome.naver.com/mcpinky/xhtml_frameset.htm
위의 것은 그냥 단순히 제 우기기였고요, 지금부터는 나름대로 중요한 사항이라고 생각합니다.
우선 table 태그의 cell 에 쓰이는 속성 중 nowrap 속성이 있습니다.
이 속성을 적용하는 스타일이 제가 생각하기에는 white-space:nowrap 같은데, 속성에 적용된 nowrap 와 다른 역할을 합니다. (사실 이 부분은 white-space:nowrap 가 정확히 테이블의 셀 속성 nowrap 와 같은 역할인지 확신할 수 없기 때문에 자신있게 말할 수는 없지만 줄바꿈 금지... 와 비슷한 역할이기 대문에 맞다고 추정했습니다.)
예시 http://myhome.naver.com/mcpinky/xhtml_tdnowrap.htm
위의 문서에서 첫번째 테이블은 style 만을 사용해서 만든 것이고 두번째 테이블은 스타일 없이 XHTML 표준에서 어긋난 속성값을 이용해서 만든 것입니다.
그리고 세번째 테이블은 어떤 스타일이 적용되지 않는 것인가를 알아보기 위해 쓰인 것이고요.
확신할 수 없지만 만약 white-space:nowrap 가 nowrap 와 같은 역할을 하기 위해 만들어진 스타일이라면 Firefox 에서는 정상적으로 동작하지 않는 것으로 보여 집니다.
div 의 너비와 높이의 적용 차이.
XHTML 에는 테이블 태그를 사용하는 것을 권하지 않는 눈치라 div로 페이지를 구상하려다가 한계에 부딪혔습니다.
혹시 저 같은 타입이 또 계실지도 모르겠는데...
<body> 다음에 <table> 태그를 하나 추가하고 그 테이블을 100%, 100% 의 너비와 높이 속성을 줍니다. 이 경우 테이블은 화면에 가득 차게 되고 스크롤 바 없이도 내용이 표시 가능하죠. (전 이 테이블의 안에다가 iframe 등을 넣어서 썼'었'습니다. XHTML 의 표준에 의거한 페이지를 만들기 전에요.)
저런 테이블의 경우 DOCTYPE 이 없는 채로 익스플로러나 Firefox 모두에서 테이블이 화면 전체에 가득 찹니다. (표준과는 거리가 멀지만요.)
XHTML 에서도 전 여전히 저런 것을 하고 싶었습니다.
하지만 div 태그에 주는 height 스타일은 % 값을 전혀 인식하지 못했습니다.
너비와 높이의 비교 예시 http://myhome.naver.com/mcpinky/xhtml_div.htm
위의 문서에서 보시는 그대로 너비값은 화면의 % 대로 표시가 됩니다. 하지만 높이값은 그렇지가 않습니다.
만약 div 에 position:absolute 를 적용할 경우 높이 대로 출력이 됩니다. 하지만 이 경우에도 문제가 있는데, 이 div 의 하위 div의 경우에도 여전히 높이를 무시합니다.
만약
<div style="position:absolute;">
<div style="position:absolute;"></div>
</div>
이런 식으로 스타일을 주면 div 의 하위에 있는 div의 높이값은 상위 div의 높이값을 기준으로 맞춰집니다. (%로 설정할 경우)
하지만 다음의 경우, position absolute 덕분에 하위 div 는 상위 div를 벗어나서 출력되게 됩니다.
<div style="position:absolute; height:10px;">
<div style="position:absolute; height:20px;"></div>
<div style="position:absolute; height:100%;"></div>
</div>
이 경우 최상위 div의 childNodes[2] 는 최상위 객체를 벗어나게 됩니다.
테이블의 경우
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</table>
이 경우에 테이블 태그에 높이값이 있고 첫번째 셀에 높이값이 있다면 두번째 셀 (tr) 의 높이는 나머지 모두가 됩니다.
하지만 div 의 경우 absolute 가 아니라면 높이값을 무시하기 때문에 이런 것을 전혀 할 수 없습니다. (이것이 원래 의도인지 아니면 무시되는 것인지 모르겠습니다.)
하지만 다음의 경우 div 태그의 높이를 설정할 수 있고, 하위 div가 상위 div 를 벗어나지 않도록 할 수 있는데요, 사실 테이블과 같습니다.
http://myhome.naver.com/mcpinky/xhtml_div_row.htm
위의 문서에 있는 div 는 가장 상위 div에 position:fixed 스타일과 함께 height:100%, width:100% 속성을 주고 하위 div 에 display:table-row 스타일을 준 것입니다.
이 경우에 div에 자유롭게 높이를 줄 수 있지만 사실 이것과 테이블은 다를바가 없습니다. 반대로 말하면 테이블에 position:fixed 와 함께 height:100% width:100% 스타일을 적용하면 위 문서에 있는 div 처럼 되는 것이죠. 하위 셀에 display:table-tow 속성을 줄 필요도 없고요.
이것이 문제가 되는 이유가 % 의 기준이 너비와 높이가 다르다는 점입니다.
너비의 경우 상위 엘리먼트의 x% 가 되지만 높이는 그렇지 않거든요. 보통은 하나로 통일하지 않나요?
여기까지 입니다.
위의 내용은 순전히 제 지식이 부족한 것일수도 있고요. (만약 이 경우, 초보자의 실수로 받아들여주시면 고맙겠습니다.)
영어가 생소한 언어인 관계로 W3C 등에서 원하는 정보를 찾기가 매우 힘들어 정확하지 못한 부분을 썼을수도 있습니다. 양해 바랍니다.
긴 글 읽어 주셔서 감사합니다.