오페라 웹표준 강좌 48장, 동적 스타일 - 자바스크립트로 CSS 다루기

클리어보스에서 번역중인 오페라 웹표준 강좌의 48장 동적 스타일 - 자바스크립트로 CSS 다루기가 번역 되었습니다. 검은태양님께서 수고해 주셨습니다. 근래 들어 검은태양님께서 너무 열심히 번역에 참여해 주고 계셔서 한 주에 한 강좌씩 꼬박 꼬바 등록되고 있는것 같습니다. 너무 너무 감사드립니다. 저 역시도 어서 진행중인 부분을 완료해서 올리도록 해야겠습니다.

• 소개
• 스타일시트에 접근하기
• 스타일시트 속성
• 규칙을 추가하거나 제거하기
• 요소의 스타일 변경하기
• 요소의 클래스명
• 요약
• 연습문제
• 저자에 대하여

번역된 다른 강좌들:

• 1. 웹 표준 커리큘럼의 소개와 차례
• 2. 인터넷과 웹의 역사, 그리고 웹 표준의 발전
• 3. 인터넷은 어떻게 작동하는가?
• 4. 웹 표준 모델 - HTML, CSS 그리고 JavaScript
• 5. 아름다운 꿈, 하지만 현실은 무엇인가?
• 8. 색 이론
• 12. HTML 기초
• 25. 접근성 기초
• 27. CSS 기초
• 39. 프로그래밍 - 정말 기초!
• 40. 당신은 자바스크립트로 무엇을 할 수 있는가?
• 43. 겸손한 자바스크립트(unobtrusive JavaScript)의 원리
• 49. 자바스크립트 이벤트 핸들링

아내가 그려준 아바타

오늘 아내가 인상을 잔득 쓰고 있는 제 사진 하나를 가지고 작업을 하더니 이렇게 멋진 아바타 이미지를 스케치 해  주었습니다.

페이지오프라고 적힌 머리띠를 묶은 모습입니다.

HTML 모드로 변신한 봄눈입니다.

사악하고 간사한 모드의 봄눈입니다.

220볼트 전원을 입에 물고 있는 봄눈입니다. 아내의 의도를 잘 모르겠어요 ㅎㅎ

연필을 물고 있는 지적인 봄눈입니다.

꽃을 물고 있는 봄눈입니다.

춥파춥스를 물고 있는 봄눈입니다. 그러고보니 중학교 때 별명이 춥스였는데... 실제로 춥파춥스를 많이 먹었거든요.

위 버전들의 원본 스케치입니다.

저와 아내가 함께 있는 그림입니다. 아내가 너무 좋습니다. 사랑해~

오페라 웹표준 강좌 49장, 자바스크립트 이벤트 핸들링

클리어보스에서 번역중인 오페라 웹표준 강좌의 49장 자바스크립트 이벤트 핸들링가 번역 되었습니다. 검은태양님께서 수고해 주셨습니다. 감사드립니다.

• 소개
• 이벤트란 무엇인가?
• 이벤트가 움직이는 방법
• 이벤트의 혁명
  • DOM 레벨 2 이벤트
  • IE의 이벤트 모델 예외
  • 다양한 브라우저에서 이벤트 등록하기
• 이벤트와 접근성
• 이벤트 제어
  • 특정한 요소에 이벤트 적용하기
• 이벤트 객체 참조
  • 이벤트에 종속적인 속성 체크
• 이벤트 기본값과 버블링
  • 이벤트의 기본적 동작방식 차단
  • 이벤트 버블링의 중지
• 이벤트 핸들링의 완전한 예제
• 요약
• 연습문제
• 저자에 대해

번역된 다른 강좌들:

• 1. 웹 표준 커리큘럼의 소개와 차례
  
