[처음 배우는 HTML/CSS: 작동원리 깨우치기]

강의에
들어가며

웹표준, 왜 디자이너가 배워야 하는가?

좋은 웹 디자인은 HTML/CSS에 대한 충분한 이해로부터 시작됩니다!
현재의 웹 사이트들은 대부분 블슈어를 디자인하는 것처럼 픽셀을 기반으로 디자인 되고 있습니다.

하지만 웹페이지는 적게는 몇십페이지 많게는 수만페이지가 될 수 있으므로,
규칙을 기반으로 디자인 되어야 하며 이렇게 만들어진 웹페이지야말로 웹다운 큰 힘을 갖게됩니다.

그러므로 웹디자이너는 크리에이티브한 시각 언어를 규칙 안에 담아 내어
현장감 있는 디자인을 만들어 낼 수 있어야 합니다.

자세히
들여다보기

왜 HTML/CSS 과정인가요?

현재의 웹 트랜드는 사용성과 접근성을 위해 코드 친화적인 디자인이 절대적으로 필요한 시기입니다.

왜냐하면 TV방송, 이북, 어플리케이션, IOT등 모든 미디어들이 웹으로 연결되고 있기 때문입니다.
포토샵 스킬에만 의존하고 시각적 트랜드에만 충실한 디자인은 살아남을 수 없습니다.
웹 어플리케이션까지 소화할 수 있는 기술과 비주얼이 컨버전스된 그런 작업이 필요합니다.

이렇듯 많은 디자인회사에서 여러가지 이유로 코드를 다룰 줄 아는 디자이너를 찾고 있습니다.

강의
주요 특징

어떻게 제대로 배울 수 있을까요?

단순히 아는 것 VS 할 수 있는 것

사실 HTML/CSS는 쉽게 전문가가 아니더라도 사용할 수 있도록 보편성을 철학으로
설계된 언어입니다. 하지만 프로 작업자로서 실제 디자인을 코드로 만들 수 있게
되기까지 배우기는 쉽지 않은 것이 사실입니다.

머리로 이해되고 손으로 익숙해져 스스로 응용할 수 있을 만큼 친절하게
단계별로 학습할 수 있는가이드가 많지 않은 것도 그 이유중 하나입니다.
보통의 책과 강의는 속성 설명 위주의 내용이 대부분이기 때문입니다

그래서 본 강의는 단순한 속성 위주의 강의가 아닙니다.
깊이 있고 폭넓은 이해와 시야를 바탕으로 체계적이고 단계적인 훈련을 통해
실무에서도 응용 할 수 있는 참 능력이 되도록 하는 것이 그 목표입니다.

앞으로의 모든 미디어는 소프트웨어, 텔레비전, 방송, 그리고 이북에 이르기까지
모든 미디어를 HTML/CSS가 통합해 나갈 기세입니다.
이것은 기존의 북 디자인, 웹 디자인 그리고 3D의 각각의 아웃풋이
웹이라는 하나의 아웃풋으로 통합된다는 뜻입니다.

그렇기에 이 시리즈는 디자이너 분들에게 HTML/CSS를 마음껏 주무를 수 있는
디자인 도구로 만들어 드리겠다는 목표를 가지고 있으며,
HTML/CSS에 대해 좀 더 진지하고 의욕적으로 배우고 싶은 분들을 위해 만들어지게 되었습니다.

전 과정에 걸쳐 실무에서의 강사의 경험을 최대한 살리고
기존의 책이나 강의의 기능 명세를 알아보는 방식의 단순한 학습이 아닌
통합적인 이해를 바탕으로 머리와 손으로 익혀질 수 있는 배움이 될 수 있도록 교육방식을 디자인하였습니다.

PROFESSIONAL

10년 이상의 실무 경력과
교육 경험을 가진 최고의 강사

EASY

처음 시작하는 분도 충분히
이해할 수 있도록 쉬운 설명

VISUAL

어려운 개념 및 원리를
시각적인 방법을 통해 설명

INSPIRE

강사의 실무 경험에서 얻은
기술과 디자인의 인사이트 경험

TRAINING

현장에서 사용되는 예제 및 실습을
통한 진정한 실무 훈련

PORTFOLIO

구직 및 이직에 필요한 수준 높은개인별 포트폴리오 제작

강의
커리큘럼

Understanding 시리즈의 기초편에서는
무엇을 다루나요?

Understanding 시리즈의 가장 처음 과정인 기초편은 디자이너가 코드를 배워야 하는
길고도 먼 여정에 첫 단추와 같습니다. HTML/CSS는 생각만큼 배우기가 수월하지가 않습니다.
일반적으로 최소 수 개월 이상이 걸립니다.
시간이 많이 걸리는 가장 큰 이유는 처음 코드를 접하므로 낯설기 때문입니다.
뭔가 의도하는 것을 코드를 이용해서 명령을 내린다는 것은 막연한 게 아닐 수 없습니다.
그래서 처음 배우는 분들에게 있어 가장 중요한 점은 브라우저 입장에서 생각하는 훈련입니다.

