페이지오프: CSS3

레이블이 CSS3인 게시물을 표시합니다. 모든 게시물 표시

2009년 10월 12일 월요일

웹표준 컨퍼런스 CSS Nite 한국 첫 개최!

CSS Nite in Seoul 실행위원회와 (유)리그래피가 함께 주최하고, 한국 마이크로소프트와 태그앤브레이스가 협찬하고, 하드코딩하는 사람들, CSS Design Korea, Clearboth가 후원을 하는 웹표준 컨퍼런스 CSS Nite in Seoul Vol.1이 오는 11월 21일 토요일 삼성동 한국 마이크로소프트 세미나룸에서 개최됩니다.

CSS Nite는 나고야, 오사카, 아오모리, 후쿠오카, 오키나와, 아키타, 삿포로, 후쿠이, 센다이, 히로시마 등 일본의 여러 도시에서 지금까지 총 113회의 컨퍼런스를 통해 18,191분이 참여한 가장 규모가 큰 웹표준 컨퍼런스입니다.

이번 기회를 통해 CSS Nite는 한국과 일본 양국간의 웹제작들간의 교류와 정보 공유를 위해 자리를 마련했고, 그 시작을 서울에서 하고자 합니다.

이번 첫번째 컨퍼런스를 위해 국내에서도 웹표준 교과서의 저자로 잘 알려져 있는 마시코 다카히로씨께서 멀지 않은 미래에 표준이 될 HTML5와 CSS3에 대한 발표를 해 주시고, CSS Nite 의 주최자였던 타가노 마사히로씨께서 일본 웹환경과 제작 프로세스에 대한 강연을 해 주시기 위해 한국을 방문하시게 되었습니다. 여기에 NHN 웹표준화팀의 팀장님으로 계신 박태준 팀장님께서 오랜 경험과 노하우를 통해 얻은 HTML 개발 프로세스 방법론을 소개해 주실 것입니다.

행사내용과 프로그램

행사내용

구분	내용
일정	2009년 11월 21일 12:30-18:00
장소	삼성동 포스코센터 서관 5층 한국MS
주최	CSS Nite in Seoul 실행위원회, 유한회사 리그래피
협찬	한국 마이크로소프트, 태그앤브레이스
후원	하드코딩하는 사람들, CSS Design Korea, Clearboth
모집인원	150명 (초대 인원 포함)
등록비용	사전 등록：25,000원 / 현장 등록：30,000원
발표자	타가노 마사히로 (주식회사 스위치 대표 이사) 마시코 다카히로 (주식회사 사이바가덴 대표 이사) 박 태준 (주식회사 NHN 웹표준1팀팀장)

프로그램

시간	발표자	내용
12:30 [30min]		입장개시
13:00 [15min]	이 유미	오픈닝,행사 소개
13:15 [45min]	박 태준	웹표준을 기반으로 한 HTML개발 프로세스
14:00 [60min]	타가노 마사히로	일본의 웹표준현실과 제작 프로세스
15:00 [10min]	한국 마이크로소프트	라이트닝 토크1
15:10 [15min]		휴식
15:25 [60min]	마시코 다카히로	미래의 웹표준으로서의 HTML5과CSS3
16:25 [10min]	태그앤브레이스	라이트닝 토크2
16:35 [15min]		휴식
16:50 [60min]	박태준, 박중석, 타가노 마사히로, 마시코 다카히로, 미츠코시 유스케	패널토의와 질의응답
17:50 [10min]		경품 추첨
18:30 [60min]		교류파티(무료)

사전등록

사전등록은 온오프믹스를 통해서 실시하고 있습니다. 아울러 이번 행사는 유료로 진행되고 있습니다. 등록금은 30,000원이며, 사전 등록시 25,000원으로 등록을 하실 수 있습니다. 사전 등록이 조기에 마감되는 경우 현장 등록은 받지 않습니다.

배너 등록하기

CSS Nite in Seoul Vol.1 공식

CSS Nite in Seoul Vol.1 블로그 배너(가로 170px)

CSS Nite in Seoul Vol.1 블로그 배너(가로 200px)

CSS Nite in Seoul Vol.1 (가로 800px)

CSS Nite in Seoul Vol.1 (590x390)

