RE: HTML 어떻게 읽는것이 좋을까?

이 글은 정찬명 님이 작성해주신 ‘HTML 어떻게 읽는것이 좋을까?‘란 글에 트랙백을 하기 위해 작성된 글입니다.


중간에 있는 문제를 전 조금 다르게 바꿔보고 싶습니다. 아래 단어의 뜻이 무엇인지 맞춰보시기 바랍니다. 100점을 맞으셨다면 축하드리겠습니다. 전 그렇지 못했거든요.

abbreviation
citation
delete
definition
division
emphasis
image
insert
keyboard
option group
parameter
pre-formatted
sample
sub script
super script
variable

그리고 위의 단어들이 어떤 상황에 쓰일지도 한 번 맞춰보셨음 좋겠습니다.

parameter, variable, atom, RSS, … 어찌보면 컴쟁이들에게 너무나도 친숙한 단어이다 보니 저런 단어들의 의미를 누구나 알 수 있을거라 착각할 수 있습니다. 그리고 저런 단어가 어떤 상황에서 사용되고 있는지 또한 너무나도 친숙하기 때문에 다른 사람들도 그럴거라 착각하고 있을지 모르겠습니다.

하지만 컴쟁이의 시각을 벗어날 경우 저 단어들은 아주 생소한 단어들일 수 있습니다.

어짜피 학습이 필요하다면 ‘이 태그가 어떤 단어로부터 나왔는데, 이 단어가 어떤 의미이다.‘ 라고 학습시키기 보단 ‘이 태그는 어떤 의미이다.‘로 학습시키는게 더 간단할거라 생각합니다.

웹의 보편성을 생각할 때 HTML은 모두가 다루기 쉬워야 하고 사용하고 있는 언어가 장벽으로 작용해서는 안된다는 점에 동의합니다. 초등학생도 HTML을 다룰 수 있도록 되어야 할 것입니다.

하지만 HTML을 배우기 위해 영어까지도 배워야하는 세상은 되지 않았으면 좋겠습니다.

감사합니다.

‘div’를 어떻게 읽는게 좋을까? 디브? 디비젼?

최근 미투데이에서 div를 ‘디브’라고 읽지 말자는 주장이 나왔고 ‘HTML 요소 이름의 풀어쓴 말과 한국말 표현‘이라는 페이지가 생겨났다. 이를 처음 봤을 때 생각났던 글은 바로 요 글!

이 주장에 따르면 div는 ‘디비젼’이라 읽어야 하고, em은 ‘앰퍼시스’로, pre는 ‘프리 포매티드’, cite는 ‘사이테이션’이라 읽어야 한다. 그런데 malloc을 ‘말록’이라 읽는 것을 보고 한심해보였다는 글이나 div ‘디브’라고 읽으면 싸보인다는 말을 난 이해할 수가 없다.

자 HTML specification에서 div를 어떻게 표현했는지를 한 번 살펴보자.

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

div를 ‘division’이라 지칭한 곳은 전혀 없다. em과 pre는?

EM: Indicates emphasis.

The PRE element tells visual user agents that the enclosed text is “preformatted”

from http://www.w3.org/TR/html401/struct/text.html

이를 그대로 해석해보자면 ‘EM은 강조를 나타낸다. … PRE 요소는 시각적인 유져 에이젼트에게 자신의 안에 있는 텍스트가 “이미 형식화되어있는” 텍스트라는 것을 알려준다.‘가 된다. 다시 말해 강조를 위해 사용되는 태그로 EM이란 태그가 있고 형식화된 텍스트를 표현하기 위해 사용할 수 있는 PRE(프리, 피알이)란 태그가 있다라고 말할 수 있다.

태그는 축약 표현으로 볼 수도 있지만 그 자체로 약속이고, (그 약속을 이해하는 사람들이 모두 이해할 수 있는) 하나의 단어라고 생각한다. 만약 div를 ‘디브’라 읽고, EM을 ‘이엠’, pre를 ‘프리’ 라고 읽는 문제 때문에 서로간의 의사 소통에 문제가 생길 수 있다면 위에서와 같은 주장을 이해할 수 있겠지만 실제 이런 태그를 생긴 그대로 읽는 것 때문에 생기는 문제를 난 보지 못했다.

오히려 abbr같은 태그를 ‘어브리비에이션’처럼 읽게 되면 알아듣기도 쉽지 않고, (미리 이 단어가 무슨 단어인지를 알지 못하는 이상)[1] 발음하기도 쉽지 않을 것 같고, 실제 외국인들과 토론을 할 일이 생겼을 지라도 이런 식으로 태그를 읽는 것이 도움이 될 것 같지는 않다. (한국인과의 대화에 익숙하지 않은 사람들은 엑센트와 장/단음을 제대로 지키지 않는 한국식 발음을 잘 알아듣지 못한다.)

왜 형을 형이라 부르면 안되고, 아버지를 아버지라 부르면 안되는걸까?

난 이해할 수가 없다.

길동아 내 너에게 호부호형을 허락하노라.

[1] 부끄럽지만 난 최근에서야 super script나 sub script같은 단어들의 의미를 알게되었다

CSS로 탭 내비게이션 구현하기…

오랫만에 웹페이지 코딩을 할 일이 있었는데, 탭 내비게이션이 필요한 상황이라 html + css로 탭 내비게이션을 구현해보았습니다.

block 레벨 엘리먼트에 position 속성을 주게 될 경우 새로운 context가 시작되게 되므로 그 하위 엘리먼트에서 position: absolute를 사용할 경우 position을 속성을 지정해둔 상위 엘리먼트의 위치 기준으로 위치가 지정된다는 사실을 이용하는 방법입니다.

border만을 활용하다 보니 디자인 상으로 사소한 문제가 있지만 span 등을 활용할 경우 충분히 이쁘게 만들 수도 있을거라 생각합니다.

Continue reading CSS로 탭 내비게이션 구현하기…

checkbox 중 최대 2개만을 선택할 수 있도록 만들기…

같은 name을 가지는 체크박스들 중 2개 이상이 선택되지 못하도록 만들기 위해 작성했던 스크립트인데, 혹시 필요하신 분이 있으실까 해서 올려봅니다.

필요한 개수만큼 remain_two_obj 를 선언하고 name prefix를 등록해주면 됩니다. 그런 체크 박스들에 onclick 이벤트를 등록해주면 끝!

쓰기 편하게 만드려고, class 화 해봤는데 참 개념이 독특하네요 자바스크립트는 -_-! function 으로 object를 만들어야 한다니…