보통 HTML/CSS가 능숙한 경우 머리속으로 연상(생각)을 한 후 코드로 옮기게 되는데,
이렇게 디자인된 작업물을 어떻게 코드로 말할 지를 생각하는 훈련이 가장 중요합니다.
코드가 익숙해 지기까지 시간이 많이 필요한 이유는 이런 연상과 생각이 수많은 시행착오를 통해서
알아지기 때문입니다. 하지만 언어를 최초로 배우는 과정에서 브라우저 입장에서 이해하고
머리속으로 그릴 수 있는 연습을 한다면 좀 더 쉽고 재밌게 익숙해지는 과정을 만들 수 있고
상당한 시간을 줄일 수 있습니다.

기초편에서는 HTML과 CSS에 대한 기본적인 이해와 사용법을 그림과 설명을 통해 충분히 이해하고,
예제를 통해서 개념을 확실하게 만들게 됩니다.
디자이너가 웹표준을 배우는 데 있어서 가장 어려운 부분인 float을 이용한 배치를
완전히 이해하는 것에 최종적인 포커스를 맞추고 있으며, 이를 통해 막연하고 우연히 되어졌던
작업이 명확하게 되고 작업에서 왜 이렇게 깨져서 보이는 지도 이해하게 됩니다.

세부 커리큘럼

언더스탠딩 웹표준 실무 기초

[01]
개념과 준비

예술과 기술. 융합의 시대
미디어와 시멘틱웹
웹표준 html/css 소개
웹타입셋팅란?
어떻게 익힐것인가? (why & doing)
준비하기 (브라우저, 에디터, 기타도구, 도서, 아티클, 시간사용과 연습방법)

[02]
시멘틱 마크업

html 기초 문법
hello world!
제목 (heading)
문장 (pragraph)
목록 (list)
이미지 (image)
그룹핑 (grouping)
인용 (quotation)
부가정보 (additional)
강조 (strong)
링크 (link)
페이지정보 (page info)

[03]
기초 스타일링

HTML에 CSS 적용하기
CSS 기초 문법
reset.css 준비하기
id와 class 사용하기
기초선택자, 가상선택자
font 스타일링
text 스타일링
단위
상속
우선순위
속성선택자

[04]
박스 다루기 1

박스로 생각하기
박스의 성질
박스의 종류
넓이와 높이
여백과 간격
선긋기
배경색과 배경이미지
overflow, display, visibillity

강사에
관하여

정을수

(현) 프리랜서 디렉터 및 디자이너
(현) 봄아카데미 웹표준 강사
(전) 펜타브리드 수석 디렉터
(전) 메가존 웹표준화 팀장

2014~현재, Vom Academy 웹표준 강의
2013~현재, (사)한국인터넷전문가협회 웹표준 강의
2011~2014, 아카데미정글 웹표준 강의
2013. 한국디자인진흥원 국가기간전략산업직종
UX/UI 디자인 4기 교육
2013. Godpeople.com 디자인팀 웹표준 교육
2013. 에스원 웹사이트 웹접근성 고도화 (디렉터)
2012. 에스원 웹사이트 구축 (PM)
2012. 현대 아산정주영 웹사이트 구축 (PM)
2012. 현대자동차국내판매 웹사이트 구축 (UI 디렉터)
2012. 삼성HSPOSM 웹사이트 구축 (PM)
2012. 코스콤 웹접근성 고도화 (PM)
2011. U+ 통합웹사이트 구축 (UI개발 PL)
2010. 신한카드 웹사이트 (UI개발 PL)
2009. 삼성모바일닷컴 웹사이트 (UI개발 PL)

강의
뒷 이야기

이런 시간이 되었어요

"안녕하세요 선생님. 저 맨 앞에서 들었던 학생이에요. 개념이 제대로 잡히는 것 같아서 너무 만족스러워요.
특히 플롯 개념을 잘 알게 되어서 기뻐요 ^^ 항상 좋은 수업 전달해 주셔서 감사합니다."

"마냥 어려운 외계어로만 보이는 코딩이어서 엄두도 못내던 차에, 강사님이 디자이너 출신이시면서 설명을
매우 쉽게 해 주신다는 추천을 받고 강의를 듣게 되었습니다.
추천받은 대로 한 달 동안 배운 강의 내용이 알차게 머리 속에 정리되었어요.
감사하구요! 요즘 주변 디자인 전공 친구들에게도 추천중입니다 호호~"

"정을수 강사님, 이 어려운 HTML을 공부할 수 있다는 맘을 먹게 된 것은 순전히 선생님 강의가 있어서 입니다. ^^
지금도 알쏭달쏭 하지만 계속 공부하여 손에 익는 그날까지 해보려구요. "

"유재용 실장님 소개로 수강을 듣게 되었습니다. 웹표준, HTML, CSS … 막연하게 생각하던 개념을 쉽고 재밌게
가르쳐 주셔서 듣는 내내 집중하게 되었구요. 디자인만 오래 하다가 새로운 분야에 첫 발을 잘 내딘 것 같아서 좋구요~
앞으로 궁금한 사항이나 질문들 지속적으로 커뮤니케이션이 되었으면 좋겠습니다."

