Tagged: XHTML/CSS

26
2월
2009

모바일을 위한 DTD의 종류와 특징

모바일 기기는 다음과 같은 특성을 가집니다. 적은 메모리 용량, 적은 저장 공간, 작은 스크린 사이즈, 느린 CPU, 입력방법의 제한, 전원(밧데리)의 시간 제한 초기의 모바일 기기들은 웹을 사용하기에는 성능이나 메모리, 스크린사이즈가 매우 조악하였기 때문에 모바일 기기에 특화된 언어로 WML(wireless Markup Language)를 사용했습니다. 현재 쓰이는 HTML 과는 차이가 있으며, XML기반으로 만들어졌기 때문에 문법 검사에 매우 엄격합니다. Deck, Card 라는 특이한 개념(페이지와 유사하여, 하나의 WML문서에 여러개의 card를 만들어 여러페이지의 문서를 만들 수 있음)을 제외하면 사용되는 태그는 HTML 과 유사한 면이 있지만, 문법검사가 XHTML과 비슷하여 xml 문법을 따르기 때문에 문법 오류가 자동 수정되지 않습니다....

12
9월
2007

이젠 CSS도 프레임워크 등장? BluePrint 0.5

최근 웹 2.0 시대에 들어서 RIA가 대세가 됨에 따라… 마치 플래시와 같은 동적인 UI를 구현하기 위해서 자바스크립트 개발의 중요성이 많이 부각되었습니다. 이러한 개발을 도와주는 도구로 각종 컴포넌트와 편리한 명령어를 담은 자바스크립트 프레임워크가 많이 개발되어 있습니다. 잘 알려진 자바스크립트 프레임워크로는 Prototype.js, Dojo Toolkit, MooTools, jQuery 등이 사용되고 있죠. 그런데… 이러한 프레임워크라는 개념이 CSS에도 도입이 된 것 같습니다. 저도 나름 새로운 사이트를 들어갈 때나, 프리랜스로 작업할 때 CSS의 기초로 사용하는 파일을 가지고 있구요.. 이를 바탕으로 작업을 진행합니다. 이것의 확장된 개념이라고 할 수도 있을까요? 그와 더불어 디자이너 입장에서도 디자인을 하면서 CSS를 더 잘...

30
8월
2007

XRAY – 박스모델 표시기(Bookmarklet)

자바스크립트에 관련된 소식을 많이 알려주는 해외 블로그 중에 ajaxian 이라는 사이트가 있습니다. 시간이 나면 자주 방문해서 글을 읽으면서 영어를 읽는 연습(?)도 하고 있습니다만, UI개발자로서 흥미있는 소식이 업데이트 되어서 스크랩 해봅니다. ajaxian’s article : http://ajaxian.com/archives/xray-your-internet-explorerOriginal Post : http://westciv.com/xray/ XHTML/CSS 개발을 하다 보면 박스 모델이란 난관에 부딪히게 됩니다. HTML의 각각 Element를 감싸는 요소는 margin, padding, border 등이 있는데, 컨텐츠를 박스 형태로 감싸는 이 요소를 더해서 정리한 것을 박스모델이라고 하죠. 그런데 이 박스모델을 렌더링 하는 방법이 각각의 브라우저들 끼리 차이가 발생합니다. 그래서 HTML 개발 시에는 이 박스 모델을 잘 파악하는 것도 일인데요, 이...

24
8월
2007

웹페이지 퍼포먼스 향상을 위한 기법 – 발표자료

