UI개발 story

Daum 신입공개 채용

2008-09-18T10:46:53Z

21세기 글로벌 미디어 기업을 지향하는 다음(www.daum.net)이 10월 6일까지

서비스 기획, 마케팅, 개발 등 전분야에 걸쳐 2008년 하반기 신입사원을 모집합니다.

보다 나아진 즐거운 세상을 꿈꾸고, 과감하게 도전할 여러분을 Daum이 기다립니다.

1. 모집부문 및 인원
- 모집 부문 : 개발, 기획, 영업, 마케팅, 경영관리, 디자인

- 모집 인원 : 00명

2. 전형단계
- 온라인 입사지원 => 서류심사 => 직무능력테스트 => 인적성 검사 => 1차 직무면접 => 2차 인성면접 => 최종합격

* 서류전형 : 필요 요건 및 직무 경력과 지원 동기를 중점으로 심사

직무능력 테스트 : 직무에 필요한 기본 요건을 테스트 (직무에 따라 과제로 대체 가능)

3. 접수기간
- 2008년 9월 16일(화) ~2008년 10월 6일(월)

4. 접수방법
- 당사소정양식(온라인지원)
- Daum 홈페이지 > 인재채용 > Daum 공채
- 다음에서 'Daum 신입 공채'를 검색

5. 채용 관련 문의
- daum_recruit@hanmail.net, daum_recruit@daum.net

tag : 채용, Daum, Daum 신입공개 채용

Daum의 웹접근성 추진전략 및 Pragmatic HTML/CSS

2008-06-26T17:33:18Z

Daum의 웹접근성 추진전략 및 Pragmatic HTML/CSS

1 추진현황

UI 워크샵
IWA TFT 결성
시각장애인UT
UI 개발가이드라인
사내/와교육및홍보
직군영역확장

2 웹접근성?

IWA TFT
웹접근성준수실태
웹접근성? 웹표준? 웹사용성?
국제/국내동향
기대효과

3 웹접근성 향상 기술 실무 적용 방법

3.1 웹표준화

3.1.1 HTML

HTML Element
(X)HTML/CSS/SCRIPT 분리
구조화
일반문법준수
DTD 문법준수

3.1.2 CSS

속성
에러속성
경고속성

3.2 웹 접근성

3.2.1 HTML

웹 문서 제목
문서 언어
대체 수단 제공
키보드로만 서비스 이용
독립적인 링크 텍스트
페이지 자동 새로고침
온라인 양식

3.2.2 CSS

미디어 설명자

3 웹 사용성

3.3.1 HTML

반복 네비게이션 링크
양식 컨트롤
인접 링크 분리
새 브라우저 창 열기

4 Daum 첫 화면으로 본 웝 접근성

4.1 개발 프로세스

4.2 웹 접근성 개발 프로세스

4.3 적용 된 웹 접근성 예제

4.3.1 웹 표준화 part

(X)HTML/CSS/JASCRIPT 분리
구조화
W3C 유효성 검증기 통과 Tip

4.3.2 웹 사용성 part

목차 제공
양식콘트롤
fieldset / legend
이용가이드

4.3.3 웹 접근성 part

키보드 이용
독립적 링크 텍스트
의미론적 요소

4.4 효과

5 결론

PDF 파일 다운 받기 >> http://uidevstory.tistory.com/attachment/jk0.pdf

tag : Daum, HTML, CSS, 웹접근성

로컬에서 엑티브 컨텐트를 표시 노란 띠 안나오게 하는 방법

2008-01-17T19:06:25Z

보안을 위해 internet Explore가 이 파일에서 사용자의 컴퓨터를 엑세스 할 수 있는 엑티브 컨텐트를 표시한는 것을 차단했습니다. �셥을 보면서 여기를 클릭 하십시오

로� IE에서 노란색 알림 alert 안 나오게 하는 방법입니다..

< !DOCTYPE >

< !-- saved from url=(0014)about:internet -- >

[스크랩] IE 버전별 javascript또는 css이용

2007-11-09T14:15:11Z

이런식으로 IE와 FF에서 동일하게 보이도록 함...

XSL 에서는

앞에 �던 내용중에 보충

IE 선택적 적용(Conditional Comments) 부분, ie에서만 동작기하길 원하는 js나 ie의 css 버그 처리 때문에 사용하는 경우 많음

