위치

요일

가능
시간
(날짜)

  • 오후 7시 ~ 오후 11시 (협의)
장소 : 협의 후 결정
추가비용 : 카페, 스터디룸 비용 개인 부담
₩25,000원 / 시간
₩100,000 / 총 1회 4시간
Inkweon Kim
기발자
비전공자를 위한 HTML, CSS
  • 강남
  • 4시간/회
  • 최대인원:1~4
  • ₩25,000/시간

튜터정보

  • 신분 인증 됨
인문계 출신의 IT 서비스 기획자이자 웹개발자로, 현재 "그림으로 배우는 자바스크립트" 브런치 작가로 활동하고 있습니다. 학부시절에는 대학생 직업 멘토링 서비스 <가리고리>의 대표를 맡으며 서비스를 기획/운영하였고, 이후 디지털 광고 에이전시 <레볼루션 커뮤니케이션즈>에서 광고AE로 근무하면서 코카콜라, 유한킴벌리 등의 디지털 캠페인 기획에 참여하였습니다.

IT서비스 및 디지털 광고를 기획하면서 개발에 대한 강한 필요성과 끌림을 느끼게 되어, 2014년 10월, 광고회사를 퇴사한 이후 HTML, CSS, jQuery, JavaScript, Angular, Wordpress, Ionic 등 다수의 웹, 하이브리드앱 개발 도구를 경험하였습니다.

현재는 클로즈업 스타트업에서 프론트-엔드 개발자로 활동하고 있으며, 주말마다 IT 비전공 개발자를 꿈꾸는 인문학도들에게 웹페이지 프로그래밍을 교육하고 있습니다.


[ 개발 경력 ]
- 가온아이 협업 도구 프론트-엔드 개발
- 국회의원 웹사이트 제작
- 앤드모어 웹사이트 제작
- 한샘중부점 웹사이트 제작
- 굿트리몰 웹사이트 제작
- 조강종합건설 웹사이트 제작
- 파미재미 웹사이트 제작
- 키즈가오 웹사이트 제작


[ 강의 경력 ]
비전공자를 위한 HTML, CSS 스터디 ( 2015 ~ 현재 )
비전공자를 위한 JavaScript & jQuery 스터디 ( 2016 ~ 현재 )

엘리스 웹 프로그래밍 기초 Instructor ( 2018 )
모바아카데미 프로그래밍 기초 완성 프로그램 Instructor ( 2017 )
연세대 디자인 툴 마스터 실무과정 HTML, CSS Instructor ( 2017 )
선문대 디자인 툴 마스터 실무과정 HTML, CSS Instructor ( 2017 )
코드스테이츠 Pre-Course Instructor ( 2016 )

수업소개

◆ 강의시간은 스터디원과 조율하여 진행됩니다.

───────────────────────────

웹 프로그래밍에서 가장 중요한 것은 무엇일까요? 디자인, 기능, 효과, UI/UX 등 직관적으로 생각나는 다양한 요소들이 존재할 것입니다. 이 모든 요소가 중요하지만, 웹 프로그래밍에서 가장 먼저 체득해야 할 것은 '레이아웃'에 대한 이해입니다. 레이아웃은 사이트의 정보를 간결하면서 임팩트있게 표현할 수 있는 잡지의 표지와 같은 것입니다. 최근에는 PC 뿐만 아니라 모바일, 태블릿 등 다양한 기기를 고려하여 기능성을 강조한 반응형, 적응형 등 여러 가지 방식의 레이아웃이 존재합니다.

개발자에게 "이거 한 개만 더 추가하면 될 것 같은데요?"라고 말하는 것은 이미 다 지어놓은 건물 앞에서 건축가에게 "건물 위치를 10cm 만 옮겨주세요"라고 말하는 것과 같습니다. 이처럼 레이아웃을 잡는 과정은 프로그래밍에 있어서 중요하며 기초가 되는 것입니다.

본 스터디는 레이아웃을 잡는데 있어 가장 중요한 HTML & CSS 속성을 소개하고 실제 제작한 사이트를 직접 구현해 나가면서 레이아웃에 대한 기본적인 개념을 이해하는데 도움을 줄 것입니다.

수업대상

  • 추천
    - 웹 프로그래밍에 입문하고 싶으신 분 (비전공자, 기획자, 디자이너, 창업자 등)
    - 나만의 멋들어진 웹사이트를 만들어 보고 싶으신 분
    - 웹사이트 기획, 디자인 방법에 대해 알고 싶으신 분
    - 개발자와 원활한 커뮤니케이션을 원하시는 분

커리큘럼

강의계획

★원데이 클래스 상시 모집


#1. 레이아웃 작업시 사용되는 HTML
- 개발 환경 구축
- HTML 기본 태그 및 사용 방법
- Inline & Block 특징



#2. 레이아웃에 영향을 미치는 CSS
- CSS 선택자 종류 3가지
- CSS 박스모델
- CSS display



#3. 샘플 웹사이트( 어워즈 수상작) 만들기
- CSS float
- 간단한 메뉴 버튼 만들기
- 제품 정보 정렬하기



#4. 웹사이트에 동적인 효과를 적용해 보자.
- CSS Animation 주요 속성 살펴보기
- 메뉴 버튼에 애니메이션 적용
- 웹사이트에 애니메이션 효과 적용



* 해외 어워즈 수상작, 덴마크 쇼핑몰 메인 페이지에 적용된 레이아웃 작업 방식을 익혀보는 것으로 전체 커리큘럼을 구성하였습니다.

리뷰(1)

리뷰쓰기
5.0
  • 커리큘럼
  • 전달력
  • 준비성
  • 친절도
  • 시간준수

실시간톡

실시간 톡하기

위치

지도가 들어갑니다.