얼마 전 회사에서 진행했던 세미나 발표자료입니다. 웹페이지 속도를 개선할 수 있는 방법을 UI개발 시점에서 살펴본 것이구요. 이 발표자료의 원본은 2007년 6월 8일 영국 런던에서 있었던 @media 2007 conference 에서 Nate Koechley 라는 분이 High performance for Web sites – 14 Rules for faster pages 라는 주제로 발표하신 자료입니다. 웹페이지의 속도를 빠르게 하고 효율성을 높여줄 수 있는 14가지 룰과 그와 관련된 배경지식을 다루고 있구요. UI개발과 관련이 있지만, 서버사이드 스크립트 차원이나 서버 차원에서 다루어지는 것도 있습니다. 우선 제가 속한 팀이 UI개발 팀이기 때문에 팀 업무영역에 관련된 것들만 추려서 발표자료를 만들어서 발표했었구요, 실제...

19
8월
2007

XHTML Cheat Sheet – ver1.03

XHTML을 통한 UI개발 시에 참고할 수 있는 Cheat Sheet 입니다. 사무실이나 집에서 책상 벽에 붙여놓고 필요할 때 참고하면서 사용하기에도 좋은 듯. (그리고 이런 것 붙여놓으면 폼나잖아요~? ㅋㅋ) XHTML 상에서 사용하는 태그와 태그별로 사용가능한 속성을 표 형태로 표기한 문서이구요, 2페이지입니다. 예를 들어… <div> 태그의 경우 generic container(block) 이라는 설명과 함께, %attrs, align* 이라는 속성을 넣을 수 있는 것으로 참고할 수 있죠. 표 옆에서 %attrs 는 %coreattrs, %i18n, %events 세가지로 되어 있는데, id/class/style/title, xml:lang/lang/dir, onclick 의 속성을 포함할 수 있다는 뜻이겠네요. align* 으로 표기된 것은 2페이지를 보시면 아시겠지만, align 속성은 폐지되었지만 Transitional...

16
8월
2007

CSS 핵

브라우저마다 HTML렌더링하는 방식이 조금씩 차이가 나고, 때로는 버그가 존재하는 관계로(망할 IE) 모든 CSS 코드가 모든 웹브라우저에서 똑같이 보이지 않습니다. 따라서 이러한 특성을 이용하여 특정 브라우저를 제외하거나, 특정 브라우저에서만 CSS를 적용하는 기법을 CSS 핵(Hack) 이라고 부르죠… 그래서 문법적으로 맞지 않거나, 특정 브라우저에만 적용되는 비표준인 경우가 많기 때문에 이러한 CSS핵은 어쩔 수 없는 경우가 아니면 사용하지 않아야 합니다. 또한, 단순히 눈앞의 문제만을 해결하기 위해 핵을 사용하면 나중에 페이지를 수정하거나 브라우저의 버전이 올라갈 때에 문제가 생기는 경우도 있구요. CSS핵은 이런게 있다 정도로 알아두고, CSS핵을 사용하기 이전에 근본적으로 디자인을 수정하거나 다른 표준 태그로 해결하는게...

01
8월
2007

내가 UI개발 직군을 선택한 이유

UI개발이라는 직군은 국내에서 탄생한지 얼마 되지 않은 생소한 직군입니다. 보통 HTML코더, 스크립터, 웹 퍼블리셔 등등… 호칭도 통일되지 않았습니다. 이른바 HTML코딩이라는 수단으로 디자인과 개발의 단순 지원 역할을 해주던, 웹개발 프로세스에서는 중요성이 많이 떨어지는 직군… 이었습니다. 하지만 지금은 사정이 많이 틀려졌죠. Web2.0 이라는 패러다임의 등장에 의해 세계의 웹사이트는 과도기에 휘말리게 됩니다. 아시다시피 End-User가 보는 화면은 HTML, 즉 “HTML코더”가 만들어내었던 화면인데, 국내에서는 ‘대충대충 빨리빨리’의 영향으로 매우 낮은 효율과 품질을 보이는 화면이 양산되어 왔던 거죠. 물론 사이트가 느린건 서버나 프로그램 로직 자체의 비효율성 때문일 수도 있지만, 이러한 Back-end 단의 비효율성 보다는 사용자가 HTML과 이미지,...