Resistan.com Planet

웹 표준에 대한 검색결과 95건

[비공개] Mobile first strategy for CSS designer.

2012-01-18 12:13 am

마지막으로 블로그에 글을 포스팅 했던 날짜가 작년 여름이네요. 오늘 주제는 CSS 디자이너를 위한 모바일 퍼스트 전략 인데요. 작년에 썼던 'HTML5 & Responsive Web Design' 포스팅과 관련이 있습니다. 모바일 퍼스트 전략이라는 것은 IT 기업들 입에 자주 오르내리는 단어 인데요. 이 개념은 CSS 개발에도 적..
[비공개] HTML5 & Responsive Web Design(반응형 웹 디자인).

2011-05-27 02:36 am

최근 블로그를 HTML5와 반응형 웹 디자인으로 리팩토링 했습니다. 제목은 거창한데 사실 별것 없습니다. 바꾸는데 하루도 걸리지 않았고 무엇을 바꾸었는지 소스 코드를 한 줄씩 설명해 보겠습니다. HTML5 HTML5로 변경하는데는 약 2~3시간 정도 밖에 걸리지 않았습니다. 하지만 고민했던 시간은 꽤 길었습..
[비공개] CSSTidy 한글화

2011-01-24 03:59 pm

한글화하며 CSSTidy는 GPL 오픈 소스로 제공되는 CSS 최적화 도구입니다. 최근 팀에서 작업 규약에 관한 문서화 작업을 하다가 함께 사용할 수 있는 CSS 최적화 도구를 찾았는데, 대개 경량화하는 도구로 쓰다보니 간단하게 구현되는 편이라 온라인 버전으로 제공되는 것이 많았습니다. 그 중에 오픈 소스로..
[비공개] 밥상머리 웹 표준

2010-07-12 03:57 am

며칠 전에 듀트님의 생일연을 빙자한 술자리가 있어서 오랜만에 보는 얼굴들과 함께 이런 저런 이야기를 나누다 보니, ‘그들만의 리그’, ‘웹 표준 상위 그룹’ 운운하는 이야기가 나와 잘 써지지 않는 연재물은 일단 제쳐두고 몇 자 써보려고 한다.사실 이런 글을 쓰는 것이 꽤 민망하다. 웹 표준이..
[비공개] HTML5 오픈 컨퍼런스: CSS3 소개 발표자료 공유.

2010-07-05 11:29 pm

지난 7월 2일 HTML5 오픈 컨퍼런스가 열렸습니다. 윤석찬님의 제안으로 약 1개월 전부터 기획이 되었고 한국 웹 표준 프로젝트 멤버및 국내외 웹 표준 커뮤니티(CSS디자인코리아, 클리어보스, 한국정보화진흥원, 모질라)의 자원 봉사 또는 후원으로준비했습니다. 한국 웹 표준 프로젝트라는 그룹은 생소하..
[비공개] 42 CSS3 Selectors(+Meaning) & Browser Suppo..

2010-06-17 03:39 am

CSS level 1~3까지의 모든 선택자와 그에 대한 해설 그리고 대중적인 브라우저들의 지원 여부를 정리하였습니다. CSS 선택자 문법을 익히면 jQuery를 익히는 것에도 무척 도움이 됩니다. jQuery가 HTML 요소를 선택하는 문법이 CSS가 HTML을 선택하는 문법과 거의 동일하니까요. jQuery를 사용하려면 스크립트가 DOM ..
[비공개] 제4회 웹 표준의 날 + 9 Useful CSS3 Properties.

2010-06-01 06:25 am

지난주 토요일 제4회 웹 표준의 날 행사가 있었습니다. 저는 이 행사를 2006년 첫 회 때부터 빠짐없이 참석했고 후기도 꼬박꼬박 작성해 왔었답니다. 제1회(2006년 9월) -제1회 Css Design Korea 참가 후기. 제2회(2006년 12월) -2nd Web Standards Day, 웹 표준 개발자들의 잔치. 제3회(2009년 2월) -웹 표준을 넘어서… ..
[비공개] jQuery를 이용하여 FAQ 목록 만들기.

2010-03-26 01:15 am

