위치

요일

가능
시간
(날짜)

  • 오후 2시~5시 (협의)
장소 : 협의 후 결정
추가비용 : 없음
장소는 건대역 스터디룸/ 1:1수업인경우 장소 변경 됩니다/ 스터디룸 비용 (수업료에 포함되어 있습니다.)/ 준비물 : 개인 노트북
₩18,000원 / 시간
₩324,000 / 총 6회 18시간
실시간 톡하기 찜하기
윤호소
SoYounHo
HTML5 / CSS3 실전 반응형 웹구축
  • 건대
  • 3시간/회
  • 최대인원:1~3
  • ₩18,000/시간

튜터정보

  • 장안대학교 패션디자인과
현재 서울에서 4년차 웹 프론트엔드 엔지니어로 일하고 있으며 아름다운 인터페이스와 애니메이션을 구현하는 것을 즐깁니다. 개발자의 가치는 비즈니스 가치를 구현하는데서 나온다고 믿습니다.


────────────────────
경력 :

- 스탤리온 엔터테인먼트 : 디자인 및 퍼블작업
- ofunlife : 디자인 및 퍼블작업
- 오렌지팩토리 : 디자인 및 퍼블작업
- 현대상선 : 퍼블작업
- 서울경제TV : 퍼블작업

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

수업소개

⦾ 수업 정보
────────────────────

매주 토
오후 2:00 ~ 5:00

필수 준비물: 개인 노트북


⦾ 수업 설명
────────────────────
퍼블리셔 입문 수업입니다.

가장 기본이 되는 HTML, CSS를 배우며, 숙제를 하고 함께 실습합니다.
앞으로 어떻게 홈페이지를 만들 수 있는지 알 수 있게 되고,
혼자도 시작할 수 있는 힘을 길러드립니다.
수업을 통해서 HTML/CSS 를 사용하여 포트폴리오 웹사이트 개발을 하게됩니다.

디자이너 분이라면!
그리드 기반의 시스템 디자인을 통해 보다 유연한 개발 환경을 고려한 콘텐츠 흐름을 설계할 수 있는 능력을 배양하고 자신의 디자인을 웹 기술을 활용하여 퍼블리싱 할 수 있는 역량을 기릅니다.

기획자 분이라면!
프론트엔드 개발에서 HTML과 CSS가 담당하는 역할을 이해하고 이를 바탕으로 조직 내 디자이너 및 개발자와 협업 시 원활한 커뮤니케이션을 할 수 있는 역량을 갖출 수 있습니다.

입문자 분이라면!
HTML과 CSS에 흥미를 느끼게 되고 더 나아가서 javascript에 관심을 가지고 프론트엔드 개발자를 꿈꿀 수 있게 능력을 심어드립니다.

수업대상

  • 본 강의는 입문자들 대상으로 하는 강의입니다.
    하지만 온라인이나 오프라인 등에서 이미 HTML/CSS를 경험한 적이 있다면 강의의 효과가 배가 될 것입니다.

    IT 기획자(HTML, CSS 능숙도 하)
    프로그래밍 입문자 (HTML, CSS 능숙도 하)
    디자이너 (HTML, CSS 능숙도 중)
    개발자 (HTML, CSS 능숙도 중)

커리큘럼

1회차

HTML 기초

실습
• HTML의 개념 이해하기
• HTML 기초문법 알아보기
• HTML5와 시멘틱 웹이란?
• 제목태그, 단락태그, 목록태그 사용법
• section, aside 태그 사용법

2회차

HTML+CSS 기초

실습
• 속성 개념 이해하기
• 이미지태그 사용법
• 앵커태그 사용법
• CSS의 개념이해
• CSS 외부파일 생성과 연결
• CSS 기초문법
• 서체색상, 서체크기, 서체지정 다루기
• 서체두께, 자간, 행간 다루기

3회차

UI 디자인을 위한 박스모델 이해하기

실습
• 박스모델의 이해
• 클래스 사용법
• 클래스 네이밍 : BEM 방법론
• CSS 우선순의 이해
• CSS 초기화

4회차

웹 레이아웃을 위한 float

실습
• 가상 클래스와 가상요소
• display 속성의 이해와 응용
• float와 float 해제의 이해
• float를 이용한 다단 레이아웃

5회차

심도있는 레이아웃을 위한 position

실습
• block 요소 중앙정렬 소개
• inline 요소 중앙정렬 소개
• 배경 이미지 사용법
• position의 이해
• position 응용

6회차

모바일을 위한 미디어쿼리

실습
• 미디어쿼리 문법의 이해
• 미디어쿼리 CSS 우선순위의 개념
• viewport의 이해
• 모바일 헤더와 PC 헤더의 이해

리뷰

리뷰쓰기

실시간톡

실시간 톡하기

위치

지도가 들어갑니다.