튜터정보

부산대학교 디자인학
정보처리기사
웹디자인기능사

안녕하세요~

저는 원래 영상쪽을 전공했지만, 웹을 독학해서 현재는 웹퍼블리셔로 근무중인 부디입니다 : )

웹분야에 입문하시는 튜티님의 눈높이에서 항상 생각하며 수업을 준비하고 있습니다!

독학의 경험이 있기때문에 누구보다 입문자의 입장을 잘 알고, 입문자가 이해하기 쉽게 설명 할 수 있다 자부합니다!!

전망좋은 웹퍼블리셔, 프론트개발자!

저와함께 차근차근 준비해봐요

수업소개

✔️ 수업 장소
튜티님과 장소 조율 후 진행합니다!

✔️ 수업 스케줄

▶8월 수업 (신청 접수중)
수업 일정 : 협의후 진행

▶9월 수업 (상시 접수중)
수업 일정 : 협의후 진행

✔️ 수업의 목표
html/css수업은 대체적으로 진부하고 따분 할 수 있습니다.
태그종류를 외우고 사용법을 익히는 단순한 수업이 태반이고 튜터역시 그런 수업을 듣고 웹퍼블리셔가 됐습니다.
하지만 실무에서 쓰이지않는 따분한 기술들까지 순차적으로 배울 필요가 있나 싶고, 가장 많이 쓰이는 기술 위주로 핵심위주로 가르쳐 줄 강사가 필요하신 분들에게 이 수업을 추천드립니다.

✔️ 수업의 결과물
6회의 수업만으로 실무에 투입가능한 웹퍼블리셔가 될 순 없습니다.
하지만 이 수업을 듣고나면 html/css를 상황에 맞게 사용 할 수 있게되며, 스스로 발전해 나갈 수 있는 길이 보이실거에요.
그 뒤론 스스로 클론페이징(운영중인 홈페이지를 따라 만들어보는작업)을 하면서 포트폴리오를 쌓으면 분명 훌륭한 퍼블리셔가 되실 수 있을거에요!

✔️ 수업의 강점
따분한 기존 학원/과외수업이 아닌 개인에게 맞춤형, 자주 사용되는 태그는 꼼꼼하게, 트랜드에 맞지않거나 실무에서 사용되지않는 태그는 간단히 사용법만 알려주는 실용적인 수업입니다.
또한 수업을 듣고나면 국가공인자격증인 웹디자인기능사 취득까지 가능하도록 지도해드립니다.

✔️ 수업소개

안녕하세요!

저는 디자인학과를 졸업하고 국립대학교 전산원, 교육업계 회사를 다니고있는 웹퍼블리셔입니다.
본 수업으로 HTML/CSS가 필요한데 독학하기는 힘드신분들에게 도움이 되어드리고싶고, 저에게는 제 실력을 되짚어보는 계기가 될 수 있었으면 좋겠습니다.

수업은 비전공자 기준으로 진행될예정이며 수강생들의 수준을 파악한 후 그에 맞는 수업으로 진행할 것입니다.
그리고 각자 노트북은 준비해주셔야하며, 설치프로그램은 VSCode(무료)입니다.

*수업에 관한 문의는 언제든지 실시간톡 주시면 상세하게 답변드리겠습니다!

수업대상

1. HTML/CSS을 배우고싶으신 비전공자분
2. 웹에디터를 다루는 직장(온라인 뉴스/보도자료)에 근무하시는분
3. 컴공출신 개발자이지만 HTML/CSS에 약하신분
4. 웹디자인기능사 자격증을 원하시는분
5. 취미로 홈페이지 제작을 해보고 싶은분
6. 인터넷쇼핑몰을 운영하시거나 운영을 담당하시는분
7. 웹디자이너로 취직을 준비하시는분

⛔ 이런분들에게는 이 수업이 맞지 않습니다
- 이미 웹퍼블리셔로 재직중이신분
- HTML/CSS로 기본적인 구조를 짤 줄 아시는분
- 그저 튜터가 본인이 원하는 홈페이지를 만들어 줄 것이라 생각하시는분

커리큘럼

1회차

