소개

흔들리는 CSS 기본기를 바로 잡고, 실무 레이아웃 자신감을 되찾으세요!



단계
중급

강의기간
5시간씩 2회

정원
30인, 선착순 마감

특장점
사전 과제 수행 + 피드백

강의형태
줌 라이브 강의

커뮤니티
전용 디스코드 채널



감으로만 쌓은 CSS 지식, 제대로 진단하고 다지기


👽 이런 순간, CSS 앞에서 작아지지 않나요?

  • React/Vue는 자신 있는데, 레이아웃만 잡으려면 한숨부터 나온다.
  • 분명 디자인 시안대로 했는데, 디자이너가 왜 인지 불만 가득한 반응이다.
  • !important 없이는 스타일 적용이 너무 힘들다.
  • 화면 깨짐 문제, 반응형웹 문제를 자바스크립트로 억지 해결하고 있다.
  • position, flexbox, grid… 언제 뭘 써야 할지 여전히 헷갈린다.
  • 내 CSS 실력, 정확히 어느 수준인지, 뭐가 부족한지 모르겠다.

👍 이런 프론트엔드 개발자분을 환영합니다.

  • 주니어 프론트엔드 개발자.
  • 자바스크립트에는 자신이 있지만, CSS 기초가 부족하다고 느끼는 분.
  • 디자인을 코드로 옮기는 과정에서 어려움을 자주 겪는 분.
  • 생성형 AI의 도움만으로는 한계가 있다고 느끼는 분.
  • 원리를 제대로 이해하고 자유자재로 컨트롤 하고 싶은 분.
  • 자신의 CSS 실력을 객관적으로 점검하고 기본기를 탄탄히 다지고 싶은 분.

🥇 이 강의를 통해 얻게 되는 것


🌱 기초에 집중
CSS 핵심 원리의 명확한 이해 및 교정

💡 원리를 확실히 알기
감이 아닌 원리에 기반한 CSS 문제 해결 능력 향상

⚙ 설계하기
더 유연하고 유지보수하기 좋은 사용자 화면단 설계

⚓ 이 강의를 추천하지 않는 대상

  • HTML,CSS를 처음 배우는 완전 입문자.
  • CSS의 최신 기법, 애니메이션, 고급 CSS 기능/방법론 학습 희망자.
  • 내 포트폴리오를 단순히 좀 더 화려하게 만들고 싶은 분.
  • 특정 CSS 프레임워크 사용 방법을 배우고 싶은 분.
  • 디자인 감각을 배우고 싶은 분.

여러분들의 목표 달성을 위한 알찬 시스템


👋 실시간 줌 라이브 강의 + 디스코드 커뮤니티로 배우는 몰입형 학습

  • 오프라인 못지않은 소통: 실시간으로 진행되는 줌 라이브 강의를 통해, 강사와 즉각적인 소통이 가능합니다. 질문이 생기면 바로 답을 얻고, 함께 학습하는 동료들과도 교류할 수 있습니다.
  • 집중 학습 환경: 녹화된 영상을 혼자 시청하는 방식과 달리, 줌 라이브 강의는 정해진 시간에 집중력을 발휘할 수 있도록 돕습니다. 강사의 실시간 피드백과 동료간 상호작용으로 이해도를 높입니다.
  • 협력과 성장: 디스코드 커뮤니티를 통해 강의중과 챌린지 수행중 언제든 질문을 남길 수 있으며, 강사와 동료들이 함께 답을 찾습니다. 혼자 고민하지 않아도 됩니다.

챌린지 중심의 학습 시스템


🎯 이벤트 참여 전, 사전 과제가 주어집니다.

본격적인 줌 라이브 강의가 시작되기 전, 피그마 기반의 웹디자인이 과제로서 출제됩니다. 여러분들의 현재 CSS 작업 수준과 방향성을 가이드 해 드리기 위한 사전 과제입니다. 사전 과제는 강사의 1:1 피드백이 제공됩니다.

🪓 주말 이론 강의 수강 후, 또 하나의 과제 진행하기.

주말에 배운 이론을 기반으로 수행 할 수 있는, 피그마 기반의 웹디자인 과제가 출제 됩니다. 1일차, 2일차, 이렇게 총 두개의 과제가 출제 됩니다. 해당 과제는 1:1 피드백 대신, 별도의 풀이 영상이 제공 됩니다.

교육과정

무엇을 배우고 진단하나요?


🍎 사전 과제 출제
수강생의 현재 CSS 활용 수준을 객관적으로 파악하기 위한 피그마 기반, 과제가 주어집니다. 해당 사전 과제는 개강일 전까지 제출 마감이며, 1:1 피드백이 제공됩니다.


1주차CSS Essentials

다년간의 강의 경험을 통해 엄선된, 꼭 알아야 하는 CSS의 기초 지식을 농축액 스타일로 쭈욱 알아보는 시간을 가집니다.

Box-model display initial value inheritance cascade specificity negative margins collapsing margins auto keyword percentage unit

줌 라이브 이론 강의

  • CSS 초기값에 대한 이해
  • 사용자 에이전트 스타일시트와 초기화
  • 캐스케이드와 셀렉터 특정성 점수
  • 상속의 이해와 활용
  • 네거티브 마진의 이해와 활용
  • 마진 병합 현상 이해

