탈잉 - 세상의 모든 재능
  • 원데이
  • 1명

비전공자를 위한 웹사이트 레이아웃 기초

Inkweon Kim 튜터 5.0(9)

신청 전 꼭 읽어주세요!

협의 후 온라인&오프라인 수업 진행이 가능합니다.(1:1로 진행됩니다.) 부담없이 신청해 주세요! 카페, 스터디룸 비용 개인 부담입니다.

튜터 공지

튜터님을 소개합니다.

개발 입문자를 위한 “모두의 HTML5 & CSS3” 책 저자로, 국내 스타트업에서 서비스 기획자이자 프론트엔드 개발자로 근무하고 있습니다. 인문학을 결합한 실용적인 학문과 기술에 관심이 많으며, 주말마다 개발 입문자를 대상으로 웹 개발에 필요한 지식을 전달하는 데 힘을 쏟는 중입니다.

학부시절에는 경영학을 전공했으며 대학생 직업 멘토링 서비스 <가리고리>의 대표를 맡으며 서비스를 기획/운영했습니다. 이후 디지털 광고 에이전시 <레볼루션 커뮤니케이션즈>에서 광고AE로 근무하면서 코카콜라, 유한킴벌리 등의 디지털 캠페인 기획에 참여하였습니다.

개발과는 접점이 없는 삶을 살았지만 IT 서비스 및 디지털 광고를 기획하면서 개발에 강한 매력을 느끼게 되었습니다. 지금이 아니면 다시 도전하기 어려울 것 같은 느낌이 들어서 2014년 10월 광고회사를 퇴사한 후 독학으로 개발 공부를 시작했습니다.

처음에는 하나의 웹 사이트를 제작하고, 하나의 개발 언어를 익히는 데 어려움이 많았지만, 지금은 앵귤러, 리액트와 같은 웹 기술뿐 아니라 안드로이드, 스위프트 등 다른 개발 언어와 프레임워크, 라이브러리 등을 학습하면서 다양한 경험을 축적할 수 있게 되었습니다.



[ 개발 경력 ]

- 에어서플라이 프론트-엔드 개발
- 덕업닷컴 프론트-엔드 개발
- 비욘드시터 프론트-엔드 개발
- 서울시 기후변화 대응행동 마이크로 사이트 제작
- 마이크임팩트 모바일 웹사이트 제작
- 가온아이 협업 도구 프론트-엔드 개발
- 국회의원 웹사이트 제작
- 앤드모어 웹사이트 제작
- 한샘중부점 웹사이트 제작
- 굿트리몰 웹사이트 제작
- 조강종합건설 웹사이트 제작
- 파미재미 웹사이트 제작
- 키즈가오 웹사이트 제작



[ 강의 경력 ]

- 비전공자를 위한 자바스크립트: 입문과 중급사이 ( 2018 ~ 현재 )
- 비전공자를 위한 자바스크립트, 라이브러리 스터디 ( 2016 ~ 현재 )
- 비전공자를 위한 HTML, CSS 스터디 ( 2015 ~ 현재 )
- 엘리스 웹 프로그래밍 기초 Instructor ( 2018 )
- 모바아카데미 프로그래밍 기초 완성 프로그램 Instructor ( 2017 )
- 연세대 디자인 툴 마스터 실무과정 HTML, CSS Instructor ( 2017 )
- 선문대 디자인 툴 마스터 실무과정 HTML, CSS Instructor ( 2017 )
- 코드스테이츠 Pre-Course Instructor ( 2016 )



[ 모두의 HTML5 & CSS3 ]

- YES24 [링크]
- 교보문고 [링크]
- 인터파크 [링크]

어떤 클래스 인가요?

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

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

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

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

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

이런 분들이 들으면 좋아요.

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

클래스는 이렇게 진행됩니다.

★원데이 클래스 상시 모집


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



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



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



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



* 첫 외주로 제작한 "키즈가오" 웹사이트에 적용된 레이아웃 작업 방식을 익혀보는 것으로 전체 커리큘럼을 구성하였습니다.
* 실습 페이지 : 키즈가오 링크

* 제작하고 싶은 웹 사이트나 디자인 레이아웃 자료가 있다면 링크 주소나 디자인 파일을 공유해 주세요. 해당 웹 사이트를 제작하는데 필요한 내용으로 알려드리겠습니다.

실제 튜티의 리뷰입니다.

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

수업일정

강남 신촌홍대 온라인 Live

25,000원 / 시간 100,000원 / 총 1회 4시간