CSS Nite in Seoul Vol.1 (가로 590px)

2009년 10월 6일 화요일

웹킷 기반에서 CSS3 맛보기

WidgetPad에 웹킷 기반의 웹브라우저에서 텍스트와 관련된 CSS3 속성들을 미리 맛볼 수 있는 위젯을 만들었네요.

CSS3 Generator

'Hello World' 라는 텍스트에 Rounded Corner, Opacity, Box Shadow, Text Shadow, Reflection, Text Stroke, Transform등 7가지 CSS3 속성을 적용해 보고 확인해 볼 수 있습니다.

하단에는 적용된 스타일의 속성과 값이 나타나는데 웹킷전용 속성으로 처리되고 있을을 볼 수 있습니다. W3C의 스펙에 따른 표준 속성들은 아니지만(파이어폭스등 타 브라우저에서도 위와 유사한 전용 속성을 이용해서 구현될 수 있다) 앞으로 사용될 CSS3의 특징을 미리 살펴볼 수 있는 정도로 참고하기에는 괜찮은 것 같습니다.

위 위젯을 구현한 마크업과 스타일시트, 자바스크립트에 대한 코드는 소스보기에서 보실 수 있습니다.

2009년 8월 10일 월요일

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를 사용하고 있어 이를 공부하고자 하시는 분들에게는 좋은 예제가 될 것 같습니다.

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

2009년 3월 10일 화요일

웹 페이지에 숨겨진 메세지를 찾아라!

앞으로 웹사이트를 통해서 중요한 단서가 되는 메세지를 숨겨 놓는 트릭을 걸 수 있게 될 것 같다.

다음은 IDG에 실린 IE8에 대한 기사 중 일부다. 만약 지금 인터넷 익스플로어를 제외한 파이어폭스, 오페라, 사파리, 크롬 등의 최신 버전을 사용중이라면 Ctrl + A 를 눌러보자.

지난 해 인터넷 익스플로러는 시장점유율을 잃었지만, 모질라의 파이어폭스, 애플의 사파리 그리고 새로 생긴 구글의 크롬 같은 브라우저는 날로 인기를 더해가고 있다.

...

온라인에 등장하는 비즈니스 애플리케이션이 많아지면서 브라우저의 보안이 IT 관리자에겐 최고의 우선순위가 되었고, IE와 파이어폭스를 두고 어떤 브라우저가 더 안전한가에 대한 논쟁은 아직도 진행형이다.

윈도우제품관리 VP인 마이크 내쉬는 최근 IE8에 포함된 새로운 보안과 사생활 보호 특성을 논의한 바 있다. 마이크로소프트는 이런 특성들이 기업 사용자의 생산성 및 해커로부터의 안전을 지켜주길 바라고 있다.

...

내쉬는 “과거에 웹페이지에 버그가 있어 장애가 발생하면 브라우저 전체 또는 운영체제마저 장애가 발생할 수 있었다”라면서, “IE8에서는 장애가 난 탭이 자동으로 복구된 후, 장애가 발생하기 전 사이트로 돌려놓는다”라고 설명했다.

스마트스크린 필터

해커와 악성 사이트가 바이러스를 보내고 개인정보를 훔치는 방식이 날로 복잡해지면서 이를 퇴치하기 위해 스마트스크린 필터가 IE8에서 보강되었다.

...

수수께끼가 풀렸는가?

아주 재밌지 않은가? 이것이 가능한 이유는 IE를 제외한 주요 브라우저의 최신 버전들이 대부분 CSS 3의 스펙을 일부 지원하고 있기 때문인데, 그 중에 문자열을 선택하는 ::selection 속성 때문이다. 이 속성을 이용하면 사용자가 특정 문자열을 선택했을 때 하이라이트 되는 스타일(글자 색과 배경 색 등)을 지정할 수 있게 된다.

p::selection { background:#000;color:#000; }
p::-moz-selection { background:#000;color:#000; }
p span::selection { background:#fff;color:#000; }
p span::-moz-selection { background:#fff;color:#000; }

추신 / 이 트릭은 Ph.Creative 의 글 CSS Trick: Hidden Messages에서 참조한 것입니다.

페이지오프