MaKeYOurOwN mkyoon

HTML을 다룰 줄 안다면 누구나
CSS는 더 쉽게 다룰 수 있습니다.

CSS 기초 소개 및 팁 등을 정리했습니다.
(IE6, 7에서 지원하지 않는 CSS3 및 가상선택자는 포함하지 않았음을 밝힙니다.)

누구에게든 조금이라도 도움이 되길 바라며.

Posted by mkyoon

미래 웹 기술 포럼에서 19일, '글로벌 웹 기술의 미래'라는 주제로 워크샵을 열었습니다.
(저도 다녀왔어요 -ㅂ-)/~)
세계의 웹 동향과 한국의 웹에 대해 고민하는 시간이었습니다.

1. Google - Vint Cerf

Internet in 2035. 2035년의 인터넷을 대비하는 우리(구글?)의 자세.

1965~2000년 : 35년만에 인터넷은 엄청나게 확장되었습니다.
2000년 이후 35년은 또 어떻게 변할까요?
아시아와 아프리카 등 발전이 이제 시작된 곳은 아직도 확장 중인 단계이며.
미래의 환경과 자원 변화로 인해 지금의 인터넷 보다 더욱 확장할 가능성은 매우 크다고 설명합니다.
(모바일 포함)

하지만 지금 우리가 쓰고 있는 IPV4(Internet Protocol Version 4) address는 한계가 분명 있으므로
IPV6을 제안하며 기타 등등을 설명하였으나
제 인터넷 지식의 짧음으로 인해 알아 듣지는 못했습니다-_-;

이 분이 '인터넷의 아버지'라고 불리는 굉장히 유명한 분이란걸 나중에야 알았으니 말 다했죠;

2. Mozilla - Mitchell Baker

오픈 웹 생태계란.

decentralized - 세계 각기 많은 사람들의 참여와 공동 노력으로
opened - 오픈소스로 공개하며
transparent - 투명하게.
이러한 모습이 미래의 오픈 웹 생태계이며
앞으로의 웹 생태계를 위해 모질라가 위와 같은 process로 노력하고 있음을 역설하고.
이러한 열린 자세와 참여와 공유는 앞으로의 웹 생태계의 바람직한 모습임을 강조하였습니다.

특히. 이분의 머리스따일 맘에 들었어요 *-_-* 나도 그렇게 자를래요.

3. Opera - Charles McCathieNevile

차세대 웹표준을 따르는 오페라.

W3C에서 지금 열심히 준비하고 있는 HTML5를 소개하면서
오페라에서 이러한 웹표준을 따르기 위해 얼마나 노력하고 이루어냈는지 보여주었습니다.
input type="date"를 비롯하여 SVG, APNG, 컬러(rgba, hsla) 지원을 하더군요 +ㅁ+신기신기
그와 함께 ARIA (Accessible Rich Internet Applications)도 잠깐 언급합니다.

개인적으로 오페라에서 어서 빨리 멀티 백그라운드 이미지가 가능했으면- 하는 바램도 있었습니다.
중간중간 유머도 던지시고 재밌었어요~

4. Microsoft - Laurence Moroney

MS의 UX전략 : IE8 그리고 Silverlight.

처음 시작을 실버라이트의 강력한 기능으로 열었습니다.
이미지와 모션, 효과 처리가 사람들의 눈을 확! 끌더군요.

사실 점심먹고 난 다음에 Opera는 간신히 참아낼 수 있었으나 MS는 도저히 못참겠더라고요
잠깐 졸았습니다 ㅠㅠ "절대" MS에 악감정이 있어서 그런거 아닙니다. ㅋㅋ

디자이너가 원했던 색의 다양함과 효과와 모션과 둥근 모서리.
그러나 개발자가 할 수 있는 것은 딱딱한 네모창입니다. (색까지는 최대한 맞춥니다 ㅋㅋ)
이러한 "깨진 달걀" 말고
디자이너가 원했던 바로 그것을 만들어내는 방법을 실버라이트로 구현했음을 강조합니다.
(이 깨진 달걀 발표자료 유명하죠 ㅋㅋ)

