mydeute's RSS List

영하 15도 안밖을 오가는 날이 계속이다. 그런데 오늘따라 나는 가슴이 먹먹하니 조금 답답하다고...

Fri, 03 Feb 2012 14:46:45 +0900

영하 15도 안밖을 오가는 날이 계속이다.

그런데 오늘따라 나는 가슴이 먹먹하니 조금 답답하다고 느꼈는지

카페테리아에서 좀처럼 주문하지 않았던 아이스 매실을 시켰다.

하얀색 종이컵 안에 서로의 한기로 맞닿아 있는 얼음들이 탐스럽게 보인다.

한모금이 목구멍을 따라 속을 쓸고 지나가는 느낌이 시원하고 좋다.

얼음이 점점 내려가고, 더 가까이 맞부딛친다.

서글서글하게 서로를 비벼대며 녹는다. 아니 하나로 붙어 있기 위함일까?

마지막 남은 매실 음료를 목으로 털어 넣은 뒤에도 여전히 동그란 얼음 알갱이 몇개가 종이컵 바닥을 뒹굴고 있다.

Skip links and standards?

Russ — Thu, 02 Feb 2012 08:35:30 +0900

Question: Are there any standards associated with skip links?

Answer: Yes! In order to comply with Success Criterion 2.4.1 Bypass Blocks – you must provide a mechanism to “bypass blocks of content that are repeated on multiple Web pages. (Level A)”

One of the “sufficient techniques” recommended by the W3C for bypassing blocks is the use of skip links. You can read more about them here:

“The objective of this technique is to provide a mechanism to bypass blocks of material that are repeated on multiple Web pages by skipping directly to the main content of the Web page. The first interactive item in the Web page is a link to the beginning of the main content. Activating the link sets focus beyond the other content to the main content. This technique is most useful when a Web page has one main content area, rather than a set of content areas that are equally important.”

Adding a link at the top of each page that goes directly to the main content area

For a website to pass this success criteria, the following tests must be passed:

Check that a link is the first focusable control on the Web page.
Check that the description of the link communicates that it links to the main content.
Check that the link is either always visible or visible when it has keyboard focus.
Check that activating the link moves the focus to the main content.
Check that after activating the link, the keyboard focus has moved to the main content.

Debate 1: NAME vs ID

Example 1 – using an NAME attribute as the target

<a href="#content">Skip to content (Press enter)</a>
<div>
	<a name="content">Content</a>
</div>

Example 1 – using an ID attribute as the target

<a href="#content">Skip to content (Press enter)</a>
<div id="content">
	Content
</div>

Many years ago, browsers like IE5 used to have trouble with linking to ID’s. For this reason, many Accessibiltiy Experts recommended using the NAME attribute. however, this practice is not recommended any more. In fact, if you are using HTML5, then using the NAME attribute will throw a warning.

Debate 2: Visible skip links

Ideally, skip links should be visible to all users. This allows not only screen reader users, but those who navigate with the keyboard to see these links immediately.

However, many clients do not like visible skip links on their sites. An acceptable alternative is to use skip links that become visible when it receives keyboard focus – ie when a user tabs through the page.

Examples

Here are three example pages – all using hidden skip links that become available once the user has given them focus.

The CSS code used in these example:

.skipLink a
{
	position: absolute;
	left: -1000px;
	z-index: 2;
	margin: 0;
	padding: .5em;
	background: #fff;
	font-size: 200%;
	font-weight: bold;
	text-decoration: none;
}

.skipLink a:active,
.skipLink a:focus,
.skipLink a:hover
{
	display: inline;
	top: 0;
	left: 0;
	color: #fff;
	background: #000;
}

Some links for light reading (31/1/12)

Russ — Tue, 31 Jan 2012 22:16:21 +0900

새로 구입한 무선 프린터! 최근에 아이맥을 구입하면서 복잡한 작은방에서 빠져나와 거실 식탁(?) 위에 아이맥을...

Fri, 27 Jan 2012 10:43:47 +0900

새로 구입한 무선 프린터!

최근에 아이맥을 구입하면서 복잡한 작은방에서 빠져나와 거실 식탁(?) 위에 아이맥을 설치했다. 그러다보니 전에 사용하던 프린터 위치가 애매해져 버렸다. 좁은 식탁위에 프린터까지 놓기는 무리가 있었고 두돌 지난 아이가 있는 집안에서 식탁 아래 프린터를 두었다간 얼마 못가 박살이 날 것만 같았고… 그래서 사용하던 유선 프린터는 중고로 팔아버리고, HP K510A 모델을 새로 구입했다.

