전 세계적으로 웹 표준에 대한 인식이 관심을 넘어 당연시 되는 시대가 도래했습니다. 일부 웹 리더들에 의해 주도되던 웹 세상이 이제는 웹 본연의 목표처럼 누구나가 지켜야 할 약속으로 인식되고 표현되고 있는 것이죠.
하지만 애석하게도 아직까지 대부분의 국내 웹 사이트 개발 현실은 그렇지 못하고 있습니다. 새로운 변화의 물결에 동화되지 못하고, 과거의 오래된 관습을 답습하고 있습니다.
구조와 표현을 분리하여 사이트를 개발하게 되면 많은 이점이 있습니다. 만드는 사람의 입장에서는 보다 사이트 관리와 수정이 쉬워집니다. 반면, 보는 사람들의 입장에서는 정보를 쉽고 정확하게 얻을 수 있습니다.
이 모든 것들이 웹 표준이라는 약속을 지켰기 때문에 가능해지는 것이죠.
즉, 웹 표준을 지킨다는 것은 만드는 사람이나, 보는 사람 모두에게 이로운 것입니다. 단지 국내에서만 보여질 사이트라면 기존의 관습을 따라도 무방하다고 생각하시는 분들. 생각하는 범위를 보다 넓혀보세요. 웹은 일부 국한된 범위에서 제공되는 서비스가 아닙니다. 모든 이들이 아무런 제약 없이 사용하고 얻을 수 있는 세상을 말하는 것이지요. 단지 몸 값을 올리기 위해서 할 수 없이 공부하는 것이 아니라, 웹을 만들어가는 사람으로서 “세상을 이롭게 만들기 위한 책임과 의무, 사명감을 배우는 것이라 생각하시길 바랍니다. 이를 통해 비로소 표현의 범주에서 허덕이는 디자이너(Decorator)를 넘어 정보를 해석하고 보다 인간을 위해 표현하는 진정한 디자이너(Designer)로 미래를 맞이하실 수 있을 겁니다.
강의목표
웹에 대해 바로 알고, 웹이 기본적으로 갖추고 지향해야 할 목표에 대해 알아가는 것부터 시작합니다. 일정 소수를 위한 것이 아닌, 인류 전체를 위한 디자인을 하기 위해 과거의 것과 호환되며 미래 지향적인 웹 디자인을 알아봅니다. 의미를 담은 구조를 XHTML언어로 마크업(markup) 해보고, 그 마크업을 표현(Presentation)하는 역할을 CSS 언어를 통해 익혀봅니다. 단지 툴을 익히고, 언어를 익히는 범주를 벗어나서 약속을 이해하고 그것을 실전에 접목할 수 있는 강한 마음을 배워봅니다.
강의대상
본 강의는 드림위버가 아닌, EDITPLUS를 이용한 하드코딩 트레이닝 과정입니다. XHTML과 CSS로 웹 표준 사이트 제작에 관심 있는 분 기본기를 탄탄히 다지면서 웹 디자인 실력을 높이시고 싶으신 분 현재 드림위버(Dream Weaver)로 웹사이트를 디자인 및 html코딩 하시는 분 향후 대규모 웹 에이전시 및 포털 업체에서 중요한 위치에서 일하고 싶은 분 웹 디자인에 관심이 많고, 열정을 지니신 분 웹 퍼블리싱 제작에 익숙하지 않은 웹 디자이너 웹 디자인을 희망하는 예비 웹 디자이너
강의교재
CSS 비밀 매뉴얼(- 감추고 싶은 나만의 비밀 노트)
데이빗 소여 맥팔랜드 | 김지원 |
한빛미디어 | 2007.03.02
웹 표준의 역사와 개념을 이해하여 목적성과 앞으로의 방향성을 잡아봅시다. Web2.0, 웹 표준, 웹 접근성, 웹 관리의 효율성을 고려한 디자인의 개념은 무엇이고, 왜 필요한 것일까요? 파이어폭스, 오페라, 사파리, 크롬 같은 웹 표준 브라우저를 사용해 봅시다. 웹 표준 문법인 XHTML과 CSS의 특징을 살펴 봅시다.
2강
웹 문서의 시작은 HTML 마크업을 의미 있게 만드는 것에서부터 입니다.
HTML을 이제야 올바르게 사용할 수 있게 되었습니다. 기존의 잘못된 관습은 HTML 문서 내에 구조뿐 아니라, 표현까지 함께 담아 표현했습니다. 이로 인해 문서는 무거워지고 HTML 본연의 역할에 충실하지 못했던 거죠. 하지만 이제는 HTML 본연의 역할을 제대로 주어줄 수 있습니다.
3강
CSS 선택자(selector)를 통해 문서에 꽃을 피울 수 있습니다.
CSS에서 제공하는 다양한 선택자를 익혀 마크업을 디자인(표현) 할 수 있습니다. 요소 선택, 요소 그룹 선택, 요소 내 포함된 하위 요소 선택, 특별한 인식코드를 부여한 요소 선택, 모든 요소 선택 등등 다양한 선택자를 알아 봅니다.
4강
웹 접근성이 무엇인지 이해해 봅시다. (특강 : 시각장애인 복지관 백남중 팀장님)
마우스 없이 키보드만으로 컴퓨터를 활용하려면 어떻게 해야 할까요? 한 손을 사용할 수 없다면 컴퓨터를 어떻게 사용해야 하나요? 소리를 들을 수 없다면 에러 비프 음을 어떻게 확인하나요? 화면을 제대로 볼 수 없다면 어떻게 해야 하나요? 마우스가 고장 났다면 어떻게 컴퓨터를 해야 하나요?
5강
CSS 상자구조(Box Structure)를 통해 문서에 구성력을 갖출 수 있습니다.
웹 브라우저는 문서 내 모든 요소를 텍스트, 이미지 등을 포함한 작은 상자로 취급합니다. 내용을 둘러 싼 내부 공간 및 외부 공간 그리고 테두리 영역을 박스구조를 통해 알아봅니다.
6강
CSS 위치 지정(Positioning)을 통해 문서의 레이아웃(Lay-out)을 만들어 봅니다.
웹 표준에서는 무의미한 테이블을 대신하여, 레이아웃을 만들기 위한 전용 속성을 사용합니다. 화면 표시 모델 : block-level element 속성과 inline element 속성에 대해 알아봅니다. 상대적인 위치 지정 relative positioning 절대적인 위치 지정 absolute positioning 방법을 알아봅니다.
7강
요소 부유(float)를 통해 문서의 레이아웃(Lay-out)을 만들어 봅니다.
Positioning 중에서 float 방식을 이용하여 다양한 레이아웃을 만들어 낼 수 있습니다. 2단, 3단 레이아웃을 만들어 봅니다. 웹 문서 유동적인 브라우저 창의 가운데에 항상 배치시켜 봅니다. 글자 비례 형 레이아웃을 만들어 봅니다. 글자 비례 + 화면 비례 혼합형 레이아웃을 만들어 봅니다. 글자와 화면 크기에 따라 늘어나는 이미지를 제작해 봅니다.
8강
스크립트의 도움 없이 CSS만으로 롤 오버 효과가 있는 내비게이션을 만들어 봅니다.
내비게이션이 만들어지는 원리를 이해하고 구현해 봅니다. 링크 스타일 기초, 점선으로 링크 밑줄 만들기를 알아봅니다. 이미지로 링크 밑줄 만들기, 링크 유형 별 스타일 지정하기를 알아봅니다. 링크로 버튼처럼 동작하게 하기, 링크로 이미지를 사용한 roll Over버튼을 만들어 봅니다. FIR 방법을 이용한 효과, CSS 툴 팁을 알아봅니다. ul, li의 마진, 패딩 비교를 통해 각 역할을 익혀봅니다. 세로 및 가로형 네비게이션바를 만들어 봅니다.
9강
마크업에서 <form>, <table>을 제대로 사용해 봅시다!
테이블 태그를 사용하지 않고 <form>을 배치하는 방법과 <table> 태그를
제대로 사용하는 방법을 익혀봅니다. 유효성 검사를 통해 표준 문서로서의 완성도를 높여 봅니다. 정렬하기 까다로운 <form>을 사용해 봅니다. <table> 태그도 의미를 살려서 사용해 봅니다. markup 용량을 최적화 시켜봅니다.
10강
~
14강
나도 이제 웹 표준을 준수하여 사이트를 제작할 수 있습니다.
이젠 배운 것을 토대로 웹 표준을 준수하고 웹 접근성을 살린 가상의 사이트를 만들어 봅니다. 의미를 살린 마크업 작성을 통해 시작해 봅니다.
15강
나도 웹 접근성 마크를 받을 수 있는 사이트를 만들 수 있을까요?
생각만큼이나 쉽지는 않지만 그래도 만들어 보니 자신감이 생깁니다. 웹 표준 사이트 실습 KADO-WAH 사용하여 평가하기
※ 본 강의는 수강생에 따라 커리큘럼이 일부 변경되거나 사정으로 인하여 폐강될 수 있습니다.
※ 본 강의내용은 교육 기획자 및 강사와의 협의 없이 무단으로 사용될 수 없습니다.
※ 무단 사용시 저작권 침해로 인해 처벌 받을 수 있음을 알려드립니다.
※ 기타 문의 및 과정 상담 : 담당 매니저 yamoo9@ejungle.co.kr
강사프로필
차영신
(현) Tag & Brace 대표 (http://tagnbrace.com)
(전) 한국미래정보개발 WEB 디자인 팀장
(주)LG 채널아이 교육컨텐츠 개발
한국관광공사 면세점 쇼핑몰 개발
(주)매일경제TV(부동산전문방송) RTVplus 개발
(주)쌍용 게임쇼핑몰 조이파크 개발
(주)포스코 관리시스템 사이트개발
(주)LG화학 사이트 개발
증권업협회 APEC 유치사이트 개발
COEX 사이트 개발
강의경력 디지털조선 플래시 강의
연세 디지털 헐리우드 플래시 강의
서울대학교 중앙 교육연구전산소 플래시 강의
한국정보기술교육원 플래시 강의
국민대학교 웹디자인 강의
LG EDS E-Biz 개발자과정 플래시/드림위버 강의
매크로미디어 Internet & Multimedia 에반젤리스트
제일씨앤씨 웹디자인강의
저서
웹디자이너 웹마스터를 위한 드림위버& 웹디자인 고급 활용 할수있다! 특별판
6000원으로 해결하는- 환상적인 웹 애니메이션을 위한 플래시 MX 2004
입문
포인트안내
포인트는 과정 종료후 마이스터디에 있는 강의평가 버튼을 누른 후 설문조사에 참여하시면, 포인트가 가용 포인트로 전환됩니다. (참고로 실제 사용할 수 있는 포인트를 가용 포인트라고 칭합니다.) 또한, 강의평가 설문조사 사항은 앞으로의 교육 운영에 적극 반영 하도록 하겠습니다. ☞ 강의평가 바로가기
등록안내
과정 등록은 온라인으로 신청하시면 됩니다. 결제는 직접 방문, 무통장입금 또는 카드결제가 가능합니다. 무통장 입금으로 결제를 하실 경우 반드시 신청자 이름으로 입금하셔야지만 확인이 가능합니다. 고용보험환급 과정은 제출 서류 원본을 수업 시작 이틀전까지 아카데미에 제출하셔야 합니다. 서류 제출이 이루어 지지 않으면 환급받으실 수 없습니다. ☞ 자세한 내용 보기 등록확인과 취소는 마이스터디에서 확인 하실 수 있습니다. 계산서가 필요하신 분은 발급 신청란에 내용을 정확하게 기입해 주셔야 하며, 사업자 등록을 하신 분은 회사 찾기로
쉽게 입력하실 수 있습니다. 환불 규정은 해당 페이지를 참고하시기 바랍니다. ☞ 환불규정 보기 기타 문의 사항은 전화 02-3474-1511, 3474-1504 메일 info@ejungle.co.kr
웹의 미래, 웹 표준 디자인을 위한 XHTML+CSS
교육기간 :
2009년 3월 25일 ~ 2009년 4월 27일
사 : 차영신
본 강의는 드림위버가 아닌, EDITPLUS를 이용한 하드코딩 트레이닝 과정입니다.