[ http://www.positioniseverything.net/articles/multiIE.html ]

[ http://msdn2.microsoft.com/en-us/library/ms537512.aspx ]

gt = selects greater than 보다큰 : if gt IE 6 -> 현재버전 > 6

lt = selects less than 보다 작은 : if lt IE 6 -> 현재버전 < 6

gte = selects greater than or equal to 같거나 큰 : if gte IE 6 -> 현재버전 >= 6

lte = selects less than or equal to 같거나 작은 : if lte IE 6 -> 현재버전 <= 6

그밖에 !

To select exclusivly for any non IE - use " IE & !IE " for a downlevel-revealed within a downlevel-hidden CC
html
To select for IE 5.01 only - use " IE 5.0 " or "lte IE 5.0" or "!gt IE 5.0" or "lt IE 5.5000" or "!gte IE 5.5000"
To select for IE 5.5 or 6 or 7.0 - use " !IE 5.0 " or "!lte IE 5.0" or "gt IE 5.0" or "!lt IE 5.5000" or "gte IE 5.5000" (all less specific)
To select for IE 5.5 only - use " IE 5.5000 "
To select for IE 5.01 or 6 or 7.0 - use " !IE 5.5000 " (less specific)
To select for IE 6 only - use " IE 6 "
To select for IE 5.01 or 5.5 or 7.0 - use " !IE 6 " (less specific)
To select for IE 7.0 only - use " IE 7.0 "; or less specific "!lte IE 6" or "gt IE 6" or "!lt IE 7.0" or "gte IE 7.0" or "!lt IE 7" or "IE 7" or "gte IE 7"
To select for IE 5.01 or 5.5 or 6 - use " lte IE 6 " or "!gt IE 6" or "lt IE 7.0" or "!gte IE 7.0" or "lt IE 7" or "!gte IE 7"; or less specific "!IE 7.0" or "!IE 7"
To select for IE 5.01 or 5.5 - use " IE 5 " or "lte IE 5" or "!gt IE 5" or "lte IE 5.5000" or "!gt IE 5.5000" or "lt IE 6" or "!gte IE 6"
To select for IE 6 or 7.0 - use " !IE 5 " or "!lte IE 5" or "gt IE 5" or "!lte IE 5.5000" or "gt IE 5.5000" or "!lt IE 6" or "gte IE 6" (all less specific)
To select for IE 5.01 or 6 - use " lte IE 6 & !IE 5.5000 " or, more general, any of 3 pairs ({"lt IE 7", "!IE 7", "lte IE 6"},{"!IE 5.5000"}) for a downlevel-revealed within a downlevel-hidden CC
To select for IE 5.01 or 7.0 - use " !IE 6 & !IE 5.5000 " (less specific) for a downlevel-revealed within a downlevel-hidden CC
To select for IE 5.5 or 6 - use " lte IE 6 & gte IE 5.5000 " or, more general, any of 9 pairs ({"lt IE 7", "!IE 7", "lte IE 6"},{"gt IE 5.0", "!IE 5.0", "gte IE 5.5000"}) for a downlevel-revealed within a downlevel-hidden CC
To select for IE 5.5 or 7.0 - use " !IE 6 & gt IE 5.0 " or, more general, any of 3 less specific pairs ({"!IE 6"},{"gt IE 5.0", "!IE 5.0", "gte IE 5.5000"}) for a downlevel-revealed within a downlevel-hidden CC
To select for IE 5.01 or 5.5 or 6 or 7.0 - use " lte IE 7.0 "; or less specific "gte IE 5" or "gte IE 5.0" or "lte IE 7" or "IE"; it seems not feasible to use any negations for this selection.

출처:http://pigmon.tistory.com/42

이탈리안 레스토랑 - 톰볼라

2007-11-05T19:21:18Z

이탈리안 가정식 컨셉입니다.

이탈리아에 성악 공부하러 갔다가 요리사가 되신 우아한 아저씨가 주인이시구요,

한국식으로 변형된 이탈리안 음식이 아닌 이탈리아에서 흔히 맛있게 먹을 수 있는 그 맛이라 합니다.

위는 들은 얘기구요..

분위기 또한 맘에 너무 들고요~

일단 흔히 맛있게 먹을 수 있는 맛이 이런 맛이라면 이탈리아에서 살고 싶군요~..*^-^*

오발탄 회식 이후로 맛있게 먹은 식당입니다..

삼성점 위치는..

tag : 이탈리아 레스토랑, 톨볼라, tombola

메디아 설명자(Media descriptor)

2007-10-11T19:29:07Z

메디아 설명자(Media descriptor)

다음은 잘 알려진 메디아 설명자(Media descriptor: DTD의 %MediaDesc)들의 목록이다.

화면(screen): 쪽 수가 없는(non-paged) 컴퓨터 화면을 위하여.
터미날(tty): 타자기, 터미날 또는 운반 장치 등과 같은 제한 된 디스플레이 능력을 가진 일정한 글자 간격(fixed-pitch)을 사용하는 메디아를 위하여.
텔레비젼(tv): 텔레비젼 타입 장치(저 해상도, 색상, 제한 된 화면 굴림)를 위하여.
프로젝터(projection): 프로젝터를 위하여.
수동장치(handheld): 손 위에서 작동하는 장치(작은 화면, 단색, 비트맵 그래픽, 제한 된 주파수대)를 위하여.
인쇄(print): 쪽 수 있는 불투명 물질과 인쇄의 미리보기 화면을 위하여.
점자(braille): 촉감으로 점자를 읽는 장치를 위하여.
음성 장치(aural): 음성 조합 장치(speech synthesizer)를 위하여.
모든 장치(all): 모든 장치에 적합하게.

향 후 HTML 버전에서는 새로운 값이 소개 될 것이고, 파라메터(parameter)로 된 값이 허용 될 것이다. 이들 새로운 확장을 수용하기 위하여 HTML 규격에 맞는 사용도구는 아래와 같이 media 애트리뷰트 값을 해석(parse) 할 수 있어야 한다.

값은 컴마(,)로 분리 된 입력 단위의 목록으로, 예를 들면,
```
media="screen, 3d-glasses, print and resolution> 90dpi"
```
이는 다음과 같이 배열된다.
```
"screen"
"3d-glasses"
"print and resolution> 90dpi"
```
각 입력 단위는 US ASCII 글자['a'-'z', 'A'-'Z': (ISO 10646 hex 41-5a, 61-7a: Unicode 10진수 65-90, 97-122)], 숫자['0'-'9': (hex 30-39)], 또는 하이픈['-': (hex 2d: 45)]이 아닌 글자를 만나면 그 뒤는 잘려 나간다. (hex: hexadecimal을 약자로 16진수를 말한다.)
예제에서 그 결과는:
```
"screen"
"3d-glasses"
"print"
```
대소문자 구별하여 위에서 설정 한 메디아 타입과 일치하는 것으로 지정된다. 사용도구는 맞지 않는 입력 단위를 무시 할 수 있다. 위 예제에서는 screen과 print가 남는다.

스타일쉬트는 메디아와 연관 된 변화를 그 안에 포함 할 수 있다(예: CSS @media construct). 이 경우는 "media=all"를 사용하는 것이 적절 할 것이다.

출처:http://trio.co.kr/webrefer/html/types.html

tag : Media descriptor

다음 한글날

2007-10-09T14:25:35Z

한글날~

다음에서는....

그에 반응이 너무 좋아서 올립니다..

tag : 다음, Daum, 한글날

DTD (Document Type Definition)

2007-10-08T19:41:21Z

DTD은 왜 작성해야 하나

DTD은 브라우저의 랜더링 모드를 지정해주고 유효성 검증기(Validator)의 기준이 되므로 (X)HTML 문서의 상단에 반드시 선언 해 주어야 합니다. 만일 DTD를 생략하거나 형식이 잘못된 문서일 경우에는 웹 브라우저마다 코드의 해석 방식이 다른 Quirks mode로 랜더링이 되기 때문에 엉뚱한 결과물로 출력되는 문제에 직면하게 됩니다.

DTD의 종류

웹 페이지에서 주로 사용하는 HTML 4.01 과 XHTML 1.0에는(2007년 기준) 각각 Strict, Transitional, Frameset 의 3가지 DTD가 있습니다. (XHTML1.1에서는 Transitional 과 Frameset은 파기되고 Strict 기반으로 재구성 되었습니다.)

HTML 4.01

HTML 4.01 Strict DTD

HTML 4.01 Transitional DTD

HTML 4.01 Frameset DTD

XHTML 1.0

XHTML 1.0 Strict DTD

XHTML 1.0 Transitional DTD

XHTML 1.0 Frameset DTD

XHTML 1.1

XHTML 1.1 DTD

어떤 DTD를 선택해야 하는가?

XHTML은 데이터의 표현(Presentation)에 초점이 맞춰져 있는 HTML의 문제점을 개선하기 위해서 XML방식으로 구현한 언어이기 때문에 약간의 문법적인 차이를 제외하고는 HTML과 크게 다르지 않습니다. 하지만 XML 을 기반으로 만들어 졌으므로 이 둘의 차이점을 이해하지 못�거나 기존의 웹사이트가 HTML 기반으로 제작되어 있다면 무리하게 XHTML을 고집할 필요는 없겠죠.

무엇보다 중요한 것은 Transitional DTD와 Strict DTD 타입의 선택 입니다. W3C는 CSS를 장려하기 위해 표현을 위한 태그를 엄격히 배제한 Strict DTD를 권고하고 있습니다만 기존의 수많은 웹사이트들을 한 순간에 변화 시킬 수는 없으므로 호환성 유지를 위해 과도기적 성질인 Transitional DTD를 사용할 수도 있도록 배려했습니다. 다시 말해서 (X)HTML과 CSS의 분리가 완벽히 이뤄 지느냐 그렇지 않느냐에 따라서 DTD를 정할 수 있다는 것이죠. 만약 (X)HTML 내에 표현을 위한 요소를 CSS로 분리가 된다면 Strict DTD를, 그럴 수 없는 환경이라면 Transitional DTD를 지정하시면 됩니다.

웹 표준은 XHTML?

웹 표준과 시멘틱한 웹사이트를 위해서는 XHTML 사용을 해야 한다는 말이 있지만 그 말은 사실이 아닙니다. XHTML 1.0 Transitional 보다는 HTML4.01 Strict의 규격이 구조와 표현을 더욱 엄격하게 구분 짓고 있으므로 무조건 XHTML이라는 말은 잘못 되었다고 볼 수가 있는 거죠. 고로 HTML이냐 XHTML이냐의 선택 보다는 제작하려는 사이트의 방향과 목적을 제대로 파악하고 그에 걸맞은 DTD 선택이 더욱 중요할 것입니다.

출처: http://1upz.com/trackback/91

tag : DTD, Document Type Definition

웹접근성, 웹표준, 웹사용성 포탈 검색결과 비교

2007-09-07T17:15:59Z

웹접근성 발표 자료 준비중에 "웹접근성 웹표준 웹사용성" 세가지 키워드의 관계를 조사하기 위해 각 포탈에서 검색을 해보았는데

재밌는 결과가 나타났다..

일부 N사와 P사의 검색 결과에만 웹 접근성 향상을 통한 장점 및 기대효과 검색 결과가 없었다..

다음 블로그 검색을 따로 신청해야하는 건가?...

아님 조합된 키워드 검색 기능이 부족한 것인가?...

tag : 웹표준, 키워드 검색, 웹접근성, 웝사용성, 포탈 검색결과, 포탈 비교, 키워드 검색 비교

Window에서 safari 브라우저 Screenshots 테스트

2007-08-31T11:27:58Z

Window에서 safari 브라우저 Screenshots 테스트

http://www.browsrcamp.com/

Webpage URL, Width, Quality 를 입력하고 View를 클릭하면 결과가 하단부에 나온다..

이미지를 클릭하면 아레와 같이 큰 이미지로 볼수 있다..

tag : safari, 웹접근성, Screenshots, 크로스브라우징, 사파리 테스트

Flock 브라우저

2007-08-31T11:08:19Z

Flock 브라우저

http://www.flock.com

브라우저 설치 후

My wold 모습

- Favorite Site

- Favorite feeds

- Favorite media

등 기타 다양한 서비스 지원

다음 탑 모습

내 블로그 모습

블로그 Rss리더

웹표준 베이스 크로스 브라우징 지원도 좋은편이구.

모질라 파이어폭스보단 페이지 로딩속도가 빠르다.

하지만 페이징 스크롤 부분에서 딱딱 끊기는 느낌이 들 정도로 약간 버벅거린다..

아직 많은 기능을 사용해보지 못했지만, 기대되는 브라우저이다..

tag : 브라우저, Flock 브라우저, browser, flock

스크린리더 - Sense Reader Power Edition v1.4

2007-08-30T18:55:10Z

드디어 회사에서 Sense Reader를 구매했다..

실제 스크린리더기를 사용하는 시각장애인을 위해 맞는 개발 벙법을 찾을 수 있게 됐다..

tag : 웹접근성, 스크린리더기, 센스리더, Sense Reader Power Edition v1.4, Sense Reader