박스를 열고, 기본적인 셋팅을 하는데까지는 별로 어려움이 없었는데 막상 무선 프린터는 어떻게 아이맥에서 추가해서 설정해야하는지 몰라서 난감했더랬다. 더군다나 동봉된 시디에는 10.6 스노우 레오파드까지만 지원하는 드라이버가 들어 있었고…

구글링을 하다보니 라이언 OS 부터는 자체적으로 HP 프린터 드라이버를 포함하고 있는듯 했고, 라이언 OS 를 최신 상태로 유지하기만 하면 되는듯했다. 그리고 현재 아이맥에 유선랜으로 네트워크가 연결되어 있었는데 무선랜( wifi) 도 함께 활성화 되어 있어야 프린터가 인식되더라.

약간의 시행착오 끝에 새 프린터를 아이맥에 인식시키는데 성공했고, 테스트 프린팅까지 잘 마쳤고, 동굴 같은 작은방에 집어 넣었다.

새로 산 프린터를 밝고, 넓은(?) 거실에 두지 못하고 좁디 좁은 작은방에 숨겨두어야 하는 현실이 안탑깝긴 하지만 현실이 이럴진대 어이할까. 그래서 이 녀석을 산 것이니 할 수 없지 않은가. 훗.

참 좋은 세상이다. 너저분한 선들 때문에 걸리적 거리던게 엇그제같은데 아이맥과 무선 프린터로 바꾸니 전원선 2개만 남겨놓고 모두 없애 버릴수 있다니 말이다.

우리는 모두 공범

goodhyun — Fri, 27 Jan 2012 09:00:00 +0900

재벌의 골목 상권 진입에 대해 이야기가 많습니다. 재벌의 딸들을 비난하지요, 어떻게 그럴 수가 있냐고… 네...

그러나 한국 사회 부조리의 다른 상당수가 그렇듯, 고질라는 우주에서 오지 않았습니다. 우리 안에서 태어났지요.

자본의 습성이란 팽창에 있습니다. 왜냐하면 성장하지 않으면 안되는 것이 자본주의의 회사입니다. 그 것은 본능이자 존재이유에요. 그 회사의 높은 분 중 누군가가 또 다른 성장 분야를 발견하는 것은 사실 언제 어디서나 있을 수 있는 일입니다.

“마이크로소프트의 소프트크림을 만들면 부드러울 것 같지 않아?”

“애플의 애플 쥬스 사업을 빨리 해야 하지 않겠어? 디자인도 이미 나왔잖아.”

“구글의 스키고글은 삼원색 라인부터 시작해봐.”

아래로부터 어떤 반응이 나올까요?

“Hey, Bill, this is so lame…",
“With all due respect, Steve, but…”

아마 아무도 그 높은 분을 편들지 않았을 겁니다. 심지어 설탕물 전문가가 있었던 애플에서도요. 그 것이 같은 곳을 바라 보는 이들이 모였을 때 생기는 ‘기업 문화’입니다.

또한 정말 소프트크림 전문가는, 쥬스에 애정이 있는 사람은 위의 회사들에서 일할 리가 없지요. 자기가 빛날 수 있는 곳을 아니까요. 정말 좋은 실력이라면 자신의 비즈니스를 일으킬거에요. 이러한 관계에서 발생하는 묘한 긴장감이 회사의 미래에 대한 전략적 방향을 결정합니다.

한편 우리는 모두 ‘그룹’에 일단 들어가려 합니다. 그 안에서 장기간의 고용을 약속 받는 대신 뭐든지 하게 됩니다. 시키는 대로. 그렇게 3년 쯤 보내면, 자기가 빛날 수 있는 곳을 잊게 되지요. 정말 좋은 기회라도 자신의 비즈니스를 일으키는 것은 비합리적이라고 믿게 됩니다. 월급이 최고! 회사 복지가 안전!

그리고 그렇게 한국에서 가장 훌륭한 인재들은 그렇게 자의적(恣意的)으로 골라진 성장분야에 헌신하게 됩니다. 그러기에 그렇게 아름다운 로고에 세련된 디자인에 양질의 재료에 훌륭한 유통라인에, 그리고 다시 포인트적립에 할인에 제휴마케팅에, 자본주의의 모든 정수가 응집된 비즈니스가 만들어지고, 그 추세가 퍼지고 퍼져 골목까지 가게 되지요.

