오픈신청이 완료 되었습니다.

클래스 오픈시 가입하신 핸드폰 번호로 문자를 발송 드립니다 :D
고객센터 02-6080-8623

HTML,CSS
Basic
Class

CREATOR. KimJunu

Online Live : HTML,CSS Basic

20% 230,000원

총 184,000원 5주 과정

할인종료까지 00 : 00 : 00

일정
2021.01
  • 강의
  • 특강
  • 휴강
  • 휴무
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23 1강 개강
24 25 26 27 28 29 30 2강
31
2021.02
  • 강의
  • 특강
  • 휴강
  • 휴무
일 월 화 수 목 금 토
1 2 3 4 5 6 3강
7 8 9 10 11 12 13 휴무
14 15 16 17 18 19 20 4강
21 22 23 24 25 26 27 5강
28
navigate_next
navigate_before
close

필독 공지사항

6년 동안 1,123명의 수료생을 배출한
농도짙은 HTML/CSS Basic 클래스

잘 정리된 인강과 블로그는 얼마든지 있지만, 혼자서 공부를 지속한다는 것은 꽤나 어려운 일 입니다. 따라서 본 클래스는 실습 중심의 커리큘럼을 통해 혼자 공부할때 느끼는 답답함을 해소해드리고, 이해되지 않는 부분을 바로 질문하고 답변 받을 수 있도록 수업 환경을 조성하고 있습니다. 또한 코드의 이해도를 극대화하기 위해 매 주차마다 미션을 드리고 있습니다.

5주간 4개의
미션을 진행해 볼 거예요

  • #1. 텍스트, 이미지, 버튼 출력해보기

    텍스트와 이미지, 버튼을 브라우저에서 출력해보며 HTML 코드가 어떻게 동작하는지 이해해 봅니다.

  • #2. 디자인 위한 박스모델 만들기

    디자인을 구성하는 요소인 너비, 높이, 여백, 선을 CSS로 실습해보며 이를 활용한 디자인 작업물을 제작해 봅니다.

  • #3. 카드 디자인과 배너 디자인 만들기

    카드 디자인과 배너를 제작해보며 디자인된 작업물을 직접 구현해 봅니다.

  • #4. 미니 사이트 만들기

    4주동안 배운 모든 내용을 결합하며 미니 사이트를 제작해 봅니다.

navigate_before
navigate_next

우리는 이런걸 배워요

  • 디자인 작업물을 보고 퍼블리싱을 하는 방법

    막상 만들어보려면 막막한 디자인 작업물을 강사와 함께 체계적으로 제작해보고, 나아가 스스로 디자인 작업물을 코딩으로 구현할 수 있게 됩니다.

  • HTML/CSS로 사이트 제작과정을 경험해봐요

    레이아웃, 타이포그래피 등 디자인 결과물이 어떻게 HTML/CSS로 구현되는 지 상세히 알아봅니다.

  • 코드수정(유지보수) 노하우

    코드를 수정해야하는 업무나 상황이 생각보다 많습니다. 본 과정을 통해 스스로 코드를 수정할 수 있는 능력을 길러봅니다.

  • 퍼블리셔가 되기위한 첫걸음을 뗍니다.

    HTML/CSS 기초부터 미니 사이트 제작까지 경험해 보면서 퍼블리셔가 되기위한 첫걸음을 떼봅니다.

navigate_before
navigate_next

클래스 스피커를 소개합니다!

안녕하세요.
클래스 스피커 김준우입니다.