• 2. 인터넷과 웹의 역사, 그리고 웹 표준의 발전
• 3. 인터넷은 어떻게 작동하는가?
• 4. 웹 표준 모델 - HTML, CSS 그리고 JavaScript
• 5. 아름다운 꿈, 하지만 현실은 무엇인가?
• 8. 색 이론
• 12. HTML 기초
• 25. 접근성 기초
• 27. CSS 기초
• 39. 프로그래밍 - 정말 기초!
• 40. 당신은 자바스크립트로 무엇을 할 수 있는가?
• 43. 겸손한 자바스크립트(unobtrusive JavaScript)의 원리

두번째 웹퍼블리셔 오리엔테이션 합니다

지난 2월 21일 첫번째 웹퍼블리셔 오리엔테이션을 마친 후 6개월이 지난 9월 19일 다시 두번째 자리를 갖게 되었습니다.

웹퍼블리셔 오리엔테이션은 사회에 첫 발을 내 딛는 예비 또는 1년 이내의 신입 웹퍼블리셔 분들과 업계 선배님을 모시고 궁금한 점들과 고민들을 이야기해 보기 위해 마련된 시간입니다. 퍼블리싱 개발 방법론이나 기술을 배워가는 자리가 아님을 알려드립니다.

두번째 웹퍼블리셔 오리엔테이션의 개요는 다음과 같고, 신청은 클리어보스의 별도 페이지에서 받고 있습니다.

• 일시 : 2009년 9월 19일 토요일
• 장소 : ACG / 서울시 강남구 논현동 99-7 럭스웨이 빌딩 4층 대회의실
  • 강남구청역 3번 출구
  • 학동로북36길 이용 학동사거리 방향으로 직진, 도보로 10분 내외 소요
  

• 대상 : 총 20명 - 미취업 입문자(10명)와 신입 1년차 이내(10명)
• 선정기준 :
  • 구분별 선착순
  • 한 쪽 지원자의 수가 10명이 되지 않을 경우, 다른 한 쪽 지원자수로 채워짐.
  • 단, 경력 1년 이상자 등록시 취소될 수 있음.
• 진행 및 도움 : 에틱, 봄눈, 루트박스, 호브레드, 비티
• 참가비 : 3,000원 / 뒤풀이 비용 별도
• 신청 : 8월 24일 ~ 8월 31일
• 내용
• 1교시(13:00 ~ 13:30) : 행사 소개 및 인사(30분 / 명함 준비)
• 2교시(13:30 ~ 14:00) : 웹표준 역사(30분 / 봄눈)
• 휴 식(14:00 ~ 14:20) : 20분
• 3교시(14:20 ~ 17:00) : 웹 퍼블리셔로 살아가기 (120분 / 애틱, 비티, 루트박스, 봄눈 - 다과와 함께)
• 뒤풀이(17:00 ~ ) : 별도 진행(뒤풀이 회비 별도)
  

두번째 웹퍼블리셔 오리엔테이션 참가 신청하기

Windows7 XP Mode에서 IE6만 바로 실행하는 방법

Windows7 에서 호환성 문제로 실행되지 않는 프로그램들을 실행시키기 위해서 XP Mode를 사용하는 방법이 있습니다. XP Mode를 다운받고 설치하는 방법은 이미 많이 알려져 있기 때문에 설명을 생략하겠습니다.

XP Mode에서는 설치된 어플리케이션을 Windows7 시작 메뉴를 통해서 바로 실행시킬 수 있도록 만들어져 있습니다. 참 편하더군요. 그런데 처음부터 설치되어 있는 IE6도 바로 실행시키고 싶었는데 XP Mode의 메뉴에서는 특별한 방법을 제공하진 않더군요. 그래서 찾아봤습니다. 구글로.

방법은 간단합니다.

모든 사용자 문서 폴더내에 시작메뉴 > 프로그램 폴더(C:\Documents and Settings\All Users\시작 메뉴\프로그램) 안에 IE6 단축아이콘을 넣어주시면 됩니다.

XP Mode 바탕화면의 IE6를 시작메뉴 > 프로그램 안에 넣는다.

시작메뉴에 등록된 것을 확인해 볼 수 있다.

단축아이콘을 빠른실행 영역에 넣어두면 더욱 편하다.