그리고 세련된 브랜드에 편리한 대량소비에 늘어 나는 포인트에 편리한 멤버쉽에 매료된 소비자로서의 우리는 그렇게 충실히 그 자본주의의 정수들을 즐겁게 향유하며, 때로는 ◆▲가족만의 혜택을 부러워하며, ‘그룹’ 밖의 모든 비즈니스를 촌스럽다는 시선으로 바라보게 되겠지요.

모두가 자본주의를 구가하고 있다고 믿었지만, 정작 자본주의의 꽃인 ‘startup’이 피어나기 힘든 사회의 한 풍경,

그 풍경에 대해 우리는 모두 공범입니다.
그리고 우리의 골목 상권은 최신 피해자일 뿐, 사건은 아직 끝나지 않았답니다.

터치 장갑 한짝을 잃어버렸나보다. 오늘 아침에도 있었는데… 터치가 되는 손가락반 하얗게 되어 있는 보라색...

Thu, 26 Jan 2012 20:08:58 +0900

터치 장갑 한짝을 잃어버렸나보다. 오늘 아침에도 있었는데… 터치가 되는 손가락반 하얗게 되어 있는 보라색 장갑이었는데. 조금 촌스럽긴 했지만 추운날에도 폰을 쓸 수 있게 해줘서 좋았는데 영 안탑깝네… 새로 사긴 아깝고. 어디서 떨어뜨린거지?

How to change App ID in Inline Translator

김군우 — Mon, 23 Jan 2012 11:24:57 +0900

Overview

Inline Translator uses Bing translation API of microsoft. Bing API has usage limit and so Inline Translator’s default API key goes limit often. You can simply change API key to yours so you can avoid API usage limit.

Change Bing Translation API Key

At first, go to application page of bing webmaster
Login with Windows Live ID. If you don’t have Windows Live ID, create one! :)
So you can see the list page like below
Click “Add” button and fill up and save form.
After save form, list page will shown again.
You can see App ID like below (if App ID doesn’t exist, try page reload.
Copy App ID and paste into Bing App ID textbox of Inline Translator’s option page.

That’s all. Enjoy. :)

거의 막바지에 바뀐 CSS3 Gradients 용법

miname — Sun, 22 Jan 2012 23:07:30 +0900

이미 널리 쓰이고 있는 CSS3 Gradients의 용법이 이번에 또 바뀌었는데, 관련 CSS Image Values and Replaced Content Module Level 3가 지난 1월 12일에 “Last Call” draft 상태로 진입한 것을 보면 어떤 커다란 용법의 변경은 더는 없으리라 예상(기대)된다.

우선 Linear Gradient 용법의 달라진 점.

Linear Gradient의 가장 단순한 사용 예로 다름과 같은 것이 있다. (vendor prefix는 생략함)

div { background: linear-gradient(white, black); }

적용하면 위에서 아래 방향으로 흰색을 시작으로 점점 짙어지면서 마지막은 검은색으로 표시된다.

linear gradient function의 첫 번째 argument는 gradient의 시작점과 끝점을 잇는 기준 축인 gradient-line을 지정하게 되는데, 위의 예에서처럼 생략되면 위에서 아래방향을 가리킨다. 그리고 gradient-line은 deg 단위를 써서 각도를 지정해 주거나, 혹은 몇몇 정의된 keywords를 쓸 수도 있다.

이전의 spec 내용과 달라진 내용으로, 과거 0deg는 왼쪽에서 오른쪽 방 x 축을 기준으로 각도가 커지면 시계 반대 방향으로 회전했으나, 지금은 밑에서 위를 가리키는 y 축이 기준이며 각도가 커지면 시계 방향으로 회전한다. 그리고 keywords의 경우 예전엔 시작점을 기준으로 했으나 이젠 to와 함께 도착점을 지정해 주어야 한다. 그래서 위의 예를 gradient-line을 써서 과거 용법과 새 용법을 비교하면 다음과 같다.

div { background: linear-gradient(top, white, black); } /* old syntax */
div { background: linear-gradient(-90deg, white, black); } /* old syntax */
div { background: linear-gradient(to bottom, white, black); } /* new syntax */
div { background: linear-gradient(180deg, white, black); } /* new syntax */

