• 원데이
  • 1명

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

Inkweon Kim 튜터 5.0(10)

클래스 전 숙지해주세요!

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

튜터 공지

클래스 요약

수업 목표
1. 알아두면 좋은 개발 용어 이해하기
2. 실무 중심의 HTML, CSS 기본 속성 습득하기
3. 레이아웃 작업에 영향을 미치는 요소 알아보기


수업 차별화

1. 입문자 입장에서 이해하기 쉽도록 내용 전달
2. 실무 중심의 강의 내용
3. HTML, CSS 강의 자료 제공

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

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

튜터님을 소개합니다.

Inkweon Kim

[개발 경력]
- 클라우드 구매 관리 솔루션 서비스/어드민 Front-End 개발
- 클라우드 구매 관리 솔루션 어드민 대시보드 Back-End 개발
- 클라우드 구매 관리 솔루션 전용 크롬 확장 프로그램 개발
- 국내 주요 사이트 스크래핑

- 덕업닷컴 Front-End 외주 개발.
- 비욘드시터 모바일 웹앱/어드민 Front-End 외주 개발 (Android, iOS).
- 서울시 기후변화 대응 행동 Front-End 외주 개발.
- 마이크임팩트 Front-End 외주 개발.
- 그룹웨어 Front-End 외주 개발.



[ 강의 경력 ]
- 서울시 청년 디지털 소셜 임팩트 웹프로그래밍 강의
- 패스트캠퍼스 <시크릿 코드> 온라인 교육
- 엘리스 처음 배우는 웹코딩 과정 Instructor
- 모바아카데미 프로그래밍 기초 완성 프로그램 Instructor
- 연세대 디자인 툴 마스터 실무과정 HTML, CSS Instructor

어떤 클래스 인가요?

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

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

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

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

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

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

★원데이 클래스 상시 모집


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



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



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



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



* 첫 외주로 제작한 "키즈가오" 웹사이트에 적용된 레이아웃 작업 방식을 익혀보는 것으로 전체 커리큘럼을 구성하였습니다.
* 실습 페이지 : <a href="<a href='http://sisikiller.dothome.co.kr/' target='_blank'>http://sisikiller.dothome.co.kr/</a>" target="_blank" style="text-decoration: underline">키즈가오 링크</a>

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

실제 수강생의 리뷰입니다.

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

클래스 일정

강남 신촌홍대 온라인 LIVE

27,500원 / 시간 110,000원 / 총 1회 4시간