이렇게 하면 IE8과 IE7(호환성모드) 뿐 아니라 IE6도 제대로 확인해 볼 수 있게 된다.

IE6 때문에 고생하는 웹퍼블리셔들이나 UI개발자분들중 Windows7을 사용하신다면 괜찮은 테스트 환경을 구축할 수 있을 것 같아서 올려봅니다.

오페라 웹표준 강좌 43장, 겸손한 자바스크립트의 원리

클리어보스에서 번역중인 오페라 웹표준 강좌의 43장 겸손한 자바스크립트의 원리가 번역 되었습니다. 검은태양님께서 수고해 주셨습니다. 감사드립니다.

• 43. 겸손한 자바스크립트의 원리
  • 소개
  • 겸손한 자바스크립트의 정의
  • 구조와 행동의 분리
  • 사용성 레이어 추가하기
    • 예제 - 입력양식의 유효성 검증
    • 원칙들
    • 예제 - 팝업
    • 예제 - Ajax
  • 깔끔하며, 의미 있는 HTML
  • 브라우저 호환성
  • 요약
  • 저자에 대해

번역된 다른 강좌들:

• 1. 웹 표준 커리큘럼의 소개와 차례
  
• 2. 인터넷과 웹의 역사, 그리고 웹 표준의 발전
• 3. 인터넷은 어떻게 작동하는가?
• 4. 웹 표준 모델 - HTML, CSS 그리고 JavaScript
• 5. 아름다운 꿈, 하지만 현실은 무엇인가?
• 8. 색 이론
• 12. HTML 기초
• 25. 접근성 기초
• 27. CSS 기초
• 39. 프로그래밍 - 정말 기초!
• 40. 당신은 자바스크립트로 무엇을 할 수 있는가?

복잡한 도구모음 정리하기

Firefox를 주 브라우저로 사용하고 있고, Web Developer와 구글 툴바를 설치해서 사용중입니다. 거기에 Juicy Studio Accessibility Toolbar나 WAVE같은 웹접근성 관련 툴바도 설치해서 사용중입니다. 그러다 보니 아래처럼 도구모음 영역이 2줄, 3줄 늘어만 가서 웹페이지를 출력해 주는 실제 뷰 영역이 점점 줄어드는 문제가 있습니다. 모니터 태평양같이 넓다면 모를까 13인치 밖에 되지 않는 작은 노트북 화면에서 이런 환경은 웹 서핑을 답답하게 만들곤 합니다.

여러 툴바를 설치해서 복잡해진 도구모음 영역

Firefox 의 보기 > 도구모음을 선택하면 설치된 툴바를 도구모음 영역에 보이거나 감출 수 있기에 필요한 경우에는 켜고, 필요없는 상황에는 끄는 방법으로 사용을 해 왔는데  '사용자 지정' 기능을 통해서 각 툴바의 기능 중 내가 원하는 것들만 한 줄에 모아둘 수 있지 않을까하는 생각이 들었습니다.

필요한 기능만 한 줄에 정리했다

역시나 가능했습니다! 위 그림처럼 도구모음에 등록된 각각의 아이콘들을 제 의지대로 넣고, 빼고 할 수가 있었습니다. 그래서 저는 단 한 줄 안에 Gmail과 번역, 북마크 모음, Web Developer의 자주 사용하는 6가지 옵션만 선택해놨습니다.

그러고 나니 정말 한결 깔끔해진 도구모음 영역을 볼 수 있었고, 웹 페이지 뷰 영역도 보다 넓어졌습니다. 간단한 팁이긴 하지만 여러 툴바를 설치해서 사용하시는 분들께 도움이 될까 하여 올려봅니다.

오페라 웹표준 강좌 12장, HTML 기초 한글화

클리어보스에서 번역중인 오페라 웹표준 강좌의 12장 HTML 기초(The basics of HTML)가 번역 되었습니다.

• 12. HTML의 기초
  • 소개
  • HTML은 무엇인가
  • HTML은 어떻게 생겼는가
  • HTML의 역사
  • HTML의 구조
  • HTML의 문법
  • 블록 요소와 인라인 요소
  • 문자 참조
  • 요약
  • 저자에 대해서

