- 특전
- 1. 출판예정이며, 모두 그림으로 설명한 정을수 선생님의 PDF북(약 800p)을 드립니다.
- 2. ZOOM 수업시 줌의 녹화 기능을 이용해서 매수업이 끝날 때마다 녹화된 영상을 드립니다. (개인 소장용, 복습용)
- 난이도
- 초급
- 수업의 대상
- 한번도 코드를 접해보지 않았지만, 진지하게 시작하고 싶은 분들
- 대학생 혹은 취업 준비자
- 디자이너이면서 코딩업무를 병행하셔야 하는 분들
- 프론트엔드 개발자를 준비하시는 분들
- 개인 쇼핑몰이나 블로그를 운영하는데 HTML/CSS를 다루셔야 하는 분들
- 책이나 강의를 들어도 이해가 어려운 분들
- 개념이 선명하지 않아 우연하게 작업이 이루어지는 분들
- 수업
- 월, 목
- 강의 횟수
- 7회(21시간)
- 시간
- 19:30~22:30
- 기간
- 예약중
- 장소
- 온라인
- 강의료
- 0
예약시 요일을 월/수로 선택해주세요.
4명 이상 모집 시 개별 연락후 진행, ZOOM 라이브수업
문의 010-2841-0692 / eulsoo.jung@gmail.com
변하는 디바이스 사이즈에서 어떻게 상자들을
다뤄야 할 지를 포커스를 두고 시작합니다.
포트폴리오 과정은 반응형웹을 중심에 놓고
다양한 CSS레이아웃 기능과 자신의 포트폴리오를 만들어 볼 수 있는 과정입니다.
Stpe3. 포트폴리오 과정 소개
반응형웹이라고 하면 보통 미디어쿼리라는 명령 하나를 떠올립니다. 하지만 교육을 진행해 보고, 실제업무에서 작업자들의 어려움을 들어보면 문제는 미디어쿼리라는 명령을 모르는데 있지 않습니다. 사실상은 변하는 창크기의 상황안에서 지금 이 상자를 어떻게 다뤄야 할 지 모르고, 자유롭게 다룰 수 없기 때문에 모든 문제가 생겨납니다.
본 과정에서는 변하는 상황안에서 어떻게 상자들을 다뤄야 할 지를 포커스를 두고 시작합니다. 사이즈가 늘어나는 상황에서 float, position과 이미지, 넓이, 높이를 어떻게 써야 하는지 변하는 상황안에서 세로와 가로의 가운데 정렬은 어떻게 할지를 수업을 통해 훈련합니다.
수업에서는 복잡하게 구성된 사이트 하나와 블로그를 하나 선정하여 점진적으로 만들어 나가는 방식으로 진행됩니다. 물론 이때 step1과 step2에서 익혀진 CSS 메커니즘들 중 확실치 않았던 개념들이 드러나고, 크리틱 지도를 통해 더 선명하게 되도록 합니다.
아울러 본인이 디자인한 포트폴리오를 추가적으로 같이 진행하면서 하고 싶은 분들을 위해서 개인 코드 크리틱을 함께 진행하실 수 있습니다. 완성된 디자인을 웹표준 문법에 맞게 제대로 설계된 HTML/CSS작업하고 싶으신 분들은 수업시간 이외에 개인작업을 진행하시면서 수업 전, 후에 크리틱 지도를 해드립니다. 단, HTML/CSS작업에만 한하며, 배우지 않은 자바스크립트 애니메이션이나 스크롤 반응에 따른 동적인 표현들을 위한 Javascript작업은 제외됩니다. 그러므로 STEP1과 STEP2를 거친 분들에 한해서만 지도해 드릴 수 가 있습니다.
'HTML/CSS 가 보이다'. 는 어떤 수업인가요?
본 과정은 기본적으로 웹표준을 준수하는 크로스 브라우징, 웹접근성에 바탕을 둡니다. HTML/CSS의 코어 메커니즘을 깊이 이해하고 트레이닝하여 새로운 스펙이 나오더라도 스스로 덧붙여나갈 수 있도록하는 마스터 과정입니다. STEP1:파운데이션, STEP2:트레이닝, STEP3:포트폴리오 로 구성되어 있습니다.
보통 학원에서처럼 속성을 소개하는 방식의 수업이 아닙니다. 웹퍼블리셔, 프론트엔드 개발자를 준비하시는 분들이 들으실 수 있으며, 디자이너라 할지라도 HTML/CSS를 웹퍼블리셔나 프론트엔드 개발자 만큼 자신있게 하고 싶은 분들이 그 대상입니다.
HTML/CSS. 왜 디자이너가 배워야 하는가?
좋은 웹/앱 디자인은 HTML/CSS에 대한 충분한 이해로부터 시작됩니다. 현재의 웹 사이트들은 대부분 브로슈어를 디자인 하는 것처럼 픽셀을 기반으로 디자인 되어지고 있습니다. 하지만 웹 페이지는 적게는 몇 십페이지 많게는 수 만페이지가 될 수 있으므로, 규칙을 기반으로 디자인 되어야 하며 이렇게 만들어진 웹 페이지야 말로 웹 다운 큰 힘을 갖게 됩니다. 그러므로 웹디자이너는 크리에이티브한 시각언어를 규칙안에 담아 내어 현장감 있고 현실성 있는 디자인을 만들어 낼 수 있어야 합니다.
태그종류와 문법만 배우는 것은 이제 그만.
흔히들 많은 분들이 HTML을 배울때 기호에 매몰되어 버립니다. 태그와 같은 기호를 다루는 법을 배우는게 전부인것처럼 무의식중에 생각하는 것이죠. 본 수업에서는 검색엔진의 의미 처리를 위한 스멘틱한 마크업, DOM, 모듈화된 UI에 대한 HTML설계등등의 입체적이고 폭넓은 수업을 진행합니다.
HTML은 PSD를 옮기기 위한 작업이 아닙니다.
정보뭉치를 생성하고 설계하는 과정입니다.
PSD를 HTML/CSS로 만드는 작업이라는 인식을 가지고 있는 분들이 종종 있습니다. 그러므로 데이터가 웹페이지나 웹 앱에 어떻게 안길지, 계절별로 색이 바뀌는 상황은 어떻게 할지 등의 비지니스적 디자인적 상황을 고려해서 설계되지않는 HTML 작업물은 이후 개발 과정을 힘들게 합니다. HTML을 배울 때는 많은 상황을 고려하고 해결할 수 있는 설계(design)능력이 길러져야합니다. 결국 프로그래밍은 설계하는 일이기 때문입니다.
Javascript로 넘어가기 힘들다구요?
HTML은 데이터 관점으로 배워야 합니다.
프로그래밍 언어는 메모리의 값(data)를 처리하기 위한 기호 규칙입니다. 프론트엔드나 웹 개발자로 나서기 원한다면 처음부터 브라우저 안에서 메모리를 다룬다는 인식을 가지면서 배우는 것이 중요합니다. HTML/ CSS/ JS 이 세가지 언어가 각자 어떤 정보뭉치를 만들어 사용하고, 어떻게 연결되며, 각 각 어떤 역할을 해서 브라우저가 그려내는지를 알아야 합니다. 직접 브라우저 안을 들여다 보면서 HTML이 메모리에 정보뭉치(DOM)를 생성하고 CSS가 편집하는 정보뭉치(CSSOM)가 화면을 그려내고, JS가 이들에 개입하는 과정을 생생하게 보는 시간입니다.
HTML 설계에 대한 높은 인식은 FE 프레임워크(vue, react..)를
잘 사용하는데 결정적인 영향을 미칩니다.
vue.js 나 react등의 프레임워크가 하는 일은 화면을 그리는데 필요한 데이터를 넣어 DOM을 구성하는 것입니다. 프레임워크를 다루기 전에 HTML태그라는 간결한 도구로 디자인적 상황에 맞는 DOM을 설계한다는 인식을 갖는 것은 프레임워크를 배울때 훌륭한 역할을 합니다.
메커니즘을 그림으로 설명합니다.
코드가 생소한 분들에게 언어의 메커니즘을 쉽고 생생하게 전달하기 위해서 모두 그림으로 표현하였습니다. 어떻게 브라우저가 그림을 그려내는지를 생생하게 시각적으로 이해하면 시간을 줄일 수 있고, 작업하는 디자인이 왜 이렇게 깨지는지 원인을 설명할 수 있게 되고 근본적인 솔루션을 찾을 수 있습니다.
수강후기
진정성의 향기는 인위적으로 표현되지 않는 강력한 흡입력을 가지고 있는거 같습니다. 웹을 통해 훌륭하신 선생님을 뵙게되어 늦은시간에 글을 남겨 봅니다. 감사합니다. - anooo
안녕하세요. 선생님~ooo에서 css수업을 들었던 수강생입니다.
전에도 다른곳에서 몇군데 강의를 들어봤는데 늘 실무에 바로 적용할 수 있는 노하우 제공 정도에 그쳤었습니다. 해서 배워도 금방 잊어버렸는데, 을수쌤 강의는 기본원리부터 가르쳐 주셔서 이해를 하며 수업을 들을 수 있었습니다.
더 자세히 하나하나 배우고 싶었는데 강의가 두달밖에 안되는게 아쉬웠어요...
중간에 업무에 치이다보니 복습을 못해갈 때가 종종 있어서 스스로에게 답답한 마음도 들었습니다.
개인적으로 반응형 수업이 너무 재밌었어요. 비록 잘 하진 못했지만;;
짧은 기간이었지만 가르쳐주신 내용 열심히 복습하고, 다음에도 강의하시면 다시한번 수업 듣고싶어요.
(욕심으론 제이쿼리 수업도 듣고싶었는데, 지금까지 배운 내용 정리가 먼저인 것 같아서..ㅎㅎ)
두달동안 좋은 수업 감사했고, 다른 강의 커리큘럼도 다양하게 해주세요~ 꼭 다시 뵙겠습니다!
- 빌리oooo
오늘 첫 수업들었는데 장시간 듣는거라 걱정되었는데, 지루하지않고 알찬내용 너무 감사합니다. 강의교재도 생각도 못했는데 너무 깔끔하고 핵심내용이 정리가 너무너무 잘되어있네요. 질문도 너무 친절하게 답변해주시구요. 실무자 입장에서 너무 도움이 되는 강의입니다. 다음주 수업도 기대됩니다. 주말 잘 보내세요~ - 션oooo
안녕하세요 강사님 ~ 어제 첫 수업 듣고 글 남겨 봄니다 ~ 너무 뒤늣게 늣은 나이에 전향하는거라 마음은 조급 하고, 잘 할수 있을까 하는 부담감이 컷는데.. 다 떨처버리고 수업집중해서 잘 들어보려합니다. 기초가 탄탄해야 응용력도 생기듯이 시간이 좀 걸리더라도 조급함을 없에고 기초 부터 차근차근 수업에 임하겠습니다. 결과에 대한 몫은 제가 하기나름이니 좋은 방향으로 지도 부탁드립니다. - 하트oooo
안녕하세요? 지난 강의듣고 너무 즐거웠습니다.
강의 정말 잘 들었고요. 정규수업에서 제대로 배울 기회가 있으면 좋겠습니다.
혼자서 퍼블리싱을 배워야하는 상황이라 책을 참고하려고하는데... 추천도서란에 책들이 오래되보여
혹시 요즘 나오는 책중에 초보자가 실습하기에 좋은 책 추천해주시면 참고하겠습니다. ^^
- 니ooo
안녕하세요? 지난 강의듣고 너무 즐거웠습니다. 강의 정말 잘 들었고요. 정규수업에서 제대로 배울 기회가 있으면 좋겠습니다. 혼자서 퍼블리싱을 배워야하는 상황이라 책을 참고하려고하는데... 추천도서란에 책들이 오래되보여 혹시 요즘 나오는 책중에 초보자가 실습하기에 좋은 책 추천해주시면 참고하겠습니다. ^^ - 니ooo
안녕하세요~^^ 금요일 3주간 html5&css3 수업을 듣는 학생(?)입니다. 사실 별 기대 없이 갔었습니다. 하루 6시간 교육이 정말 짧게 느껴질 만큼 좋은 수업들이였어요. 첫 수업이 끝나고 그 다음 수업시간까지 정말 심장이 쿵쾅 쿵쾅 설레인다고 해야 할까요? 그런 느낌으로 수업 시간을 기다리게 되네요.. 이번주면 벌써 3회차 수업이라 너무 아쉽습니다. 실무로 15년 일하면서 늘 주먹구구 식으로...혼자 코딩하고 혼자 처리하다 보니 제가 하고 있는게 맞는건지 남들은 어떻게 하는지 늘 궁금했었어요. 디자인 및 코딩관련 많이 배우고 싶네요. 정말 추천하고 싶은 강사님이십니다~!! - 나도ooo
선생님 안녕하세요! 오랜만에 인사를 드리네요~ 오래 전에 ooo에서 html/css 과정을 들었던 학생입니다:) 그 이후로 과정을 더 듣지 못했는데도 가르쳐주셨던 내용이 워낙 탄탄해서 업무 중 병행하여 퍼블리싱도 조금씩 하고있어요! 다시 html5와 반응형, css3 혹은 자바스크립트 쪽으로도 공부를 알아보고 있는데, 현재 진행중이신 강의가 있다면 꼭 선생님께 듣고싶어요! - HJoooo
을수 선생님! 오늘 끝난 응용반 수강생 ooo입니다. 진짜 포지션이랑 플롯 개념잡고 싶어서 책 엄청 뒤졌었는데 선생님 수업 듣고 개념 제대로 잡고 갑니다 ㅎㅎ 좋은 수업 정말 감사합니다^^
안녕하세요. 지난 화요일 수업을 마친 ooo입니다. 늦은 시간에 부랴부랴 나가느라 인사도 제대로 못드린게 걸리네요^^;; 수업 감사합니다. 진작 선생님을 만났더라면 좋았겠다 싶을정도로 차근차근 잘 가르쳐 주셔서 감사드려요. 배운걸 바탕으로 연습하고 시도해 보려고 합니다. 그리고 기회가 되면 응용 수업도 듣겠습니다. 더위 조심하시고요^^~
ooo에서 기초반 수강했었습니다.^^ 웹에 대해서 무지했던 저에게는 사실 쉽지 않았던 강의였지만 원론적인 개념을 확실히 잡아주시고 그로인해 논리적으로 사고하고 작업을 확장 시킬 수 있는 힘을 심어 주는 강의여서 빠지지 않고 열심히 들었던 수업이었습니다. 다음회차를 바로 들을 수 없어서 아쉽지만 그 다음 회차 수업은 꼭 듣도록 하겠습니다 ^^ 수업외의 좋은 이야기들도 감사했습니다! 또 뵈어요~
ooo에서 html5/css3/반응형웹 수강했습니다. 사실 전에 같은 과목을 다른 곳에서 신청하고 첫날 반나절 듣고 환불받고 나온적이 있어서 걱정반 기대반으로 수업을 들었답니다. 선생님 수업을 듣고 듣기를 잘했다고 생각했답니다. 수강료가 아깝지 않았어요. 6시에 칼퇴하고 가야하는 일이 쉽지 않았지만 선생님의 가르침에 대한 열의가 느껴졌고 그래서 더 즐겁게 열심히 할 수 있었던것 같습니다. 저는 아직 배워야할 것들이 많아서 ㅠㅠ 질문을 몹시 많이 드렸는데도 늘 친절하게 설명해주셔서 감사했습니다. 퍼블리셔가 저 혼자라 해볼때까지 해보겠지만 정 안되면 선생님께 종종 질문드리고 싶어요 ㅎㅎ 대답해 주실거죵~ ^^ 다음 수업 때 또 뵐 수 있기를 기대하겠습니다. 감사합니다!!
수업의 원칙
첫째. 최대한 쉽게 설명할 것.
둘째. 점진적으로 향상되는 재미가 있을 것.
셋째. 최대한 일반인이 생각할 수 있는 단어와 그림으로 기술적 원리를 설명할 것.
넷째. 기술에 대한 폭넓은 이해와 디자인과 기술간의 인사이트를 수업에서 경험하도록 할 것.
다섯. 실제 작업과 괴리감이 없을 것.
여섯. 가장 깊고, 전문적인 레벨을 다룰 것.
안내 사항
많은 분들이 학교나 직장에서 HTML/CSS 경험이 있기 때문에 처음부터 시작하는 것이 맞는지 문의를 하십니다. 감사하게도 그동안 1500여명이 넘는 분들과 강의실 수업을 진행할 수 있었습니다. “난 할 수있어!” 라는 기준이 모두 다르기 때문에 정확한 판단을 내리기 어렵습니다. 하지만 경험으로 말씀드리자면 명령어를 어느 정도 사용하고 계시더라도 float, position,우선순위등등의 CSS 메커니즘을 깊이 있게 이해하지 못하셨다면 처음부터 진행하실 것을 추천드립니다.
- 정 을 수
- 프로필
- (현) UI/UX 디렉터
- (현) 프론트엔드 프로그래밍 강사
- (현) 디자인씽킹, UI/UX 강사
- (현) kipfa 웹표준분과위원
- (전) 펜타브리드 디렉터, 수석
- (전) 메가존 웹표준화팀, 팀장
- 프로젝트
- 삼성바이오로직스 - UI/UX 컨설팅
- 한국뉴욕주립대합교 웹사이트 - UI/UX 디렉터
- 서울대학병원 연구검색SW - UI/UX 디렉터
- 아리따움 샘플바 - UI/UX 디렉터
- 아리따움 카운셀링앱 - UI/UX 디렉터
- 서울시 건강지원센터 강사 역량강화 매뉴얼 서비스디자인 - 디렉터
- 슈어소프트 Controller Tester UI.UX 컨설팅
- Clovir VDI - UI/UX 디렉터
- 삼성카드 전문가 자문 평가
- 아넬라코리아 - 디렉터
- 현대자동차 플랫폼 서비스 프론트엔드 디렉터
- 삼성디지털서비스 경쟁력 평가
- 행정자치부 "민원서류 간소화 개선연구" 서비스 디자인 디렉터
프리미티브 혜택
실시간 온라인 강의로
더욱 가깝게
자! 준비되셨죠.
-
ZOOM 설치
수업 전 ZOOM 미리 설치해 주세요.
ZOOM 설치하기
실습해야하니 PC/노트북에 설치
듀얼 모니터면 공부하기 더 편해요. -
수업 2시간 전
ZOOM 수업 공유 링크 제공
기타 자료 제공 받기
수업 자료 링크 제공
기타 설치 프로그램 안내 -
수업 30분 전 입장
입장과 함께 비디오 오디오 체크
쌤 찾아뵙고 질문하기
ZOOM 접속 시 컴퓨터 오디오 참여 허용
주변소음 차단효과로 이어폰/헤드폰 사용 권장
질문하고 학습하세요.
위치 안내
환불규정(Refund regulation)
- - 프리미티브는 「소비자분쟁해결기준」을 준수합니다.
- - 모든 일수는 영업일을 기준으로 합니다. (월-금 10:00-17:00)
- - 강의 진행 일자 산정 시 환불 요청을 한 당일은 진행 일수에 포함됩니다.
- - 강의가 시작되는 당일은 강의를 듣지 않았더라도 수업개시일 이후 환불 요청사항에 해당합니다.
1개월(5주) 이내인 강의
- - 개강 이틀 전: 전액환불
- - 강의 시간이 1/3 지나기 전: 수강료의 2/3 해당 금액
- - 강의 시간이 1/2 지나기 전: 수강료의 1/2 해당 금액
- - 강의 시간이 1/2 경과 후: 환불 없음
1개월 초과 강의
- - 1개월 이내 환불규정에 따른 환급금과 잔여월 수강료의 합산 금액
2일 이하의 강의
- - 강의 시작 2일 전: 전액환불
- - 이후 환불 불가
환불 신청 방법
- - 문의 T: 010-2247-6082, E: gsh3676@gmail.com
신용카드 결제
- - 1일 이내 승인취소
- - 카드사에 따라 환불까지 일정 시간 소요
가상계좌, 무통장 입금
- - 내규에 따라 정해진 정산일에 일괄 환급
- - 매월 1-15일 접수건: 당월 말일 / 16-말일 접수건: 익월 15일
- - 소비자 단순 변심으로 인한 경우 입금수수료 500원 차감