안녕하세요. 디자이너 김준우입니다. 저는 리메인 아카데미와 에이전시를 운영하며 디자이너이자 프론트엔드 개발자로 다수의 기업과 프로젝트를 진행해온 실무자입니다. 제가 진행하는 클래스는 웹 디자인과 개발 단계의 상호작용을 배울 수 있도록 구성되어 있습니다. 굳이 디자인을 공부하며 코드까지 공부해야할까? 생각할 수 있지만, 웹이라는 하나의 결과물을 만들기 위해서는 웹 디자이너와 퍼블리셔가 함께 고민하는 과정이 필요합니다. 이때, 서로의 작업 방식과 사고 방식을 이해해야 비로소 심도있는 결과물이 나올 수 있습니다. 웹 디자이너와 퍼블리셔의 시선에 맞춰, 웹의 구조와 작동 방식을 이해하고 실제 업무에 적용할 수 있도록 도와드리겠습니다.

커리큘럼

  • 01 웹 표준과 접근성에 맞는 HTML5
    • HTML의 개념 이해하기
    • HTML 기초문법 알아보기
    • HTML5와 시멘틱 웹이란?
    • 제목태그, 단락태그, 목록태그 사용법
    • section, aside 태그 사용법
  • 02 웹 디자인 구현을 위한 CSS
    • 속성 개념 이해하기
    • 이미지태그 사용법
    • 앵커태그 사용법
    • CSS의 개념이해
    • CSS 외부파일 생성과 연결
    • CSS 기초문법
    • 서체색상, 서체크기, 서체지정 다루기
    • 서체두께, 자간, 행간 다루기
  • 03 UI 디자인을 위한 박스모델 이해하기
    • 박스모델의 이해
    • 클래스 사용법
    • 클래스 네이밍 : BEM 방법론
    • CSS 우선순의 이해
    • CSS 초기화
  • 04 웹 레이아웃을 위한 float
    • 가상 클래스와 가상요소
    • display 속성의 이해와 응용
    • float와 float 해제의 이해
    • float를 이용한 다단 레이아웃
  • 05 심도있는 레이아웃을 위한 position
    • block 요소 중앙정렬 소개
    • inline 요소 중앙정렬 소개
    • 배경 이미지 사용법
    • position의 이해
    • position 응용

안녕하세요.
우리 클래스를 소개합니다.

웹 입문자를 위한
HTML/CSS Basic 클래스입니다

혼자 공부할때는 느끼는 막막함을 해소하기 위한 클래스로 기초지식없이 시작할 수 있습니다. 퍼블리셔 직무가 궁금하거나 퍼블리싱을 이해 못하는 디자이너, 코드 유지보수가 필요한 분들이 수강하시면 도움이 됩니다.

우리가HTML/CSS를 공부하기전
실무 퍼블리셔와 웹 디자이너는 어떤 고민을 하고 있을까요?

  • "웹 디자인과 퍼블리싱 단계는 서로 긴밀하게 연결되는 분야지만 서로를 별개의 영역으로 생각하는 경우가 많아, 각 업무 간 의사소통을 할 때 어려움을 겪기도 해요”

    3년차 웹 디자이너 김00

  • “코드를 완벽하게 이해하고 쓰는게 아니다 보니 이것저것 넣다가 구동 되면 이게 왜 되는지 모르고 넘어가요. 나중에 코드에 문제가 생기지 않을까 늘 노심초사해요...”

    UX/UI 디자이너 윤00

  • "작게는 타이포, 버튼부터 크게는 웹의 구조까지 실무에서는 퍼블리싱을 하더라도 디자인적인 사항을 고려해야해요. 디자이너가 작업한 타이포그래피나 디자인가이드, 나아가 그리드시스템까지 어떻게 코드로 옮겨야 할지 막막할 때도 있어요"

    주니어 퍼블리셔 윤00

navigate_before
navigate_next

그래서 준비한 클래스
포인트 강점, 첫 번째

디자인 파일을 퍼블리셔가 건네받으면 어떻게 접근해서 퍼블리싱 해야 할지 타이포그래피와 레이아웃 등 파트별로 나누어 자세히 설명드립니다.

클래스 포인트 강점, 두 번째

디자이너 출신의 퍼블리싱 실무자가 디자인 파트와 퍼블리싱 파트를 오가며 어떻게 합의점을 찾을지 디테일하게 설명 드립니다.