"기초부터 차근차근 듣다보니 이해도 잘 되고 유익한 강의였습니다.
^_^ 강의 하시느라 수고 많으셨구요 추운데 감기 조심하세용~ 감사합니다 ^^"

"알기 쉽게 설명해 주셔서 그동안 궁금했던 부분들이 싹~ 해결되는 느낌이었어요.
실무에도 많은 도움이 되고 있어요. 기회가 된다면 한번 더 듣고 싶네요. ^^"

"아직까지 많이 부족하지만 웹표준의 개념이 자리 잡히게 되서 너무나 좋았습니다.
구조나 여러 방면에서 아직 공부해야하고 생각할 것들이 많지만 열심히 노력해서 가르쳐 주신 부분들
잊지 않고 발전해 나가겠습니다. 그동안 수고하셨어요!!"

"웹표준 실전편이라 어려워 혹시라도 수업에 따라가지 못할까봐 걱정도 되었지만 강사님이 하나하나 자세히
알려주셔서 웹표준 공부에 큰 도움이 되었고 자신감도 붙은 것 같습니다. 수강생 한명 한면의 눈높이에 맞춘 강의라
너무 재미있게 배울 수 있었습니다. 지난 3개월동안 수고 많으셨고 감사합니다. ^_^"

"봄아카데미에서는 매킨토시를 사용하는 새로운 경험을 할 수 있어서 좋았습니다.
정을수 강사님이 실무에서 해온 노하우를 잘 설명해주시고 모르는 부분들은 이해하기 쉽게 알려주셔서 현업에서
사용하기에 너무 좋은 것 같습니다."

"수강생들이 이렇게 하면 어떨까요 할때 "그것도 좋은 생각이네요" 하면서 한 방향의 일방적인 수업이 아니라
서로 의견을 주고 받을 수 있는 수업이라서 학생들에게 생각할 수 있는 기회들을 주고 적용하게 되는 수업입니다."

질문 있어요

더 궁금한게 있어요.

Q. 코드 전혀 모르는 사람도 이 과정을 듣을 수 있을까요?

A. 본 과정의 수강생은 대부분이 비전공자이며, 기초부터 차근차근 눈높이에 맞춰 강의를 진행합니다.
웹퍼블리셔 과정의 특성상 논리적인 사고와 문제 해결 능력을 필요하지만 개인의 열정과 노력이 있다면
수업을 따라가시는 데 무리가 없을 것입니다.

Q. 본 강의를 듣기 위해 먼저 배워야 할 내용이 있나요?

A. 필수 선행 과정은 없으나, HTML태그, CSS 속성의 기초에 대해 어느 정도 공부를 하고 오시면
수업을 이해하고 사이트를 만드는 데 도움이 됩니다.

Q. 본 과정만으로 웹퍼블리셔가 될 수 있을까요?

A. 좋은 웹퍼블리셔가 되는 것은 좀더 장기적으로 보는 것이 좋습니다. 본 수업에서 웹퍼블리셔로서의 기본 원리와
기술 구현에 대한 깊은 이해를 바탕으로, 열정을 가지고 반복 훈련하신다면 수업 후에 웹퍼블리셔로
좋은 시작을 하실 수 있습니다.

Q. 강의 후에 과제는 어는 정도 내 주시나요?

A. 강의시간에 배운내용에 대한 복습을 위하여 과제로 내주고 있으며,
다양한 실무 과제 부여 후 개별 피드백을 제공합니다.

Q. 주 2~3회 강의로 충분한 교육을 받을 수 있을까요?

A. 수업에서 핵심 개념과 지식을 배우고 실습을 하지만, 수강시간 이외에는 본인의 의지를 가지고
실무 능력 향상을 위한 반복 훈련을 하시는 것으로 생각하시는 것이 바람직 합니다.

Q. 지금 직장에서 일을 병행하면서도 수강이 가능할까요?

A. 일과 병행하여 수업을 들으시는 수강생 분들이 많습니다. 수업시간에 집중하고, 복습은 시간이 나는 대로
꾸준히 하고, 오히려 배움의 내용을 하시는 업무에 바로 연결해 가시면
더 실제적이고 좋은 성장과 결과를 얻을 실 수 있을 것입니다.

Q. 따로 개인별 준비물이 필요한가요?

A. 강의실에는 실습을 위한 iMac PC가 개인별로 세팅되어 있고, 웹퍼블리셔 과정 진행에 필요한
텍스트 에디터(Sublime Text), 포토샵 프로그램이 설치되어 있습니다.
개인별로 간단한 필기도구만 준비해오시면 됩니다.

교육기간 교육시간 강 사 모집인원 수 강 료	\| 2018.12.22(토)~2019.01.12(토) \| 주 1일(토) 09:30~13:30 \| 정을수 \| 20명 \| 170000 원
할인혜택