번역된 다른 강좌들:

• 웹 표준 커리큘럼의 소개와 차례
• 인터넷과 웹의 역사, 그리고 웹 표준의 발전
  
• 인터넷은 어떻게 작동하는가?
• 웹 표준 모델 - HTML, CSS 그리고 JavaScript
• 아름다운 꿈, 하지만 현실은 무엇인가?
• 색 이론
• 접근성 기초
• CSS 기초
• 프로그래밍 - 정말 기초!
• 당신은 자바스크립트로 무엇을 할 수 있는가?

오페라의 웹표준 강좌를 한글로 보기

클리어보스에서는 오페라 소프트웨어의 웹표준 강좌를 한글화하는 작업을 진행하고 있습니다.
(클리어보스는 누구나 참여할 수 있는 웹표준을 알리는 사람들의 모임입니다.)

오페라 소프트웨어의 웹 표준 강좌

2008년 여름부터 시작된 번역 작업이 빠르게 진행되고 있지는 않지만 한 장, 한 장 매듭을 지어 가다보니 오늘 현재 총 10개의 강좌가 번역되어 있습니다.

번역된 강좌는 다음과 같습니다:

• 웹 표준 커리큘럼의 소개와 차례 _{Introduction to The Web Standards Curriculum/Table of Contents}
• 인터넷과 웹의 역사, 그리고 웹 표준의 발전 _{The history of the Internet and the web, and the evolution of web standards}
• 인터넷은 어떻게 작동하는가? _{How does the Internet work?}
• 웹 표준 모델 - HTML, CSS 그리고 JavaScript _{The Web standards model - HTML, CSS and JavaScript}
• 아름다운 꿈, 하지만 현실은 무엇인가? _{Web standards – beautiful dream, but what's the reality?}
• 색 이론 _{Colour Theory}
• 접근성 기초 _{Accessibility basics}
• CSS 기초 _{CSS basics}
• 프로그래밍 - 정말 기초! _{Programming - the real basics!}
• 당신은 자바스크립트로 무엇을 할 수 있는가? _{What can you do with JavaScript?}

대부분 번역 초안의 모습으로 한글화가 매끄럽지 못한 부분도 있고, 일부 오역이 있을수도 있으나 읽기에는 크게 어렵지 않은 수준입니다. 번역 작업에는 지금까지 16분이 참여해 주셨고, 현재는 저를 포함해 세 분 정도가 번역을 진행하고 있습니다.

아직도 많은 강좌들이 번역되지 못한채 남아 있는 상황이고, 기 번역된 문서들도 매끄러운 한글화를 위해서 교정 및 퇴고가 필요합니다. 이에 번역 작업에 함께 하고 싶으신 분들은 아무때라도 제게 문의를 해 주시면 감사하겠습니다.

클리어보스 개편 안내

웹표준을 알리는 사람들의 모임(Web Standards Evangelist Forum)인 클리어보스의 웹사이트가 개편을 했습니다.

개편된 클리어보스 웹사이트

이번 개편 작업에서는 제대로 운영이 되지 않았던 팀블로그와 포럼 게시판을 폐쇄하고, 위키 하나로 통합되었습니다. 다시 맨 처음으로 돌아간 셈인데요. 그래도 처음보단 위키의 콘텐츠가 많아져서인지 그런대로 모양새가 나와준 것 같습니다.

현재 위키를 통해서 제공되는 콘텐츠는 크게 4가지로, 클리어보스 소개 및 활동 내용, 오페라 웹표준 강좌 한글화 문서, 웹퍼블리셔 오리엔테이션(세미나) 자료 그리고 팀블로그를 통해서 진해되었었던 몇 가지 캠페인 이벤트를 옮겨 담았습니다.

디자인적으로는 기존 스킨이 전체적으로 밝고, 대비가 적어 글자를 읽기에 다소간 어려움이 있었던 것을 해결해보고자 배경 부분과 콘텐츠 부분의 대비를 강하게 가져가는 디자인 소스를 가져와 Dokuwiki에 적용했습니다.

아울러 작은 부분이지만 실험적으로 HTML5의 HEADER, FOOTER, ARTICLE, SECTION 등 일부 새로운 요소들을 사용하여 적용해 보았습니다. 기회가 되는대로 HTML 5 의 새로운 요소, 속성들을 적용해 보고, CSS 3를 적용해 볼 수 있는 데모 사이트로 만들어볼 생각입니다.

매번 욕심대로 운영이 되지 않아 어쩔 수(?) 없이 개편 작업을 하게 되는 것 같아서 한 편으로 마음이 편하지는 않지만 조금 더 열심히 그리고 꾸준하게 이어나가고 싶은 마음으로 개편 작업을 했습니다.

덧붙임. 어쩌면- 아마도, 조만간 페이지오프도 스킨이 변경될지 모르겠습니다. :)