gradient-line의 이해는 spec 문서에 나와있는 예제 그림을 보면 쉽게 이해할 수 있는데, 아래 그림은 background: linear-gradient(45deg, white, black); 스타일을 가지는 박스 모양.

다음에 Linear Gradient보다 비교적 덜 쓰여서 약간 생소할 수도 있는 Radial Gradients의 새 용법은 다음과 같이 쓰인다.

div { background: radial-gradient(5em circle at top left, yellow, blue); }

shape과 (혹은) size를 지정하고 position 앞에 at을 붙여준 점에 주의.
예전 여러 size keywords 중 하나로 사용되던 contain과 cover는 각각 같은 의미가 있는 closest-side와 farthest-corner가 이미 정의되어 있기 때문에 혼동을 줄이려고 더는 사용되지 않는다.

아래는 간단한 Radial Gradient의 과거 용법과 새 용법을 비교한 예.

div { background: radial-gradient(50% 50%, circle closest-side, white, black); } /* old syntax */
div { background: radial-gradient(closest-side circle at 50% 50%, white, black); } /* new syntax */

vendor prefixes를 붙여서 사용했던 예전의 gradients 용법은 웹 브라우저가 과거 호환성을 위해 계속 지원해주겠지만, 그렇지 않고 미래 호환성을 생각해서 미리 prefixes를 땐 gradients properties도 함께 정의했다면, 바뀐 용법으로 적절히 수정해줘야 할 것이다.

CSS3 관련 구체적 사용 예시와 브라우저 지원 상황은 항상 CSS3 Please!에서 챙겨보자.

꼬리표:

맥에서 VMWare Fusion을 사용하면서 윈도7을 사용하는데 IE에서 공유된 맥 폴더의 HTML 파일을 읽어오지...

Fri, 20 Jan 2012 10:51:54 +0900

맥에서 VMWare Fusion을 사용하면서 윈도7을 사용하는데 IE에서 공유된 맥 폴더의 HTML 파일을 읽어오지 못하는 상황이 있습니다. 이것은 IE의 보안 정책때문으로 IE의 인터넷 옵션에서 ‘보호 모드 사용’을 해제하면 해결됩니다.

CSS3 2D Transforms Module Example

Fri, 20 Jan 2012 10:38:21 +0900

W3C CSS 2D Transforms Module Level 3(working draft) 예제입니다. 스펙이 완성되지 않아서 제조사 접두어(-moz, -o-, -webkit-, -ms-)를 사용하였습니다.

non-transformed

트랜스폼이 적용되지 않은 박스입니다.

transform

트랜스폼 함수(transform function)를 값으로 하여 2D 트랜스폼을 적용합니다. 트랜스폼 함수는 SVG의 것과 비슷합니다.

div {
	trasform: scale(0.7);
}

transform-origin

트랜스폼의 기준점을 변경할 수 있게 해줍니다.

div {
	trasform: scale(0.7);
	trasform-origin: 0 0;
}

transform functions

transform 속성의 값으로 사용할 수 있는 트랜스폼 함수들입니다.

mydeute's RSS List

영하 15도 안밖을 오가는 날이 계속이다. 그런데 오늘따라 나는 가슴이 먹먹하니 조금 답답하다고...

Skip links and standards?

Debate 1: NAME vs ID

Debate 2: Visible skip links

Examples

Some links for light reading (31/1/12)

새로 구입한 무선 프린터! 최근에 아이맥을 구입하면서 복잡한 작은방에서 빠져나와 거실 식탁(?) 위에 아이맥을...

우리는 모두 공범

터치 장갑 한짝을 잃어버렸나보다. 오늘 아침에도 있었는데… 터치가 되는 손가락반 하얗게 되어 있는 보라색...

How to change App ID in Inline Translator

Overview

Change Bing Translation API Key

거의 막바지에 바뀐 CSS3 Gradients 용법

맥에서 VMWare Fusion을 사용하면서 윈도7을 사용하는데 IE에서 공유된 맥 폴더의 HTML 파일을 읽어오지...

CSS3 2D Transforms Module Example

non-transformed

transform

transform-origin

transform functions

transform: matrix(1, 0, 0, 1, 10, 10);

transform: translate(10px, 10px);

transform: translateX(10px);

transform: translateY(10px);

transform: scale(1.5);

transform: scaleX(1.5);

transform: scaleY(1.5);

transform: rotate(45deg);

transform: skewX(30deg);

transform: skewY(30deg);