NuRi's 몰라도 되는 상식들

이글루 플랫폼 변경 작업 후 이런저런 버그가 나온 건 다 아시는 이야기일텐데,
요즘 조금 안정화 되었다는 생각이 들어 어떻게 변했는지 안을 조금 들여다보았답니다.
그러다가 조금 신경 쓰이는 부분이 보여서 정리해 봅니다.

예전에 홈페이지에 대해서 공부해보셨던 분이라면 함께 따라 해보시는 것도 추억(?)을 살리는데 도움이 될지도 모르겠네요. ^^;

이글루스 공지 사항이 올라오는 http://ebc.egloos.com에 가서 소스보기를 선택해 보았습니다.
먼저 제일 첫줄에서 이글루 플랫폼이 바뀌면서 XHTML 방식으로 페이지를 만들었다는 사실이 눈에 뜨이네요. XHTML에 대해 간단하게 설명하면, 정보가 잘 구조화될 수 있도록 HTML을 발전시킨 것이랍니다. 장래를 대비하는 모습이 좋군요.

조금 아래에 있는

이 부분이 마음에 걸리네요. 첫째, 저문장이 나오기 전에 다른 메타 정보를 지정하고 있다는 점과 둘째, 큰따옴표가 아니라 작은따옴표를 쓰고 있다는 점.

저 문장은 앞으로 이 페이지에 대한 문자 코드 해석은 utf-8을 사용해라는 내용인데 브라우저는 이 부분을 만나면 지금까지 해석했던 부분을 버리고 다시 페이지를 읽어 들인답니다. 따라서 이 내용은 홈페이지에서 다른 것보다 우선해서 등장해야 하고 또한 꼭 명시해야 하지요. 인터넷 서핑을 하다보면 분명 우리나라 사이트인데 글자가 엉망진창으로 깨지는 걸 경험해보신 적 있으시죠? 그런건 이걸 적어놓지 않아서 브라우저가 어떤 문자코드인지 판단을 하지 못해서 생긴 일이지요.
홈페이지를 만드는 사람이 가끔 놓치기도 하는 내용이지만 중요한 부분입니다. 지금까지 저걸 별로 신경쓰지 않았던 분이 계시다면 앞으로는 꼭 기록해 주세요. ^^

두번째 내용은 XHTML 형식에서는 값을 지정할 때 반드시 따옴표 안에 넣어야 하는데 이때 사용하는 따옴표는 일반적으로 큰따옴표입니다. 작은따옴표를 쓴다고 해서 문제가 생기는 건 아니지만 큰따옴표가 일반적인데 저부분만 작은따옴표로 적을 필요는 없겠지요?

조금 더 밑으로 내려가 봅시다.

가 보입니다.
여기도 약간의 문제가 있는데 script태그에는 type이라는 속성이 필요합니다.
윗 문장에서는 대신에 language가 있지만 language라는 속성은 type으로 대처되었으므로 type="text/javascript"로 바꾸는 편이 좋을 것 같네요.

중간 내용은 건너 뛰고...


(타임슬립 중) - 이미지는 계란소년님 포스팅에서

소스 코드 막바지 부분에 보면

가 보이네요. 여기서 div의 class 속성에 값을 지정하는데 따옴표가 사라졌네요. 위에도 적었지만 XHTML 형식에서는 값을 지정할 때 따옴표가 꼭 필요하니 여기도 고쳐야겠군요.


여기에선 a 태그의 taget 속성값이 이상하군요.
target은 링크를 클릭했을 때 해당 페이지를 어디에 표시할까에 관련된 내용이랍니다.
그 안에 들어갈 수 있는 값은 _blank, _parent, _self, _top인데 여기엔 _new가 설정되어 있네요. 아마도 원래 의도는 새로운 창을 열어서 거기에 표시하라는 의미겠지요?
그렇다면 _new가 아니라 _blank가 되어야 하겠네요.

여기까지가 이글루스 공식 운영자 블로그에서 볼 수 있는 이상한 점입니다. 여기서 이야기한 문제점은 여러분 이글루에도 있는 문제이지요.
그런데 공식 블로그에서는 안 나왔지만 여러분 블로그에서는 나타날 수 있는 문제점이 있는데 그건 이미지 관련 문제이랍니다.

여러분이 블로그에 그림을 올리실때 본문 가로폭보다 큰 사진은 폭에 맞게 줄여져서 보이는 것 아시죠? 그걸 이글루에서 자동으로 태그를 만들어 주는데 거기에 버그가 있답니다.

이게 만들어진 태그인데 폭을 의미하는 width는 620으로 정수지만, 높이를 의미하는 height는 왠지 950.666666667으로 소수가 되어 버렸네요.
비율을 계산해서 줄인 것까진 좋았는데 정수로 바꾸는 처리를 빼먹은게 문제군요.
높이가 1인 그래픽 파일을 생각해보면 올림쪽이 문제가 적을 것 같네요. (반올림이나 버림으로 하면 높이가 0이 되어서 화면에 표시되지 않을테니)


지금까지 내용은 http://www.w3schools.com/ 내용과 파이어폭스 플러그인 HTML Validator를 사용해서 확인한 결과랍니다.
여러분도 홈페이지를 만들고 나면 저런 검증 페이지나 툴을 써서 확인해 보세요.
지금까지 시행착오로 홈페이지 태그를 익히셨던 분이라면 검사결과와 http://www.w3schools.com/에 있는 설명으로 좀 더 정확한 태그 사용법을 배울 수 있을테니까요.

별로 재미없는 이야기였지요? ^^;