요일

가능
시간
(날짜)

  • 오후 1시 - (협의)
장소 : 협의 후 결정
추가비용 : 스터디카페(룸 예약 시) 비용.
서울 신촌홍대, 종로(종각역 일대), 강남 가능합니다. 인천 송도, 부평, 구월동 가능합니다. 그 외 기타 지역도 문의 주시면 됩니다.
₩9,000원 / 시간
₩216,000 / 총 8회 24시간
장근호
루트장
같이 하면서 배우는 HTML5 & CSS3 기초
  • 신촌홍대, 종로, 강남
  • 3시간/회
  • 최대인원:1~4
  • ₩9,000/시간

튜터정보

  • 동양미래대학 e-비즈니스학
동양미래대학 e-비즈니스학과 전공.
FASTCAMPUS Web front-end 10th 수료.

안녕하세요. 정통한 프론트엔드 개발자를 꿈꾸며 달려나가고 있는 장 근호라고 합니다.
오랜 생각 끝에 하고 싶은 걸 하기로 결정하였고 프론트 엔드 개발자를 꿈꾸게 되었습니다. 비전공자로서의 어려움과 아무것도 모르던 시절의 공부법등을 몰랐고, 이제야 어느정도 알게 되었습니다. 이를 여러분과 함께 나누고 싶습니다.


* To-do app 프로젝트, 야놀자 펜션 카피 프로젝트 진행 중.
* HTML5, CSS3, ES5, ES6, Typescript, Angular
* jQuery, React.js, Vue.js 등 공부 중
* 스타트업 인턴즈 참여 중


성실함 : 언제 어디서든 물어봐주세요
친절함 : 이해가 될 때까지 도와드립니다
열정 : 제가 좋아하는 것 만큼 여러분도 좋아할 수 있게!

수업소개


이론도 중요하지만 HTML, CSS의 기초는 결국 '직접 해보기'가 가장 중요하다고 생각합니다. 제가 준비한 예시들을 따라해보면서 최종적으로는 간단한 웹 사이트를 구축해보는 것을 목표로 하고 있습니다.
아이디어를 실현해보기 위해 도전했지만 어려워서 포기 하셨었다면 이 기초를 통해 한 걸음 앞으로 나아 가셨으면 좋겠습니다.

우리는 살면서 인터넷을 정말 많이 접하게 됩니다. 우리가 어떠한 직장에 가게 될 진 모르지만 이제 프로그래밍은 빼놓을 수 없는 하나의 산업이 되었습니다. 특히 우리가 접하는 웹에 대해서 안다면 혹시나 있을 웹 디자이너, 웹 퍼블리셔 혹은 프론트엔드 디자이너와의 협업에서 그들과 소통하는 데 어려움을 느끼지 않도록 하기 위해 이 수업을 기획하게 되었습니다.

그래서!

* 프로그래밍 입문자다.
* 프론트엔드 개발자 혹은 웹 퍼블리셔와 프로젝트를 해야 하는 데 용어조차 모른다.!
* 웹에 관심이 있어서 한 번 배워보고 싶다.!
* HTML이나 CSS에 관심이 있어 기초를 배우고 싶다!

하시는 분들을 위한 수업입니다.

4차 산업 혁명 시대에는 정말 많은 분야의 IT 산업이 있습니다. 하지만 이 웹! (트렌드는 웹 앱)이 사라질 가능성은 매우 낮습니다. 우리가 이러한 산업 분야를 이해하기 위해서, 혹은 거의 모든 사람들이 사용하는 웹을 이해하기 위해선 그 기반이 되는 언어를 이해할 필요가 있습니다.

이 수업은 그 이해를 돕기 위해 기초부터 차근차근 HTML, CSS가 어떠한 언어인지를 알아가는 과정입니다. 블로그와 다양한 예제를 통해서 배워가는 HTML, CSS를 느껴고 실습하며 간단한 웹 페이지를 제작할 수 있게 됩니다.



참고자료

블로그 : https://rootjang92.github.io/
깃허브 : https://github.com/Rootjang92

그 외 자료는 유튜브를 확인하세요.


수업대상

  • 추천
    1. HTML, CSS, Javascript를 하나도 모른다!
    2. 웹 퍼블리셔를 지향하고 있어서 HTML, CSS를 기초부터 배워보고 싶다.!
    3. 기초를 다지고 싶다.
    4. 취미로 웹 사이트 만드는 법을 알고 싶다.
    5. 내가 만들고 싶은 웹 사이트가 있다.!
    6. 향후 프론트엔드 개발자로 나아가고 싶다.
    7. 프로그래밍 초보다.


    비추천
    1. 웹 퍼블리싱이 어느 정도 가능하다.
    2. 자바스크립트를 충분히 이해하고 있다.
    3. 프론트엔드 개발자로 일하고 있다.

커리큘럼

1회차

[HTML 알아보기]

- HTML, CSS 그리고 JavaScript
- 레이아웃?
- 크로스 브라우징
- 웹 표준이 뭐야?

[HTML 시작하기]

- Vscode 설치하기
- HTML이 뭔가요?
- index.html
- HTML 태그 구성 요소와 기본 구조
- 주요 태그는 무엇이 있을까?
- 닫힌 태그, 열린 태그
- HTML 주석


2회차

[HTML & CSS]

- 공간 정의하기
- Block, inline


[ CSS start ]

- CSS가 뭐죠?
- 구성요소와 연동방법
- Selector

[ CSS 사용해보기 ]

- 상속
- 우선순위와 캐스케이딩
- 주석

3회차


[ 주요 속성 익히기]

- width, height
- font
- background

4회차

[ 레이아웃에 영향을 미치는 요소들]

- Box-model
- 박스모델에 4가지 요소들
- 마진 병합?
- display
- position

[ 레이아웃에 영향을 미치는 요소들 part.2]

- z-index
- float
- 고정 레이아웃 구조 만들어보기
- float와 clear?

5회차


[ 신조어 ]

- 영역에 변형 효과 주기
- 변하는 과정 표현하기
- 애니메이션

[ 메뉴 버튼 ]

- 정적인 메뉴 버튼과 동적인 메뉴 버튼


[ 프로젝트 시작 ]

- 폴더 구조 짜보기
- 구조짜기, 로고 배치
- 레이아웃 작업

6회차

[ 프로젝트 진행하기 ]

- 각 페이지 별 레이아웃 작업
- 애니메이션 파일 연동
- 애니메이션 적용하기

튜터영상

리뷰

리뷰쓰기

실시간톡

실시간 톡하기

위치

지도가 들어갑니다.