CSS에서 selector 우선순위 계산하기

CSS를 사용하다보면 같은 엘리먼트에 대해 여러곳에서 선언하는 경우가 있다. 예를 들자면 다음과 같은 경우. [html] li {color:#A00;} .list_item {color:#0A0;} #item_1 {color:#00A;} … hello … [/html] 이런 경우, 어떤 셀렉터가 우선될 것인가. 이에 대해서는 다음과 같은 공식이 있다. * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li 더보기…

글쓴이 eouia,

놓치기 쉬운 가상클래스의 selector 순서

링크(a)에 대해 셀렉터를 적을 때 주의할 점. CSS의 선언은 나중에 선언한 것이 앞서 선언한 것을 덮어 쓰게 된다. 대개의 경우에는 문제가 없는데, 한가지 주의해야 할 부분은, a에 대한 가상클래스(pseudo-class) – 예를 들어, :hover 따위… – 를 적을 때이다. 다음 순서를 지켜야 생각한 대로 동작하게 된다. a:link a:visited a:hover a:active a:focus 더보기…

글쓴이 eouia,

왜 RSS에 description을 사용해야 하는가.

부분공개(?)가 왜 더 바람직한지는 몇가지 이유가 더 있습니다. 일단, 그 전에 “부분공개”라는 용어는 잘못되었음을 지적하고 싶습니다. “TEXT요약(description)”과 “encoding된 전문(contents)”의 차이입니다. 우선 RSS 2.0의 기본스펙은 description만 존재합니다. description은 HTML코드가 사용되지 않은 Plain Text만 대상으로 합니다. content:encoded는 마크 필그림이 추가로 확장제안(관련링크1, 관련링크2)한 것으로 “표준”은 아닙니다. 따라서 매우 많은 리더기가 content:encoded를 지원하기는 하지만 더보기…

글쓴이 eouia,

올바른 타이틀(title) 작성법

웹페이지를 제작할 때 타이틀은 매우 중요하다. 소설을 쓸 때에도 제목을 잘 지어야 하는 것 처럼. 나쁜 예부터 보자. Bad Case 1. “무제(無題)” 요즘 청소년들도 혼자만의 감상에 못이겨 시를 쓰는지 모르겠는데, 아무튼 한때 문학소년소녀들의 자작시집에는 “무제”가 왜이리 많았는지. 머리통이 좀 굵어지고 난 후에 보기라도 할라치면 어쩌자고 저런 이름을 붙였나 낯뜨겁기까지 하다. 더보기…

글쓴이 eouia,

웹접근성을 높이는 10가지 방법

1. 의미와 목적에 맞는 HTML을 사용하라. 늘 하는 이야기지만, TABLE 태그가 아무리 편리하다 할 지언정, 그것으로 레이아웃을 잡아선 안된다. IMG는 “비텍스트 컨텐트”를 위한 태그이지 장식을 위한 태그가 아니다. 문단은 P로 나누는 것이지, BR이 아니며, 강조는 B대신 STRONG을 쓴다. 밑줄을 위해 DEL을 쓰지 않는다. 목록은 LI를 사용하며, 제목은 Hx를 사용한다. 기타등등, 더보기…

글쓴이 eouia,

부산시 홈페이지, 접근성 체크

LINK : 부산시 홈페이지 이래놓고 이벤트 페이지를 걸어놓는 용기에 대해서 일종의 경외심마저 품게 된다. A. 일단, 친절하게 다운로드 받으라고 되어있는 접근성 체크 항목들부터 보자. 1. 대체텍스트의 사용. 충실하게 대체텍스트를 사용…. 이라기보다는, 쓸 데 없는 잡설을 늘어놓는다는 느낌이다. 애초에, IMG 태그란 “비텍스트 컨텐트”를 위해 사용해야 하는 것인데, 대체텍스트를 사용하는 취지자체를 이해하지 더보기…

글쓴이 eouia,

Tag, 반쪽짜리 멍청함

* 이전에 썼던 글을 다시 올림. 조만간 “Tag, 완벽한 멍청함”이라는 제목으로 후속편을 올리기 위해… 어쩌다보니 계속 태그에 대한 부정적인 글만 쓰게 된다. 어쩌랴, 실제로 나 자신은 납득할 수 없는걸. * 태그, 과연 꿈의 도구인가? 지금은 문을 닫았지만, SF 팬덤내에서는 유명한 홍인기님의 홈페이지를 MovableType을 이용해 만들어드린 적이 있었다. 당시, 그 분의 더보기…

글쓴이 eouia,