• 전체
  • 워크숍
  • 디자인툴
  • 특강
  • 1 DAY
  • user
  • 전체
  • 워크숍
  • 디자인툴
  • 특강
  • 1 DAY
  • 웹디자이너를 위한 Understanding HTML/CSS - STEP 1,2,3 연속과정 [1기]
    HTML/CSS의 코어 메커니즘을 깊이 이해하고 트레이닝, 마스터 과정
    • 페이스북
    • 카톡

    정을수

      프리랜서 디렉터 및 강사
    • 디자이너가 들어야 하는 HTML/CSS ! 크리에이티브한 디자인은 시각언어를 규칙안에 잘 담을 때 완성됩니다.
    • 디자이너가 들어야 하는 HTML/CSS ! 크리에이티브한 디자인은 시각언어를 규칙안에 잘 담을 때 완성됩니다.
    일자 2019-01-28 부터 2019-02-27 까지 (매주 월,수,금요일, 총 12회, 2/4-2/6 휴강)
    시간
    장소 봄아카데미
    인원 0 - 15명
    수량
    비용 936,000 원

    신청과정

      • 강의구매
      • 신청
      • 안내문자발송
      • 안내문자발송
        1~2일 소요
      • 강의수강
      • 신청완료
       

    디노마드가 인증하는 본 교육과정은 IT/개발 분야의 지식향상을 목표로 합니다.
    수강완료 후, 해당 과정의 수료증이 발급됩니다.

    디노마드가 인증하는 본 교육과정은 IT/개발 분야의 지식향상을 목표로 합니다.
    수강완료 후, 해당 과정의 수료증이 발급됩니다.

     

    bannar_정을수.jpg

     

    내용 (Contents)

    <프롤로그>


    본 과정은 HTML/CSS 전체를 웹표준을 준수하는 크로스 브라우징, 웹접근성에 바탕을 둡니다. HTML/CSS의 코어 메커니즘을 깊이 이해하고 트레이닝하여 새로운

     스펙이 나오더라도 스스로 덧붙여나갈 수 있도록하는 마스터 과정입니다.  STEP1:파운데이션, STEP2:응용과실전,  STEP3:반응형 웹으로로 구성되어 있습니다.


    웹퍼블리싱은 PSD를 HTML/CSS로 옮기는 작업이 아닙니다.
    PSD를  HTML/CSS로 만드는 작업이라는 인식을 가지고 있는 분들이 종종 있습니다. 심지어 그런 인식으로 가르치는 교육기관도 있습니다.

    HTML/CSS가 비교적 쉬운 문법을 가지고 있다고 해서 프로그래밍 언어가 아닌것은 아닙니다. program의 어원은 “ pro” - “gramma” 

     즉 미리 써두는 것입니다. 제대로 된 프로그래밍은 반드시 설계 과정이 있어야 합니다.  그래야 상황에 따라 사람이 자꾸 고치지 않고

    자동으로 돌아가기 때문입니다. 이점이 좋은 프로그래밍의 중요한 조건이라고 생각합니다.  그러므로 데이타가 웹페이지나 웹앱에

    어떻게 안길지, 계절별로 색이 바뀌는 상황은 어떻게 할지 등의 비지니스적 디자인적 상황을 고려해서 설계되지않는 HTML/CSS 작업물은

     이후 개발 과정을 힘들게 합니다. 그래서 PSD를  HTML/CSS로 만드는 작업이라는 자기 인식을 가지고 배우는것은 제한적인 작업밖에

    할 수없게 만듭니다.  프로그래밍을 배울때는 많은 상황을 고려하고 해결할 수 있는 설계(desing)능력이 길러져야합니다. 전체 수업에서

    사용하는 모든 코드 설명을 이 능력을 기르는데 초점을 맞추었습니다. 강사의 생각의 과정을 그렇게 하기로 한 이유와 함께 전달하면서

    자신의 생각과 비교할 수 있도록 진행합니다.

     

    HTML/CSS. 왜 디자이너가 배워야 하는가?
    좋은 웹/앱 디자인은 HTML/CSS에 대한 충분한 이해로부터 시작됩니다. 현재의 웹 사이트들은 대부분 브로슈어를 디자인 하는 것처럼

    픽셀을 기반으로 디자인 되어지고 있습니다. 하지만 웹 페이지는 적게는 몇 십페이지 많게는 수 만페이지가 될 수 있으므로, 규칙을

    기반으로 디자인 되어야 하며 이렇게 만들어진 웹 페이지야 말로 웹 다운 큰 힘을 갖게 됩니다. 그러므로 웹디자이너는 크리에이티브한

    시각언어를 규칙안에 담아 내어 현장감 있고 현실성 있는 디자인을 만들어 낼 수 있어야 합니다.


    어떻게 제대로 배울 수 있을까?
    사실 html/css는 쉽게 전문가가 아니더라도 사용할 수 있도록 보편성을 철학으로 하여 설계된 언어입니다. 하지만 프로 작업자로서

    실제 디자인을 코드로 만들 수 있게 되기까지 배우기는 쉽지 않은 것이 사실입니다. 머리로 이해되고 손으로 익숙해져 응용될 만큼

    친절하게 단계별로 학습할 수 있는 가이드가 많지 않은 것도 그 이유중 하나입니다. 보통의 책과 강의는 속성설명 위주의 내용이

    대부분이기 때문입니다.


     본 과정은 단순한 속성 위주의 강의가 아닙니다. 깊이 있고 폭넓을 이해와 시야를 가져서 실무에서도 응용 할 수 있는 스킬셋이 되도록

    하는 것이 목표입니다. 앞으로의 모든 미디어는 소프트웨어. 텔레비전 방송 그리고 이북에 이르기까지 모든 미디어를 HTML/CSS가 통합해

    나갈 기세입니다. 이것은 기존의 북 디자인, 웹 디자인 그리고 3D의 각 각의 아웃풋이 웹이라는 하나의 아웃풋으로 된다는 뜻입니다.


     그렇기에 이 시리즈는 디자이너 분들에게 HTML/CSS를 자유럽게 다룰 수 있는 디자인 도구로 만들어 드린다는 목표를 가지고 있으며,

     HTML/CSS에 대해 좀 더 진지하고 의욕적으로 배우고 싶은 분들을 위해 만들어 지게 되었습니다. 전 과정에 걸쳐 실무에서의 강사의

    경험을 최대한 살리고 기존의 책이나 강의의 기능 명세를 알아보는 방식의 단순한 학습이 아닌 통합적인 이해아래, 머리와 손으로

    익혀질 수 있는 배움이 될 수 있도록 합니다.


    메커니즘을 700여장의그림으로 설명합니다.
    코드가 생소한 분들에게 언어의 메커니즘을 쉽고 생생하게 전달하기 위해서 모두 그림으로 표현하였습니다. float, position, 상속, 우선순위

    등등의 모호한 개념이 선명하게 이해 되도록 하기 위해서 입니다. 코드는 문자이지만 문자적으로 배워지면 아주 오랜 시간이 걸립니다.

    어떻게 브라우저가 그림을 그려내는지를 생생하게 시각적으로 이해하면 시간을 줄일 수 있고, 작업하는 디자인이 왜 이렇게 깨지는지

    원인을 설명할 수 있게 되고 근본적인 솔루션을 찾을 수 있습니다.




     

     

     

    <커리큘럼>

     


    Step1 : 파운데이션 과정 소개 (24시간)

     

    HTML/CSS는 생각만큼 배우기 수월하지가 않습니다. 일반적으로 최소 수개월 이상이 걸립니다. 시간이 많이 걸리는 가장 큰 이유는

    처음 코드를 접하므로 낯설기 때문입니다. 뭔가 의도하는 것을 코드를 이용해서 명령을 내린다는 것은 막연한게 아닐 수 없습니다. 그래서

     처음 배우는 분들에게 있어 가장 중요한 점은 브라우저 입장에서 생각하는 훈련입니다.

     

    보통 HTML/CSS가 능숙한 경우 머리속으로 연상(생각)을 한 후 코드로 옮기게 되는데, 이렇게 디자인된 작업물을 어떻게 코드로 말할지를

    생각하는 훈련이 가장 중요합니다. 코드가 익숙해 지기까지 시간이 많이 필요한 이유는 이런 연상과 생각이 수많은 시행 착오를 통해서

    알아지기 때문입니다. 하지만 언어를 최초로 배우는 과정에서 브라우저 입장에서 이해하고 머리속으로 그릴 수 있는 연습을 한다면 좀 더

     쉽고 재밌게 익숙 해지는 과정을 만들수 있고 상당한 시간을 줄 일 수 있습니다.

     

    기초편에서는 HTML과 CSS의 대한 기본적인 이해와 사용 방법을 그림과 설명을 통해 충분이 이해하고, 예제를 통해서 개념을 확실하게

    만들게 됩니다. 디자이너가 웹표준을 배우는데 있어서 가장 어려운 부분인 float을 이용한 배치를 완전히 이해 하는것에  최종적인 포커를

     맞추고 있으며, 이를 통해 막연하고 우연히 되어졌던 작업이 명확하게 되고 작업에서 왜 이렇게 깨져서 보이는 지도 이해하게 됩니다.

     

    개념과 준비
         - 예술과 기술. 융합의 시대
         - 미디어와 시멘틱웹
         - 웹표준 html/css 소개
         - 웹타입셋팅란?
         - 어떻게 익힐것인가? (why & doing)
         - 준비하기 (브라우저, 에디터, 기타도구, 도서, 아티클, 시간사용과 연습방법)
    시멘틱 마크업
         - html 기초 문법
         - hello world!
         - 제목 (heading)
         - 문장 (pragraph)
         - 목록 (list)
         - 이미지 (image)
         - 그룹핑 (grouping)
         - 인용 (quotation)
         - 부가정보 (additional)
         - 강조 (strong)
         - 링크 (link)
         - 페이지정보 (page info)
    기초 스타일링(1)
         - HTML에 CSS 적용하기
         - CSS 기초 문법
         - reset.css 준비하기
         - id와 class 사용하기
         - 기초선택자, 가상선택자
         - font 스타일링
         - text 스타일링
    기초 스타일링(2)
         - 단위
         - 상속
         - 우선순위
         - 속성선택자
    박스다루기-1
         - 박스로 생각하기
         - 박스의 성질
         - 박스의 종류
         - 넓이와 높이
         - 여백과 간격
    박스다루기-2
         - 선긋기
         - 배경색과 배경이미지
         - overflow, display, visibillity
    배치하기-1
         - 웹에서의 배치란?
         - 마크업에서 배치까지
         - 관계성 있는 배치
         - block formatted context
         - inline formatted context
         - position:relative
         - 플롯팅
         - 클리어링
    배치하기-2
         - 관계성 없는 배치
         - position:absolute
         - position:relative
         - position:fixed
         - 박스가 보이는 순서




    Step2 : 응용과 실전 과정 소개 (24시간)

     

    응용

     

    응용단계에서는 실제 디자인을 통해 응용해서 만들수 있는 능력을  키워나갑니다. 수업의 큰 흐름은 만드는데 있어서 가장 어렵고 시간이

    걸리는 부분과 파운데이션 수업에서 다루지 못한 속성들을 포함하고 있는 실제 웹사이트의 부분들을 엄선하여  진행하게 됩니다. 단순하고

    큼직한 부분부터 시작하여 복잡하고 오밀조밀한 디자인까지를 실습을 통해 소화해 내면서 자세한 설명을 더하는 방식으로 진행됩니다.

     

    코드는 흔히 머리와 손으로 익혀진다고 말합니다. 이해만 있고 해보지 않으면 자신감이 없고 반대로 깊은 이해가 없이 손으로 해보기만

     한다면 왜 이렇게 깨지는지 왜이런 속성이 필요하고 앞으로는 어떻게 될지를 예측할 수 없는 반쪽 공부가 되어 버립니다.

     

    즉 파운데이션 수업의 탄탄하고 깊은 이해에 응용편의 실제적이고 자세한 기법을 훈련함으로서 그림이 아닌 코드를 이용해 모양을

    만들 수 있는데 필요한 사고 방법에 숙달과 응용을 만드는 수업이라고 할 수있습니다. 또한 실제 사이트를 캡춰하여 실습과 설명을

    반복하면서 특정 상황에서의 의미있는 태그 사용, 접근성 그리고 좋은 디자인과 크로스브라우징을 동시에 생각하여 그 중 가장 많을 것을

    얻을 수 있는 방법을 해당 상황에서 선택하는 훈련을 하게 됩니다.

     

    플롯속성에 포커스를 맞추고 사용되는 실제 디자인을 통해 박스가 상황에 따라
    어떻게 변형되는지를 선명하게 이해하고 다양하게 응용해 봅니다.

    - 실습1. 포털사이트의 게임 소개 영역
    - 실습2. 포털사이트의 자동차 소식 영역

    클리어링에 포커스를 맞추고 플롯을 사용한 후 다양한 클리어링이 어떻게 응용되는지를
    상황별로 실험해 봅니다. 또한 기초편 보다

    깊이 있는 우선 순위 응용연습과 다양한 선택자를 이용한 구조적 사고를 연습합니다.

    - 실습3. 포털사이트의 캐스트 영역
    - 실습4. 포털사이트의 만화/웹툰 영역

     


    실전


    실제 업무에서 어떻게 class의 네이밍을 하고 어떻게 구조를 짜며 무엇을 기준으로 모듈화를 해나아가는지를 실습과 설명을 통해서

    분명히 알아질 수 있도록 하는 단계입니다. 어떤 것이든 응용하면서 숙련되게 하는 것이 매우 중요합니다.

     

    대부분의 많은 분들이 “할 수 는 있지만 맞게 했는지 모르겠다” 라고 말합니다. 코드는 정답이 있을 수 가 없지만 그 상황(디자인과

    기획목적)에 맞는 가장 좋은 답을 찾는 것이므로 상황에 따른  좋은 코드가 되도록 크리틱 지도를 받아야 합니다. 이렇게 될 때 오래도록

     꾸준히 성장하는 기술을 스스로 갖추게 됩니다.

     

    그래서 실제 존재하는 사이트 하나를 선정해 메인페이지, 게시판, 단순 소개페이지 등 등 컨텐츠별로 작업을 직접 해보고 크리틱

    (코드지도)을 받는 방식의 수업입니다. 이런 과정을 통해 실무에서 실제 업무에서 일어나는 일들과 함께 그에 필요한 노하우가

    코드연습과 함께 숙련되도록 합니다.

     

    - 실습5. 구조설계와 레이아웃
    전체적인 컨텐츠와 디자인을 검토하여 CSS구조와 레이아웃 구조를 설계하며, 컨텐츠와 디자인 특성에 맞게 마크업 시작하기
    (주요포인트: CSS구조, 네이밍규칙, 디자인구조파악, float&clear)


    - 실습6. 브래드커럼스 / 서브메뉴 / 풋터
    접근성을 고려한 마크업과 추가되는 메뉴를 고려해 확장성있는 메뉴와 풋터 작업하기
    (주요포인트: vertical-align, background, float&clear)


    - 실습7. 회사소개 페이지
    각기 다른 컨텐츠들을 관리하기 쉽도록 규칙을 만들어 작업하기
    (주요포인트: 네이밍규칙, background, 음수마진, float&clear)


    - 실습8. 제품, 서비스소개 페이지
    동일한 컨텐츠를 최소한의 CSS를 사용하여 효율성있게 작업하기


    - 실습9. 입력양식 / 게시판
    접근성있는 입력양식을 디자인 상황에 맞게 만들고
    한 사이트에 사용되는 다양한 테이블에 규칙을 부여하고 스타일링 작업하기

     

    - 실습10. 상단메뉴
    자바스크립트를 고려하고 확장성 있는 메뉴를 위한 마크업과 스타일링하기

     

    - 실습11. 메인 페이지
    메인페이지의 조밀하고 복잡한 메인 페이지를 실습합니다.




    Step3 : 반응형 웹 과정 소개 (24시간)

     

    반응형웹이라고 하면 보통 미디어쿼리라는 명령 하나를 떠올립니다. 하지만 교육을 진행해 보고, 실제업무에서 작업자들의 어려움을

    들어보면 문제는 미디어쿼리라는 명령을 모르는데 있지 않습니다.  사실상은 변하는 창크기의 상황안에서 지금 이 상자를 어떻게 다뤄야

     할 지 모르고, 자유롭게 다룰 수 없기 때문에 모든 문제가 생겨납니다.

     

    본 과정에서는 변하는 상황안에서 어떻게 상자들을 다뤄야 할 지를 포커스를 두고 시작합니다. 사이즈가 늘어나는 상황에서 float,

    position과 이미지, 넓이, 높이를 어떻게 써야 하는지 변하는 상황안에서 세로와 가로의 가운데 정렬은 어떻게 할지를 수업을 통해 훈련합니다.

     

    수업에서는 복잡하게 구성된 사이트 하나와 블로그를 하나 선정하여 점진적으로 만들어 나가는 방식으로 진행됩니다. 물론 이때

    step1과 step2에서 익혀진 CSS 메커니즘들 중 확실치 않았던 개념들이 드러나고, 크리틱 지도를 통해 더 선명하게 되도록 합니다.

     

    포트폴리오 크리틱
    아울러 본인이 디자인한 포트폴리오를 추가적으로 같이 진행하면서 하고 싶은 분들을 위해서 개인 코드 크리틱을

    함께 진행하실 수 있습니다. 완성된 디자인을 웹표준 문법에 맞게 제대로 설계된 HTML/CSS작업하고 싶으신 분들은

    수업시간 이외에 개인작업을 진행하시면서 수업 전, 후에 크리틱 지도를 해드립니다. 단, HTML/CSS작업에만 한하며,

     배우지 않은 자바스크립트 애니메이션이나 스크롤 반응에 따른 동적인 표현들을 위한 Javascript작업은 제외됩니다.

    그러므로 STEP1과 STEP2를 거친 분들에 한해서만 지도해 드릴 수 가 있습니다.


    - CSS3의 새로운 표현들
      - 그림자
      - 라운드 박스
      - 그라데이션
      - 웹폰트


    - CSS3의 새로운 계산, 범위, 선택 방법
      - 새로운 계산식
      - 범위
      - 다양하고 강력한 선택자


    - 반응형웹에서 중앙 정렬
      - position을 사용한 정렬


    - 변하는 상자안의 이미지 다루기
      -
      - srcset속성


    - %, em, vm, vh 을 이용한 박스 사이징
      - em과 %
      - min-width,height / max-width,height의


    - 플렉서블하게 박스 다루기
      - 블로그 플렉서블하게 만들기
      - 웹사이트 플렉서블하게 만들기


    - 미디어쿼리와 뷰포트
      - 디바이스 사이즈의 이해
      - 미디어 쿼리


    - 반응형 웹 만들기 실습
      - 반응하는 블로그 만들기
      - 반응하는 사이트 만들기

      

     

     

     



    <기타 안내 사항>

     - 봄아카데미에서 진행하며, 20인치 아이맥을 이용하실 수 있습니다. 개인노트북 지참 자유

     


     

     

    <추천대상>

    - 포트폴리오를 준비하는 대학생 혹은 취업 준비자
    - 디자이너이면서 코딩업무를 병행하셔야 하는 분들
    - 프론트엔드 개발자를 준비하시는 분들
    - 개인 쇼핑몰이나 블로그를 운영하는데 HTML/CSS를 다루셔야 하는 분들
    - 책이나 강의를 들어도 이해가 어려운 분들
    - 개념이 선명하지 않아 우연하게 작업이 이루어지는 분들

     

     

    <수업의 원칙>

    첫째. 최대한 쉽게 설명할 것.
    둘째. 점진적으로 향상되는 재미가 있을 것.
    셋째. 최대한 일반인이 생각할 수 있는 단어와 그림으로 기술적 원리를 설명할 것.
    넷째. 기술에 대한 폭넓은 이해와 디자인과 기술간의 인사이트를 수업에서 경험하도록 할 것.
    다섯. 실제 작업과 괴리감이 없을 것.
    여섯. 가장 깊고, 전문적인 레벨을 다룰 것.


    < 안내 사항 >

    많은 분들이 학교나 직장에서 HTML/CSS 경험이 있기 때문에 처음부터 시작하는 것이 맞는지 문의를 하십니다. 감사하게도 그동안

    1000여명이 넘는 분들과 강의실 수업을 진행할 수 있었습니다.  “난 할 수있어!” 라는 기준이 모두 다르기 때문에 정확한 판단을 내리기

    어렵습니다. 하지만 경험으로 말씀드리자면 명령어를 어느 정도 사용하고 계시더라도 float, position,우선순위등등의 CSS 메커니즘을

    깊이 있게 이해하지 못하셨다면 처음부터 진행하실 것을 추천드립니다.

     



     

     

    수강생 우수작은 해당 워크숍 홍보를 위해 디노마드 채널에 소개될 수 있습니다.

    정보 (Information)

     

    정을수

      

    () 프리랜서 디렉터 / 강사
    (
    ) 펜타브리드 수석 디렉터
    (
    ) 메가존 웹표준화 팀장
    (
    ) 프리랜서 디자이너
    2011~2014,
    아카데미정글 웹표준 강의
    2013~
    현재, ()한국인터넷전문가협회 웹표준강의
    2014~
    현재, Vom Academy 웹표준 강의중
    2014. (
    한국인터넷전문가협회) 2014년 청년취업아카데미 웹표준과정
    2013. (
    한국디자인진흥원) 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)

       ▼ 강사님 수업 ▼


    1.png

    장소 (Place)

    서울특별시 마포구 독막로9길 23(서교동 404-22번지)

    환불규정 (Refund regulation)

    - 디노마드는 「소비자분쟁해결기준」을 준수합니다.

    - 모든 일수는 영업일을 기준으로 합니다. (월-금 10:00-17:00)

    - 강의 진행 일자 산정 시 환불 요청을 한 당일은 진행 일수에 포함됩니다.

    - 강의가 시작되는 당일은 강의를 듣지 않았더라도 수업개시일 이후 환불 요청사항에 해당합니다.



    ▶ 1개월(5주) 이내인 강의

       - 개강 이틀 전 : 전액환불

       - 강의 시간이 1/3 지나기 전 : 수강료의 2/3 해당 금액

       - 강의 시간이 1/2 지나기 전 : 수강료의 1/2 해당 금액

       - 강의 시간이 1/2 경과 후 : 환불 없음


    ▶ 1개월 초과 강의

       - 1개월 이내 환불규정에 따른 환급금과 잔여월 수강료의 합산 금액


    ▶ 2일 이하의 강의

       - 강의 시작 2일 전 : 전액환불

       - 이후 환불 불가

     

     


    <환불 신청 방법>

       - 유선연락(02-337-2583) 및 홈페이지 문의 게시판을 통해 신청


    ▶ 신용카드 결제

       - 1일 이내 승인취소

       - 카드사에 따라 환불까지 일정 시간 소요


    ▶ 가상계좌, 무통장 입금

       - 내규에 따라 정해진 정산일에 일괄 환급

       - 매월 1-15일 접수건 : 당월 말일 / 16-말일 접수건 : 익월 15일

       - 소비자 단순 변심으로 인한 경우 입금수수료 500원 차감

    후기 (Comment)

    상담하기