HTML 5와 CSS 3로 웹 사이트 만들기 소개

Smashing Magazine에서 Enrique Ramirez 의 글 'Coding A HTML 5 Layout From Scratch'을 통해서 HTML 5 와 CSS 3를 적용한 웹사이트 개발 데모를 소개한 것이 있어 소개해 드립니다.

HTML 5와 CSS 3를 이용해서 만들어진 웹 페이지

데모 디자인을 바탕으로 HTML 5 를 이용해서 마크업을 하고 스타일시트는 CSS 3를 사용하고 있어 이를 공부하고자 하시는 분들에게는 좋은 예제가 될 것 같습니다.

완성된 데모 페이지는 여기에서 보실 수 있습니다.

Project Deploy로 웹사이트 개발 준비 작업을 쉽게!

신규 웹사이트 개발을 맡게 되면 가장 먼저 하는 작업 중 하나가 작업 디렉토리를 생성하고, 이미지와 플래시, CSS, Javascript와 같은 공통 파일들을 저장하는 별도의 디렉토리들을 구성하는 작업이다. 

다음으로 HTML 문서의 문서형(Doctype)을 정의한 프로토타입 HTML 파일을 생성하고, 초기화를 위한 CSS 파일도 생성한다. 혹시  jQuery를 기본 자바스크립트 프레임워크로 사용한다면 jquery.js 파일도 jquery.com에서 내려 받아와야 할 것이다. 거기에 jQuery기반의 라이트박스(thickbox) 같은 라이브러리를 이용하려면 다시 Thickbox 웹사이트를 찾아가 라이브러리 파일을 내려 받아와야 할 것이다.

Project Deploy는 이러한 단순하지만 귀찮게 여겨지는 작업을 손 쉽게 처리해주고 있다.

Project Deploy에서는 Doctype, CSS 적용 방식, jQuery 사용 유무 등을 한 번에 처리한다.

문서형과 CSS, jQuery사용 유무를 결정하고, 이미지와 플래시 디렉토리 생성을 결정한 뒤에 deploy!를 클릭하면 압축파일을 하나 내려 받을 수 있다. 내려 받아진 압축 파일을 원하는 디렉토리에 풀어 주면 다음과 같이 필요한 디렉토리와 파일들이 갖추어지게 된다.

원하는 디렉토리 구조와 파일들을 갖추었다.

샘플로 포함된 HTML 문서에는 다음과 같이 사용자가 선택한 CSS와 Javascript 파일들이 모두 포함되어 있으며, 문서형도 정확하게 정의되어 있다. 

샘플 HTML 내용

이처럼 Project Deploy는 개발자가 원하는 기초 작업을 간편하게 처리할 수 있도록 도움을 주고 있다. 하지만 모든 프로젝트와 위와 동일한 디렉토리 구조와 자바스크립트 파일을 요구하지는 않을 것이며, 자바스크립트 프레임워크가 jQuery뿐만이라는 점도 jQuery이외의 프레임워크를 사용하려는 개발자들에게는 그다지 매력적이진 않을 것 같다. 