챌린지

  • 네거티브 마진과 width % 단위 활용하는 피그마 챌린지
  • 챌린지 풀이 영상 제공

2주차CSS Layouts

레이아웃의 핵심, Flexbox, Grid, Position에 대하여 집중적으로 알아 봅니다. 탄탄한 레이아웃을 만들기 위한 핵심 개념 위주로 설명합니다.

inline, block flexbox grid min-width max-width containing block stacking context position inset

줌 라이브 이론 강의

  • flexbox, grid, position 다시 알아보기
  • width, flex-grow, flex-shrink, flex-basis의 상관 관계
  • min-width, min-height의 의미와 변수 해결하기
  • 컨테이닝 블록, 스태킹 컨텍스트의 이해

챌린지

  • 지금까지의 개념을 모두 활용한 복합 피그마 챌린지
  • 챌린지 풀이 영상 제공

🥑 교육과정이 다소 단조롭게 느껴지셨나요?
그렇다면 제대로 보신 겁니다. 이것은 제가 의도한 바입니다. 이번 교육과정은 10시간이라는 제한된 시간 안에 최대의 학습 효과를 내기 위해, "무엇을 더 가르칠까" 보다 "핵심 외에 무엇을 덜어낼까"를 깊이 고민하며 설계했습니다.

강사소개

크리에이터
빔캠프를
소개합니다


반갑습니다 이종찬, 빔캠프입니다.

내 경험을 공유하는 데에 최적의 직업인 강사에 푹 빠진 디자이너 / 개발자입니다.
온/오프라인을 막론하고 여러 흥미로운 프론트엔드 콘텐츠를 제작하는 데에 집중하고 있습니다.

2015년부터 CSS 단일 주제만으로 꾸준히 강의를 이어오고 있습니다. 매년 제가 가진 CSS에 대한 생각과 접근 방식이 점차 발전하고 있음을 느낍니다. 저 역시 끊임없이 발전하는 CSS를 탐구하는 한 사람으로서, 앞으로도 CSS 기술의 잠재력을 널리 알리는 여정을 즐겁게 이어나갈 생각입니다.

많은 주니어 개발자들이 뛰어난 JS 실력에도 불구하고 CSS 기본기 부족으로 어려움을 겪고 있습니다. 이 클리닉을 통해 여러분이 CSS에 대한 막연한 두려움을 없애고, 자신감 있는 프론트엔드 개발자로 성장하도록 돕고 싶습니다.’

참여안내

참여안내

HTML, CSS 완전 처음인데 참여 해도 될까요?

완전 입문자에게는 다소 어려움이 있을 수 있습니다. HTML, CSS를 이용하여 간단한 자기소개 웹페이지 정도 만들 수 있는 수준이 되어야 합니다.

강의를 듣는데 필요한 장비는 무엇인가요?

줌 라이브 강의를 들을 수 있는 장치가 필요합니다. 코드를 보다 명확하게 볼 수 있도록 큰 화면을 사용하는 것을 권장합니다. 또한, 디스코드를 통해 소통이 이루어지므로, 줌 라이브 화면과는 별개의 디스코드 창을 사용할 수 있는 환경을 준비해 주세요.
참고로, 이 강의는 줌 라이브 화면을 보며 실시간으로 코딩을 진행하는 방식이 아니며, 주로 강의 내용을 집중적으로 이해하는 데 초점이 맞춰져 있습니다.

실습은 어느 정도 진행되나요?

줌 라이브 수업시간에는 별도의 실습 시간이 없습니다. 설명을 잘 듣고 질문과 답변을 진행하는 방식으로 진행됩니다. 장시간 라이브 수업에 집중하기 쉽지 않을 수 있지만, 중간 중간 쉬는 시간을 많이 두어 수강생의 이해도를 살피며 강의를 진행합니다.

강의 다시보기를 제공하나요?

네, 강의 종료 후 90일간 다시보기 영상을 제공합니다.

사전 과제가 있다고 들었는데, 꼭 수행 해야하나요?

네, 강의의 효과를 높이기 위한 사전 과제가 있습니다. 현재 실력을 점검하고 강의 내용을 더 잘 흡수 하도록 돕기 위한 것이므로 필수적으로 참여해야합니다. 분량이나 난이도는 부담스럽지 않은 수준이으로 출제 됩니다.

과제에 대한 피드백도 해주시나요?

개강일 이전에 제출하신 사전 과제는 1:1 피드백이 제공됩니다. 1주차, 2주차 과제는 개개인 피드백 대신 풀이 영상을 제공합니다. 추가로 궁금한 부분은 디스코드를 통해 질문과 답변을 할 수 있게 구성하였습니다.

설치 해야하는 프로그램이 있나요?

  • : 실시간 라이브 강의 시청용
  • 디스코드: 실시간 소통 + 커뮤니티 활동용
  • 크롬 브라우저: 라이브 강의에서 활용하는 기준 브라우저
  • Visual Studio Code: 라이브 강의에서 활용하는 기준 코드 에디터

환불 규정이 어떻게 되나요?

  • 개강 직전, 100% 환불이 가능합니다.
  • 전체 수업 일수의 50%가 이미 진행된 경우에는 환불이 불가합니다.
  • 수업 진행일수 50%미만인 경우, 강의료의 33%를 환불해 드립니다.
  • 환불요청: glennlee@frontendgym.com