표준도 중요하나 혁신 또한 중요하다는 말과 함께
실버라이트를 강조하시더군요. 후에 이 발언 때문에 질문 많았드랬죠.

IE8은 웹표준이 default, CSS2.1 지원만을 언급하고 살짝 넘어가시더라구요.
그렇죠. 아직 IE8은 갈길이 멀죠.

5. Mozilla - Gen Kanai

공개 표준과 Firefox 3 자랑.

하루 전인 18일에 Firefox 3가 정식 런칭했습니다.
그와 함께 24시간 만에 800만 다운로드를 기록했음을 보여줍니다.
(저도 갖고 있는 컴터마다 다 다운받았어요~ ㅋㅋ 축하드려요//ㅂ//)

이렇게 표준을 준수하려 노력하는 Firefox 3 브라우저가 전 세계적으로 사랑받고 있으며
앞으로 웹표준이 더욱 퍼질 것을 예상하면서
우리나라의 특별한 상황을 꼬집었습니다.

Active-X 때문에 한국 정부에서 Vista 사용을 자제할 것을 부탁하는 발언 부터 시작하여
우리나라의 특이한 상황을 언급하였습니다.
이러한 특이 케이스가 보도된 해외 기사를 첨부하여 보여주니
더욱 챙피해지더군요-_-; (왜 하필 이분은 또 일본인인지;)

이렇게 표준을 염두해두지 않은 결정이 앞으로 우리의 발목을 잡을 수 있음을 이야기하면서
Baker씨가 질문 시간에 잠깐 언급했던 Firefox Mobile (코드명 Hennec)도 소개하면서
일본에서는 이미 Firefox 3.1 (코드명 知床 Shiretoko)를 준비하고 있음을 보여주었습니다.
부럽부럽 -_ㅠ우리나라도 곧!

이분. 나중에 한국의 웹환경 주제 발표까지 듣고 가시더군요+_+ 나중에 쬐금 좋아졌습니다 ㅋㅋ

6. 고려대 - 김기창, Adobe - 옥상훈, PayGate - 이동산, Cidow - 신현석, Microsoft - 김국현, Firefox - 윤석찬, Opera - 조만영

장애인 차별 금지법

- 모든 사람들이 어려움 없이 웹페이지(정보) 접근이 가능해야 한다는 취지.
- 정부 기관 페이지 부터 일반기업의 웹페이지도(2012년 까지) 시각장애인이 이용가능하도록 해야한다는 내용입니다.
- 장애인이 정보 접근에 대해 불편을 느끼면 법적 소송 가능합니다.


지불결제와 Active-X

- Windows이외 OS사용자와 IE이외 브라우저 사용자를 원천적으로 막는 개구쟁이 입니다.
- IE 사용자가 많아서 Active-X를 쓰는것도 있지만, Active-X가 있어서 IE를 버리지 못하는 점도 분명히 있습니다.
- 실제 결제가 이루어지는 곳에서 Active-X를 바꿔야 하는 필요성을 못느끼고 있으며
그 때문에 쇼핑몰, 금융권 등은 요지부동이라고 합니다.
지금 소송중에 있다고 합니다. 아직 결과는 안나왔고 대법원까지 갈 예정이라니 두고봐야죠.


아직은 다양한 방법을 시도해야할 때.

윤석찬님의 우리도 이제 촛불시위를 해야하지 않겠나- 라는 말에
웃어 넘겼지만 씁쓸했습니다.
저도 너무 안일하게 웹표준을 대하지는 않았나- 많은 반성을 하게 된 워크샵이었습니다.

날 여전히 노려보고 있는 녀석과
거기서 받은 명함꽂이여요~ //ㅂ//

Posted by mkyoon

원래 "개, 캐" 라는 접두어를 싫어한다. (내가 개띠라서 그런거 절대 아니;;)
하지만 정말 사용 안할래야 안할 수가 없는 동감 백배천배만배의 글을 보고야 말았으니-

나를 미치게 하는 PNG - http://html.nhndesign.com/blog/?p=142

어흑 -_ㅠ

ps.
여기에 IE 버그를 더하자면.
AlphaImageLoader를 사용하면 링크가 안먹힌다는거~

Posted by mkyoon

IE에서 지원되는 CSS 목록은 다음에서 확인할 수 있다.

<select>　 http://msdn2.microsoft.com/en-us/library/ms535893.aspx
<option>　 http://msdn2.microsoft.com/en-us/library/ms535877.aspx

그리고 다음 문구도 확인할 수 있다.

- option Object Remarks -
Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing SELECT element as a whole.

option 엘리먼트에는 오직 배경색과 글씨색만 바꿀 수 있다는 얘기다.
그래. 원래 IE에는 기대조차 안하고 있었으니 그렇다 치자.

하지만 "신기한" 현상을 목격해버렸..-_-
예제 파일을 만들어 보았으니 같이 함 보십시다.

- 예제 File Link 1 - select_euckr.html (ASCII / EUC-KR)
- 예제 File Link 2 - select_utf8.html (UTF-8)

두개의 문서의 차이는 단 하나. 인코딩-_-

select_euckr.html은 저장할 때 파일형식을 ASCII (notepad에선 ANSI)로 저장했고
select_utf8.html은 저장할 때 파일형식을 UTF-8로 저장했다.
물론 각각 character set(EUC-KR, UTF-8)도 알맞게 넣었다.

그럼 소스코드를 확인해보자.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr 또는 utf-8" />
<title>ASCII / EUC-KR 또는 UTF-8</title>
<style type="text/css">
body { font-family: Tahoma; }
select {
　 　 width: 120px;
　 　 height: 200px;
　 　 padding: 5px;
　 　 background: #ff0;
　 　 color: #f00;
　 　 font-family: Dotum;
　 　 font-size: 12px;
　 　 line-height: 2em;
}
option.test {
　 　 height: 20px;
　 　 margin: 5px;
　 　 padding: 10px;
　 　 background: #000 url(http://mkyoon.tomeii.com/mstar.gif) no-repeat 0 0;
　 　 color: #0ff;
　 　 font-family: Gungsuh;
　 　 font-size: 16px;
　 　 line-height: 2em;
}
</style>
</head>
<body>
<h1>EUC-KR 또는 UTF-8</h1>
<select size="5">
　 　 <option>IE 좀맞을래연</option>
　 　 <option class="test">IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option class="test">IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option class="test">IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option class="test">IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
　 　 <option>IE 좀맞을래연</option>
</select>
</body>
</html>

두개 링크를 각각 IE(6,7다 똑같음-_-)와 FF에서 열어보면 다음과 같다.

스타일 먹은거라곤
select : background-color, color, font-family, font-size, height, width
object : background-color, color 끝.

select : background, color, font-family, font-size, height, line-height, padding, width
object : background, color, font-family, font-size, height, line-height, margin, padding
스타일 다 먹어주시고~ 훗-_-

여기서 끝이 아니라.
IE 스크린샷을 한번 보자. 뭔가 이상하지 않은가.
문서 인코딩 형식을 바꿨다고 저렇게 줄간격이 바뀌어도 되는건가?
IE에선 object는 height도 line-height도 안먹는단 말이다!

이건 뭥미?

Posted by mkyoon

http://forum.standardmag.org/viewtopic.php?id=1025
http://www.campaignmonitor.com/blog/archives/2006/03/a_guide_to_css_support_in_emai.html

출처 : CSS Design Korea CDK http://standardmag.org

Posted by mkyoon