HTML/CSS Basic

230,000

필독 공지사항

본 페이지는 프로모션 페이지로 결제는 기존 리메인 사이트에서 진행 주세요.

필수 준비물

  • 개인 노트북 (windows, mac 모두 가능)

콘센트와 와이파이는 완비되어 있어요 :D

현장 스케치

클래스 분위기를 느껴보세요 :D

클래스 소개

과정을 수료하면이런걸 만들 수 있어요.

타 강의와 이런 차이가 있어요.

전직 강사가 아닌 실무자가 수업을 진행 한다는 점 입니다. 따라서 실무에서 가장 많이 쓰이고 핫한(?) 방법론을 빠르게 도입하고 불필요한 과정을 넣고 시간과 비용을 늘리지 않는 점이 가장 큰 장점 입니다.

05개설기간

59기수현황

1023배출인원

5년동안 1023명의 수료생을
배출한 농도짙은 HTML/CSS Basic
클래스를 소개 합니다.

클래스 장점

대부분의 학원은 디자인만 다루거나, 개발만 다루것이 대다수 입니다. 리메인은 UX 과정부터 디자인, 프론트 개발까지 시각적 영향이 미치는 과정을 실무부서처럼 커리큘럼으로 연결하여 각각의 클래스를 운영하고 있습니다.

본 과정은 웹 디자인 클래스와의 관계를 고려하며 운영중인 클래스이며, 백엔드 개발자분들의 커리큘럼 검증을 통해 개발적 요소도 놓치지 않고 있습니다.

HTML/CSS Basic 클래스 현장 스케치

혹시 이런 고민중 인가요?

오프라인 수업 꼭 들어야 할까요?
인강도 있고 블로그에 내용도 많은데...

잘 정리된 인강과 블로그는 얼마든지 있습니다. 다만 이것을 체계적으로 이행하며, 내용이 맞는지 검토까지 하는것은 오로지 본인의 몫이지요. 오프라인 수업의 목적은 소속감을 부여하여 공부 지속성을 부여하고, 체계적인 커리큘럼과 검증된 내용을 수강 하시는 분들에게 전달하는것이 목표라 생각 합니다.

이런 목표 설정은 혼자 공부하며 채울 수 없는 것들이 무엇인지 고민하게 만들었습니다. 따라서 실습 중심의 커리큘럼을 통해 혼자 공부할때 느끼는 답답함을 해소하고, 코드를 이해하고 있는지 검증하는 커리큘럼으로 자리잡게 되었습니다. 또한 적극적으로 질문할 수 있는 수업 환경을 조성하여 오프라인 수업만의 장점을 극대화하고 있습니다.

특별한 혜택

진도를 따라갈 수 있을지, 이해할 수 있을지 걱정인분들을 위해 온라인 강의를 제공합니다 :D

* 종강이후에도 평생동안 이용이 가능합니다.

클래스 하루 둘러보기

  • 이론수업

    커리큘럼 이론을 진행 합니다.

  • 실습수업

    실습을 통해 이론을 이해 합니다.

  • 궁금한 부분 질문하기

    이해되지 않거나 궁금한 사항은 언제든지 질문을 통해 해결할 수 있습니다.

  • 인강으로 복습 및 과제

    인강을 통해 복습 합니다 :D

강의장에 앉아보기

커리큘럼 분포도

본 과정은 HTML/CSS의 이해를 바탕으로 실습이 이루어지는 클래스 입니다. 만약 프로젝트/포트폴리오가 필요하다면 웹 프로페셔널 과정을 확인해 보세요.

클래스 실습 이미지

Background image를 이용해 배너 디자인을 만들어 봅니다.

웹에서 가장 많이 쓰이는 Card UI를 제작해 봅니다.

UI 디자인에서 사용된 행간과 자간을 CSS로 계산하는 법을 학습 합니다.

CSS 애니메이션(transition)과 호버 디자인을 알아 봅니다.

수업을 통해 배운 내용을 토대로 최종 예제를 만들어 봅니다.
본 수업 수료시 해당 예제 정도는 무리없이 제작할 수 있습니다.

최종 예제 보러가기

커리큘럼

#1 웹 표준과 접근성에 맞는 HTML

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

1강에서는 코드를 작성할 수있는 브라켓 에디터 환경세팅(설치 및 사용법)을 함께 진행하고, HTML을 이용해 제목, 단락, 목록, 이미지 등을 브라우저에 출력해 봅니다.

#2 웹 디자인 구현을 위한 CSS

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

2강에서는 CSS를 본격적으로 알아보는 시간입니다. 웹폰트 사용법과 폰트 색상, 크기등 서체에 관련된 다양한 CSS 디자인을 다뤄봅니다 :D

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

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

3강에서는 레이아웃을 배치를 위해 필요한 박스모델이란 개념을 알아 보며, 이 개념을 가지고 카드형 디자인을 만들어 봅니다. 또한 CSS에서 가장 중요한 클래스 사용법을 체계적으로 학습 합니다.

#4 웹 레이아웃을 위한 float

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

4강에서는 2단, 3단 같은 다단 레이아웃을 만들기 위해 필요한 float라는 개념을 학습합니다. 4강까지 수료하시면 웬만한 레이아웃을 잡을 수 있게 됩니다 :D

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

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

5강에서는 레이아웃부터 UI 요소까지 광범위하게 쓰이는 필수 재료인 positio을 알아보고, 백그라운드 이미지 사용법까지 학습합니다. 5강까지 수료하시면 이미지 배너, 3단 레이아웃등을 만드실 수 있습니다.

오시는길

서울 마포구 서교동 368-26 더 마운드 빌딩

주차장 이용은 불가 합니다.

  • 합정역 3번 출구 도보 6분 431m
  • 홍대역 9번 출구 도보 10분 654m
  • 서교동 예식장 타운 도보 4분 295m