/* 커리큘럼은 비전공자 수강생들 기준으로 만들었습니다.
수강생의 레벨에 따라 약간의 변동사항이 있을 수 있습니다. */

- 웹과 HTML/CSS에 대한 이론적 설명(10분내외)

- HTML5 기초 기초상식(2시간)
0. 유인물 수령 (커리큘럼 및 HTML태그 정리)
1. 루트폴더 생성 및 코딩환경구현하기
2. 홈페이지의 구조 및 HTML5와 기존HTML의 차이점
3. 절대경로와 상대경로
4. Block요소와 Inline요소의 차이점과 이용사례
5. HTML내에서의 텍스트 사용법
6. 웹에디터 사용법

* 1회차 수업이 끝나면 html이 무엇인지, 어떤 요소들로 이루어져있는지, 요소들을 나눌 수 있는 가장 큰 특징이 어떤것인지 알 수있게됩니다

2회차

- HTML5 기초 - Block요소
1. div와 p태그 사용법
2. ul,li 태그
3. h-group
4. table

- CSS3 기초 - Block요소
1. CSS의 3가지 사용방법, 외부스타일시트 연결하기, 스타일시트 초기화
2. div와 p에 색상, 크기 , 테두리 지정하고 Inline속성으로 변경하기
3. ul과 li를 사용하여 슬라이드다운메뉴만들기

* 2회차 수업이 끝나면 비교적 이해하기쉬운 html의 block요소들을 이해하고 그 요소들을 꾸미는 css속성들을 사용할 수 있게 됩니다.

3회차

- HTML5 기초 - Inline요소
1. a태그 (3가지 target의 차이점)
2. img태그 (절대경로와 상대경로설명, alt - 웹접근성 설명)
3. span strong em태그

- CSS3 기초 - 실무에서 가장 많이 쓰는 속성
1. 실무에서 사용되는 position과 float속성 사용법
2. margin과 padding의 사용법

*3회차 수업이 끝나면 Block과 Inline요소의 차이점을 알게되어 html의 전반적인 구조가 어떻게 이루어져있는지 이해할 수 있게되어 상황에 맞는 태그들을 사용할 수 있게됩니다.
또한 block요소를 배치하여 홈페이지의 전체적인 그리드를 나눌 수 있게 됩니다.

4회차

- HTML5 기초 - wrap박스를 이용한 중앙정렬 및 CSS 기초

- CSS3 기초 - 선택자
1. id선택자, class선택자, 태그선택자에 대한 설명
2. 가상선택자

* 4회차 수업이 끝나면 전형적인 세로형 가운데 정렬 홈페이지 구조를 짜실 수 있게됩니다.
또한 HTML요소를 꾸며주는 CSS를 배우게되고, 가상선택자를 이용하여 마우스over시 요소가 변화하는 애니메이션을 구현 가능할 수 있게 됩니다.

5회차

- HTML5 응용 - 이미지 슬라이드 / inline배치
1. swiper.js를 사용한 이미지슬라이드 제작
2. modal 팝업
3. 요소의 overflow를 처리하는 여러가지 방법

*5회차 수업이 끝나면 실무에서 많이 사용되는 기본적인 응용법들을 배우실 수 있게됩니다.
이때는 홈페이지 시안이미지를 보면서 직접 코딩할 수 있게 됩니다.

* 5회차 수업이 끝나면 이미지슬라이드의 원리 및 요소들의 배치, 모션을 위한 j-query구문을 알 수있습니다.
이 단계에서 j-query의 이해가 조금 힘들 수 있으니 간단하게 설명하겠습니다.
어떤 홈페이지에서든 사용되는 이미지슬라이드의 사용은 매우 중요하기때문에 5회차에는 꼭 참여하십시오

6회차

- HTML5 응용 - display:flex
1. flex박스 설명 및 크로스브라우징 이슈해결
2. 코드 피드백

* 6주차엔 맨투맨으로 코드리뷰를 해드리고, 단계별로 홈페이지를 처음부터 끝까지 제작할 수 있게 지도해드립니다.

▶ 6주 수업이후 "12시간만에 반응형웹 만들기" 수업을 수강 할 수 있습니다.