FAQ(Frequently Asked Question) 목록은 어떤 요소로 마크업 할 것인지가 가장 고민이 됩니다. 예를 들면 다음과 같은 다양한 마크업 방법이 있는데요. ul > li > (p+p) ul > li > (hx+p) ul > li > dl > (dt+dd) dl > (dt+dd) + (dt+dd) + (dt+dd) … dl(dt+dd) + dl(dt+dd) + dl(dt+dd) … 오늘 제가 선택한 방법은 첫 번째 방법 ..
[비공개] CSS Bar Graph. Horizontal. Vertical. Star R..

2010-03-17 09:23 pm

목록(ul) 요소를 이용하여 CSS로 모양을 낸 수직 막대 그래프 입니다. 이 예제를 새 창으로 보기 목록(ul) 요소를 이용하여 CSS로 모양을 낸 수평 막대 그래프 입니다. 이 예제를 새 창으로 보기 다양한(p, ul, ol, dl) 요소에 콘텐츠로 포함되어 CSS로 모양을 낸 인라인 수평 막대 그래프 입니다. 이 예제를 새 창..
[비공개] jQuery+CSS Tree Navigation.

2010-03-15 09:30 pm

jQuery를 이용한 Tree Navigation 예제는 어렵지 않게 찾을 수 있었는데요. 키보드만으로도 조작이 가능한 접근성 있는 예제는 찾기가 쉽지 않더라구요. 공개된 소스코드를 수정해서 사용할까 하다가 공부도 할 겸 해서 직접 만들어 봤습니다. 중첩 목록(ul>li>ul>li) 구조로 마크업 했고 현재 페이지 활성..
[비공개] 메뉴 건너 뛰기 링크(Skip Navigation).

2010-03-13 03:11 am

헤딩은 콘텐츠 블럭을 우회하는 가장 효과적인 방법 반복되는 콘텐츠 블럭을 우회하는 방법 메뉴 건너 뛰기 링크에 관한 쟁점 키보드 사용자에게만 유용한 메뉴 건너 뛰기 링크 글로벌 네비게이션을 본문 콘텐츠보다 늦게 마크업 하는 경우 지나치게 많은 ‘** 건너 뛰기’ 제공은 오히려 공해 메뉴 건..
[비공개] CSS Tab Navigation + List Item Navigation.

2010-03-11 09:54 pm

HTML/CSS와 jQuery를 이용하여 비교적 단순하지만 상당히 빈번하게 사용되는 Tab Navigation을 마크업 했습니다. 선으로 처리된 탭, 면으로 처리된 탭, 최근 게시물을 보여주는 목록 아이템 형태의 탭 디자인 입니다. Lined Tab Navigation Lined Tab Navigation : 예제를 새 창으로 보기 Faced Tab Navigation Faced Tab Navigation : 예..
[비공개] CSS Vertical Navigation Bar.

2010-03-10 10:15 pm

얼마 전 공유했던 ‘CSS Navigation Bar‘는 ‘수평+서브메뉴 드롭다운’ 네비게이션 이었는데요. 오늘 공유하는 것은 ‘수직+서브메뉴 드롭다운’ 네비게이션 입니다. 수평 메뉴보다 수직 메뉴가 모든 면(HTML/CSS/JS)에서 코드가 더 간결하고 만들기도 쉽네요. 예제를 새 창에서 보기 특징 중첩 목록(ul>li&g..
[비공개] Modal Windowed Login UI.

2010-03-04 11:47 pm

오늘은 XE에 사용하려고 모달 윈도우 처리된 로그인 UIO(User Interface Object)를 하나 만들었습니다. jQuery를 이용해서 스크립트도 직접 작성해 봤는데 잘 한건지 한 번 봐주시면 좋겠네요. 미리 알려드립니다만 저는 주로 인터렉션을 프로토타이핑 해서 보여줄 목적으로 자바스크립트를 작성하기 때문에 제 ..
[비공개] CSS Drop Down : Emulate Select/Option.

2010-02-18 02:37 am

서식 제어 요소(Form Control Element)를 디자인 하는 것은 상황에 따라 접근성을 떨어뜨리는 경우가 있기 때문에 제한되어야 하고 신중하게 사용해야 합니다. 이미 이전에 포스팅을 했지만 다시 한번 환기하는 차원에서 제한되어야 하는 서식 요소들은 어떤 것들이 있는지 살펴보겠습니다. 스타일 변경이 ..