프로젝트 성격이나 기획에 따라서 디렉토리 구조가 다를 수도 있고, 심지어 개발자 취향에 따라서도 다를 수 있다. 원하는 자바스크립트 프레임워크가 다를 수도 있고, CSS를 초기화 하는 방식도 이것과 다를 수 있다. 그래도 jQuery프레임워크를 사용하려는 개발자에게 Thickbox등 주요 라이브러리를 쉽게 포함하여 별도로 파일을 구하는 수고를 덜어주는 것은 마음에 들었다. 

Project Deploy는 조금 더 다양한 선택 사항을 갖춘다면 지금보다는 이를 사용하려는 개발자들이 늘 것 같고, 개발자들은 이 서비스를 이용할 수도 있겠지만 축적된 경험으로 자신만의 초기 작업 디렉토리 구조와 파일들을 정리해 놓는 수고가 있었으면 좋겠다.  

맥에서 윈도우의 화면 나누기 기능 사용하기

맥 OSX를 사용하면서, 특히 자체 화면 분할(Split) 기능이 없는 Espresso를 사용하여 코딩을 하면서 가장 아쉬웠던 점이 바로 윈도우의 화면 분할 기능이었다.

하지만 이도 Irradiated Software의 TwoUp을 사용하면 해결할 수 있다.

TwoUp은 선택된 창을 상하좌우 어느 한 쪽 방향으로 정확히 1/2사이즈로 맞추어 배치시켜 주는 기능을 한다.

화면을 좌우로

TwoUp을 설치한 후에 환경설정 > 손쉬운 사용에서 '보조 장비에 대한 접근 활성화'를 선택해 주면  사용할 수 있다.

환경설정 > 손쉬운 사용에서 '보조 장비에 대한 접근 활성화'를 선택해 준다

사용법은 Command + Option + Control 키를 함께 누른 상태에서 방향키를 눌러주면 된다.

TwoUp 단축키는 command, option, control키를 함께 누른 상태에서 방향키를 누르면 된다

다음은 Espresso에서 두개의 작업창을 활성화 시킨 후 하나는 좌측에 다른 하나는 우측으로 배치시킨 결과이다. 윈도우처럼 정확하게 화면의 반을 나누어 배치된 것을 볼 수 있다. 윈도우7에서처럼 창을 화면 끝으로 이동시켰을 때 자동으로 화면 나누기 기능까지는 안되지만 그럭저럭 편리함을 더할 수 있는 프로그램이다.

Espresso를 수직 배열한 화면

파이어폭스 검색 사이트 관리를 이용한 편리한 W3C 명세서 찾아보기

파이어폭스의 검색 사이트 관리 기능을 이용하면 W3C의 표준 명세서들을 조금 더 쉽게 검색해 볼 수 있습니다.

검색 사이트를 쉽게 추가할 수 있는 Mycroft Project에 접속하여 'W3C'를 검색하면 'W3C (3rd party - Google Lucky)'가 나타납니다.

Site Name / URL에 'W3C'라고 입력하고 검색을 합니다

W3C (3rd party - Google Lucky)가 나타납니다

사용자는 단지 클릭만 하면 이것을 자신의 파이어폭스 검색 사이트 목록에 추가할 수 있습니다.

검색 사이트를

파이어폭스 우측 상단 검색 사이트 목록에 'W3C'가 추가되었음을 확인할 수 있습니다.

파이어폭스 검색 사이트 목록에 등록되었습니다

'W3C'를 검색 사이트로 지정하고, 찾고 싶은 내용을 입력합니다. 저는 'TABLE'을 입력해 보았습니다.

찾고자 하는 내용이 새로운 탭에 정확하게 나타납니다.

HTML 4.01 명세서 뿐만 아니라 CSS 2.1과 DOM level 1/2를 포함하고 있어 조금 더 쉽게 내용을 찾아볼 수 있습니다.

Mycroft Project 에는 이 외에도 SitePoint Reference, HTML Dog, WDG HTML Help, HTML - CSS - JS, W3Schools 등 여러 검색 사이트들이 등록되어 있습니다.