클래스 포인트 강점, 세 번째

매주 배우는 내용을 인강으로 준비해 두었어요! HTML/CSS를 단순히 따라 하는것이 아닌 현재 퍼블리싱 코드가 어떻게 동작하는지 원리와 이해하게 커리큘럼이 준비되어 있습니다. 혹시나 이해가 되지 않더라도 인강을 통해 다시 복습하실 수 있습니다.

클래스를 마치고,
여러분은 이렇게 달라질 거에요

클래스에서 진행되는 예제입니다

심미적인 디자인을 하는 것에 그치지 않고,
필드에서 적용 가능한 UI 디자인을 고려할 수 있게 됩니다

  • 실무 기반의 프로세스로 UI 디자인 포트폴리오를 제작할 수 있습니다.
  • 실제 코드로 개발 가능한 UI 디자인을 설계할 수 있습니다
  • 디자인한 작업물을 HTML,CSS 코드로 구현할 수 있습니다

우리는 이렇게 느꼈어요!

  • item-comment__thum 권솔이 20.08.13
    전학원에서 그냥 이렇게쓰는거다라고 따라쓰기만했던 태그 직접코딩하면 어디부터손대야할지막막..했는데 선생님덕분에 전체흐름을알게된 코딩 보는눈이 트인거같아요 ~!! 끝나고도 혼자서 직접 홈페이지 코딩할수있을것같아요 매번느끼지만 쌤이 엄청 열정적이고 위트있으신거같아용 ㅎㅎ 다음에 디자인수업도듣고싶어요 강추요~^^
  • item-comment__thum 박예은 20.08.13
    웹에 대해 아무것도 모르고 시작했는데 기초부터 꼼꼼하게 알려주시고 좋습니다 ^*^!
  • item-comment__thum 이지민 20.08.13
    아무것도 모르고 강의를 들었어요. 최소 HTML과CSS를 모두 이해할 수있구요, 강의마다 내주시는 과제(배운것 복습하기)로 열심히 따라가면 질문할 것도 얻어갈 것도 많은 강의에요. 입문용으로나 실무코딩 활용으로나 개인실력별로 응용 할수있을거같구요. 사실 코딩이 뭔지도 모르고 시작한건데 그 개념을 잘 알게됬어요. 실무에서의 팁이나 노하우를 강의중에 말해주는것도 좋았지만, 2d인 시각적 디자인에서 시작해, 먼저 이해하고 해석하고난 뒤 웹으로 구현해낸다는 개념 자체가 신기했어요. 그림같은 디자인이 스웨터 뜨듯이 웹으로 완성되다니! 정리를 차근차근 해 나가면서 코딩을 하면 절대 정신사납지 않아요. 왠지 코딩은 이과의 천재적인 적성에 의존해야한다는 편견이 있었는데, 오히려 이용자들이 쉽고 자유롭게 디자인할 수 있도록 만든 언어라는게 이 짧지만 임팩트 강한 5개 강의를 통해 느껴졌네요. 샘이 정리를 잘해주셔서 그런가욤ㅎㅎ 강의 끝나고 땡이아니라 인강 서비스나 모르는 점있으면 케어해주신다고 하시니 얻어갈게 많은거같아요. 하나라도 더 알려주려고 하시는 점이 인상깊었습니당. 일단 이 강의를 들으면 크롬 요소 검사를 켜서 자주가는 사이트를 요리조리 뜯어보는 재밌는 스킬이 생깁니다.
  • item-comment__thum 이은지 20.08.13
    10월부터 5주동안 이 수업을 들었습니다. 처음에는 코딩을 이해하기 어려운 언어, 공대생들만 할 수 있는 복잡한 것이라고 생각을 하였는데, 이 수업을 듣고 그동안의 편견을 깰 수 있었습니다. 수업을 맡으신 선생님이 아무래도 디자인을 전공하시고 웹디자인을 하시는 분이다 보니 디자인을 전공한 학생 혹은 디자이너가 이해하기 쉽도록 잘 설명을 해 주셔서 금방(?) 따라 갈 수 있었습니다. 일주일에 한번씩 총 5번의 강의라서 CSS로 웹을 구현하는 과정까지 배우니 타이트하게 느껴지긴 했지만, Step by step 으로 코딩과정을 배워나갔습니다. 이 강의를 들으 실 때 주의하실 점은, 쉬는시간이나 수업시간전에 화장실은 꼭 갔다와야하고 (눈깜짝 할사이에 금방 넘어갑니다.) 1분 1초라도 집중을 하지 않으면 안됩니다. 그리고 수업이 끝나면 주중에 1~2번정도는 복습을 하면 강의도 더 재미있게 들을 수 있습니다.(그렇다고 어려운 강의는 아닙니다. 이해하기 쉽게 알려주십니다.) 또, 이해가 안되는 부분이 있으면 반드시 질문을 해야합니다. (그렇다고 전부 이해가 안가는 강의는 아닙니다. 그냥 강의를 듣다보면 왜 그렇게 되는건지 궁금해지는 부분이 생깁니다.) 어찌됐든, 코딩수업을 들으시면 절대로 돈이 아깝다는 생각은 안듭니다! 웹디자인이나 UX/UI 하시는분들께는 꼭 추천해드려요!!
  • item-comment__thum 한진희 20.08.13
    웹디자인의 개념 하나도 몰랐기에 이 수업을 들어도 될지 고민이 많았지만 막상 듣고 보니 전~~~~혀 어렵지 않았어요!! 넘나 듣길 잘한 것 ㅠㅠ 이해 여부 때문에 고민을 하는 분이라면 주저말고 완전 강추합니다~! 선생님 정말 친절하게 또 재미있게 하나부터 끝까지 이해와 이유를 통해서 퍼블리싱을 알려주십니다. 개인적으로 그냥 단순히 외우고 이거입니다! 라는 식의 강의를 정말 어려워하는데 선생님은 알차게 정말 요령있고 유두리있게 설명해주시고 시간이 결코 낭비 되지 않는 수업이에요~ 무엇보다 과제만 열심히 한다면 큰 만족과 성과를 얻게 될거에요~ 웹디자이너로써 퍼블리셔와의 충동이 있으신 분들에게는 충분한 갈등 해소를 도와주는 강의! 선생님 강의 스타일에 반해서 웹디자인 황급비율 수업도 바로 연이어 신청해서 들었습니다 ㅋㅋㅋ 쌤 감사해요~ 수고하셨어요~~~ :D
후기 더보기

우리는 이런 분위기로 수업해요!

navigate_before
navigate_next

클래스 수강을 위해선
이런 준비물과 프로그램이 필요해요!

  • 개인노트북 (window, mac 운영 체제 모두 사용 가능)

  • Adobe Photoshop CC (최소 CS6 이상 버전)

  • Adobe Illustrator CC (최소 CS6 이상 버전)

  • Brackets (강사님과 함께 설치 진행)

오시는길

  • 클래스 주소 서울 마포구 양화로6길 33
  • 상세소개 2층 리메인

현재 클래스와
함께 수강하면 더욱 좋아요!

쿨하고 깔끔한 환불정책

환불규정 안내

  • 100% 전액환불 : 개강 전까지
  • 33% 공제환불 : 강의 1/2 지나기 전 시점
  • 공제환불 불가 : 강의 1/2이 지난 시점
  • 환불은 신청한 일자 기준으로 처리되며, 강의가 시작되는 당일은 강의를 듣지 않았더라도 해당일자에 포함됩니다.

학원의 설립ㆍ운영에 관한법률 제18조 및 동법시행령 제18조 제3항 〔별표 4〕의 기준에 따른다.

expand_less expand_more