지금까지는 보통 1cell 짜리 table을 이용하였는데 원래 그 기능을 하는 hr 태그를 이용해 보겠다.

CSS에 다음과 같이 정의하고 <hr/>라고 써주면 끝이다. ^^;

hr {
clear:both; /* (option) */
margin:5px auto; /* (option) */
padding:0px;
width:360px; /* 알아서 적절하게. %로 해도 됨 */
height:1px;
color:#2D520D; /* 여기와 아래에 같은 색을 넣음 */
background-color:#2D520D;
border:0px;
}
/* for IE */
* html p {
margin:0px;
}
* html hr {
margin:0px auto;
}

약간 tricky한 방법이긴 하지만 이렇게 하면 훨씬 간단하게, 단 네 글자 만으로 수평선을 만들 수 있다.

from 토끼군.

덧. 일반적인 디자인 용도로는, <div style="border-bottom: 1px solid red; height:1px; margin:0px; padding:0px"></div>가 더 쓰기 좋을 겁니다.

이렇게 말이죠. 다만 hr은 p 태그 사이, 글 중간에 넣을 때 줄 중간에 표시되는 성질이 있다는 게 좀 다릅니다.

드디어 단계적으로 진행될 홈페이지 리뉴얼에 착수했다.

이번 리뉴얼의 최종 목표는 홈페이지의 인터페이스를 하나로 묶게 될 태터 스킨 제작 및 개인용 wiki 설치, 그리고 중학교 때까지 만들었던 각종 프로그램들 중 괜찮은 것들을 sparce 분점에 전시하는 것이 될 것이다. (현재 moni wiki 1.1.0 정식 릴리즈가 얼마 안 남았다고 하여 기다리는 중인데, MathML Drawing 등이 추가된다고 한다. - 지금 나온 4월 9일자 버전도 되는진 잘 모르겠다)

오늘 한 작업은 간단히(?) 메인 화면 수정하기.

http://daybreaker.info (클릭!)

ps. 메인의 사진에 나온 장소가 어디인지는 아마 우리 생물 교수님과 야외 수업(.....)을 했던 사람이면 알 것이다. -_-;;

2. 웹 표준이 반드시 '좋은' 것인가

웹 표준은 다양한 플랫폼(OS)과 브라우저 사이에 호환성을 유지하는 것이 주목적이다. 또한 다음에 자세히 설명하겠지만 내용과 형식의 분리라는 목적도 있다.

그러나 표준이 반드시 좋은 것, 또는 쓰기 편한 것은 아니다. (다음의 두 예를 보라)

ActiveX의 경우는 프로그래머 입장에서는 거부하기 힘든 매력을 가지고 있다. window 프로그램 만들듯이 만들면 웹페이지에서도 그대로 동작하기 때문이다. 하지만 결정적으로 Windows 전용인데다 표준이 아니다.
(개인적인 바람으로는 ActiveX가 다른 OS에서도 되고 보안 문제만 해결한다면 표준이 되었으면 하지만, ActiveX의 강력함은 근본적으로 system API에 직접 접근할 수 있다는 데서 나오기 때문에 어려울 것이다. 칼의 양날과도 같은 존재다. 그 대안으로는 차라리 java applet이 나을 것 같다)

또 하나 XHTML 표준에서 맘에 안 드는 건 b, i, u 태그로만 되던 것이
<span style="font-weight:bold"> (b 태그도 가능)
<span style="font-style:italic">
※ 정정합니다. italic을 나타내는 i 태그는 XHTML 1.1에서도 쓸 수 있는 것으로 확인되었습니다. 오해를 불러일으켜 죄송합니다.
<span style="text-decoration:underline"> (u 태그는 사용 불가)
와 같이 해야 한다는 것이다. 좀더 엄밀하게 구분되긴 했지만 막상 저 코드를 쓰는 입장에선 불편하다고 밖에 할 수 없다. (css 파일에 class를 만들거나 하면 되지만, 태터에서 글 쓰는 것과 같이 class를 선언할 수 없는 경우는 어쩔 수 없다)

표준을 지키는 건 필수적이지만, 표준을 지키는 것이 반드시 쉬운, 편리한 일은 아니다.

ps. b, i, u 태그 테스트 페이지

이제 시험도 끝났고 하니 앞으로 다음과 같은 글을 쓰고자 한다.


1. 웹 표준을 지켜야 하는 이유

