[CSS] 해상도와 OS, 태그의 관계 - 웹표준

 

지난번 글에 썼지만..

이번에 화면구조가 내 컴퓨터에서는 잘 나오는데

다른 사람 컴퓨터에서는 이상하게 잘 안나오는 현상이 있었다.

 

그래서 나는 우선 웹표준과 해상도의 차이로 발생했다고 가정,

열심히 정보를 모았다.

 

하지만.. 해상도와는 관계가 없었다.

 

내 모니터는 일본에서 쓰던 LG 모니터로 17인치의 정사각형 모니터다.

요즘 이런모니터 구경하기도 힘들텐데 ㅋㅋㅋㅋ

 

옆의 두사람은 20인지 16:9 와이드 모니터이다.

 

내 해상도는 1280 x 1024

나머지 두사람은 1600 x 900, 1440 x 900

 

여기서 높이가 다르지 않냐!!

이거 조흔데?? 바로 이거야!!!

해서...

 

1024급으로 늘여도 보았고..

내꺼를 800 x 600까지 줄여도 보았지만..

그 차이는 여전했다 ㅠㅠ

 

아래의 그림은 내가 만든 div 구성이다.

 

 

 #wrapper는 100%

#big_box는 1000px

높이는 따로 지정하진 않았다.

#footer나 여기는 없지만 #top의 경우는 100px정도 지정을 했다.

 

하지만.. 모니터의 해상도는 아무런 상관이 없었다.

잘 생각해보면 당연하다..ㅡㅜ

 

 

왜 이렇게 해상도를 알아보고 조작해봤냐면..

바로 아래와 같은 현상이 나타나고있다.

 

 

 

#footer에 링크가 들어간 글자 몇개를 넣고 아랫쪽에 표시되게 하려고했더니

내 쪽에선 표시가 잘 되는데 나머지 두사람의 모니터에선....저렇게...

#footer가 위로가서 붙은거다.;;;;

 

참고로.. position은

#big_box, box, box2, footer 모두  relative다.

 

위에서부터 순서는 #big_box, #box, #box2, #footer

 

기본적으로 생각해보면 #box2의 끝 좌표에서 계산되어 #footer는 #box2보다 아래쪽에 위치해야하는데

이게 웬걸... 위에 껌딱지!!!

 

position을 absolute로 잘못줬나 싶을정도로 #big_box에 찰싹 달라붙었다..

도대체 뭐냐..ㅡㅜ

표준화 흉내 좀 내 보려고 div로 열심히 짜고 위치 맞추는데

왜이리 컴퓨터 마다 보이는게 다른거냐고 ㅠㅠ

 

 

그렇게 약 하루를 고민했다.

 

도대체 원인은 뭘까..

1. 내 모니터가 일본에서 산거라서 그렇다.

2. 와이드 모니터와 정사각형 모니터는 보이는게 다르다.

3. 내가 어딘가 실수했다.

 

3번은 분명히 그런걸테고..

하지만 어떻게 실수하면 여기선 제대로 표시되고 다른데서는 이상하게 표시된단말인가!!

 

그렇게 한참을 고민하다가 의심나는 부분을 하나씩 고쳐보기로 했다.

이래저래 생각해보니.. 현재 가장 의심스러운건

float 부분.

 

일단 표시가 잘 되기에 clear는 안했었다.

clear를 안해주면 float:left 니까 왼쪽으로 달라붙어야지..

position:relative를 무시하면서 위로 붙지는 않을거 아니냐..

 

그래도.. #footer에 clear:left를 날려줬다.

 

히밤..

 

아래쪽으로 정상 표시됐다...

 

원인은 나로서는 아직도 모르겠다.

 

하지만 의심되는거라고는...

 

OS의 차이!!

 

나는 xp home, 옆의 두사람은 xp professional, 7

OS에서의 보안적인 문제로 태그가 먹히던가 그런문제가 있는게 아닐까 추측해본다.

다음주 중에 나도 xp pro 아니면 7으로 올려버리고

예전에 문제가 되었던 부분을 돌려놓고 확인을 해 볼꺼다.

 

확인할 부분은 다음 3가지.

 

1. td 태그안에서 p 태그를 쓰면 사이즈 지정 상관없이 높이가 높아진다.

2. 가운데정렬을 할 부분에 margin:auto 를 안해주면 가운데로 안오고 왼쪽으로 붙는다.

3. float 설정 후 clear를 안해주면 위로 찰싹 붙는다.

 

 

수수께끼는 깊어만가고...

웹 표준화는 어렵고..ㅡㅜ

 

암튼.. 내가 OS를 바꿔보면 어느정도 다시 답이 나올테지..