웹은 이제(사실은 원래부터 그랬지만) Windows + Internet Explorer의 전유물이 아니다. 이젠 인터넷이 거의 생활 필수품화되었다. 따라서 마땅히 모든 사람들이 웹의 혜택을 누릴 수 있어야 한다.

그러나 지금의 상황을 보자. 인터넷 뱅킹을 Mac에서, Linux에서 할 수 있는가? 가능하긴 하지만 매우 일부의 경우이고 또 일반 사용자들이 하기에는 매우 복잡하다. (여기서, 일반 사용자들이 그런 OS를 쓰겠냐는 사람들이 있을 텐데, Linux의 경우는 이제 상당히 일반화되었고 쓰기도 쉬워졌다. 또 Mac도 사용자가 잘 눈에 띄지 않아서 그렇지 꽤 많다)

모바일 장치를 이용한 웹의 사용, 시각장애인들의 전용 브라우저들 통한 사용, 그래픽 전문가들의 Mac을 이용한 인터넷 접근, 시스템 관리자들의 Linux, Unix에서의 웹 사용 등이 모두 가능해져야 한다.

현실적으로, 이들에게 완전히 같은 수준의 GUI와 편의를 제공하기는 어렵지만, 적어도 사용하는 웹 서비스에서 제공해 주는 기능들은 쓸 수 있어야 하지 않겠냐는 거다.

김중태 문화원 블로그(링크된 글은 에서도, 일부 인터넷 뱅킹 서비스에서 작은 해상도에서는 메뉴를 클릭할 수조차 없었다는 지적을 했다. (이 점에 있어서는 이 블로그의 오른쪽에 있는 floating 메뉴도 고쳐야 한다 -_-)

그런 면에서 가장 심각한 문제는 ActiveX의 사용이다. 사이트에서 ActiveX로 일부 특수한 기능만 못 쓴다면 그나마 낫겠는데 로그인이나 인증 자체들 ActiveX를 통해서만 할 수 있다면 그건 그 사이트를 IE 말고는 쓰지 말란 이야기다. ActiveX가 분명 편리한 기술이긴 하지만 심각한 보안 문제도 안고 있고, 결정적으로 Windows + IE 전용이라는 사실이다. (내가 한가지 궁금한 건 공인 인증서를 ActiveX 외에는 인증할 방법이 없냐는 것이다)

우리나라는 대부분의 웹 개발 업체들이 처음에 만들어 둔 코드를 (디자인만 바꿔서) 계속 재사용하는 방식이 많은데 그래서는 과거 IE와 Netscape 경쟁 시대에 양산된 비표준 태그들을 퍼뜨리는 꼴밖에 안 된다. 또한 HTML이나 웹 디자인, 개발에 입문하는 사람들이 표준에 대한 올바른 인식을 할 수 있도록 하는 책이나 교육도 사실상 거의 없다고 볼 수 있다.

근 몇년 동안 IE가 계속 windows의 웹 브라우저를 독점했다는 사실 또한 문제를 어렵게 만들었다. 대부분의 사람들은 웹 브라우저 = Internet Explorer 라고 생각하고 있으며, 아예 다른 브라우저가 있는지, 왜 쓰는지 자체를 모른다. 그 기간 사이에 웹에 입문한 사람들도 당연히 그런 인식을 갖고 있게 마련이다. (일부를 제외하고..)

이제부터라도 그런 잘못된 인식을 깨고, 진정한 IT 강국이라는 위상에 걸맞게, 모든 사용자들이 웹의 혜택을 동등하게 누릴 수 있도록 계속해서 힘써 나가야 한다.

참고 : 김중태 문화원 블로그

ps. 시각장애인들을 위한 서비스를 어떻게 만들었는지는 철도청 열차 예약 서비스인 바로타를 참고하기 바란다. (첫화면의 오른쪽 위에 '시각장애우를 위한 TTS서비스' 클릭 / 사실 이 사이트가 표준에 근거해서 만든 건 아니지만 저렇게 서비스를 제공한다는 건 바람직한 일이다. 표준을 따르면 시각장애인용 TTS 프로그램들이 더 원활하게 동작할 수 있기에 하는 말이다.)

ps2. 브라우저마다 웹 표준 자체에 대한 해석이 달라서 생기는 문제도 있는데, 가장 대표적인 예가 IE와 Firefox에서 padding과 margin의 범위를 다르게 보는 경우다. 이런 건 어쩔 수 없이 별도의 트릭을 써야 한다.