소개
웹 프론트엔드 개발 트렌드는 빠르게 변화하고 있습니다. 생산성과 안정성을 높이는 다양한 도구들이 등장하면서 개발 환경은 크게 개선 되었지만, 정작 웹 프론트엔드의 근간인 HTML, CSS 자체에 대한 관심은 점차 줄어들고 있는 추세입니다. 특히, CSS는 단순히 예쁘게 꾸미기 위한 기술로 여겨지며, 그 중요성이 과소평가됩니다. CSS의 기본 문법만 간략히 익힌 뒤 깊이 있는 학습 없이 넘어가게 됩니다. 이러한 접근은 CSS에 대해 진지하게 고민할 기회를 놓치게 만들어 차후 실무에서 많은 시간을 낭비하게 만들기도 합니다. CSS는 다양한 목적성이 있습니다. 레이아웃 설계, 반응형 디자인, 접근성, 성능 최적화 등 웹 프론트엔드에서 중요한 많은 부분을 담당합니다. CSS를 체계적으로 학습하지 않으면 프로젝트 규모가 커질수록 예기치 못한 스타일링 문제와 비효율성에 직면하게 됩니다. 단순히 하루 반나절 정도로 기본 개념을 익히는 데 그쳐서는 안 됩니다. 올바른 학습 방법과 반복적인 연습을 통해 CSS를 체계적으로 익힐 필요가 있습니다. 이 이벤트는 CSS를 어려워하는 분들에게 체계적인 이론을 제시하고 반복 연습할 기회를 제공합니다. CSS에 대한 새로운 마음으로 웹 프론트엔드 개발의 탄탄한 기반을 쌓아보세요. 웹 개발자로서 CSS를 공부하는 데 시간을 투자하는 것 자체에 거부감이 들 수도 있습니다. CSS는 시각적 결과물에 초점을 맞춘 기술로, 마치 웹디자인의 영역처럼 보일 수 있기 때문입니다. 이로 인해 개발자의 업무 범위가 아니라고 여기거나, 시간을 낭비하는 것 같다는 생각이 들기도 합니다. 그러나 웹 개발, 특히 웹 프론트엔드는 사용자가 직접 마주하게 되는 프리젠테이션 레이어가 매우 중요합니다. 개발자는 단순히 코드를 작성하는 사람을 넘어, 문제를 해결하고 퀄리티 높은 제품을 만들어내는 전문가입니다. 이를 위해서는 웹디자이너와 기획자의 의도를 기술적으로 구현하고, 사용자 경험을 향상시키는 프리젠테이션 레이어를 완성도 높게 구현할 수 있어야 합니다. 결국 CSS는 개발자의 중요한 도구로서, 단순히 디자인을 넘어서 사용자 경험과 제품의 품질에 직접적인 영향을 미치는 핵심 기술임을 인식할 필요가 있습니다. 프리젠테이션 레이어의 최종 책임은 결국 프론트엔드 개발자에게 있습니다. 이는 단순히 피그마의 디자인 결과물을 똑같이 구현하는 것을 넘어, 사용자가 웹과 상호작용하는 모든 순간을 최적화하고, 디자인 의도를 정확하게 반영하며, 기능적으로도 완벽한 결과물을 만들어내는 작업을 포함합니다.CSS에만 집중하는 CSS 전문 코스입니다
왜 CSS를 제대로 배워야 하나요?
언젠가 반드시 마주 해야 할 기술, CSS
퀄리티 높은 제품을 위해 전문가의 마음으로 임하기
CSS를 배우기 위한 접근법 3가지
여러분들의 목표 달성을 위한 알찬 시스템
실시간 줌 라이브 강의 + 디스코드 커뮤니티로 배우는 몰입형 학습
- 오프라인 못지않은 소통: 실시간으로 진행되는 줌 라이브 강의를 통해, 강사와 즉각적인 소통이 가능합니다. 질문이 생기면 바로 답을 얻고, 함께 학습하는 동료들과도 교류할 수 있습니다.
- 집중 학습 환경: 녹화된 영상을 혼자 시청하는 방식과 달리, 줌 라이브 강의는 정해진 시간에 집중력을 발휘할 수 있도록 돕습니다. 강사의 실시간 피드백과 동료간 상호작용으로 이해도를 높입니다.
- 협력과 성장: 디스코드 커뮤니티를 통해 강의중과 챌린지 수행중 언제든 질문을 남길 수 있으며, 강사와 동료들이 함께 답을 찾습니다. 혼자 고민하지 않아도 됩니다.
챌린지 중심의 학습 시스템
주말에 강의를 듣고 평일에는 동료들과 함께 챌린지
매주 줌 라이브 강의를 통한 이론 공부가 마무리 된 후, 한 주를 알차게 보낼 수 있는 챌린지 과제가 출제됩니다. 챌린지는 선택이 아니라 필수입니다.
디스코드 커뮤니티를 통해 챌린지 수행에서 어려운 점을 서로 토론하고 같이 개선해 나갈 수 있습니다.
만들어 보고 싶은 디자인의 피그마 웹디자인
최근 UX/UI 업계에서 독보적인 위치를 가지고 있는 피그마로 만들어진 웹디자인 결과물을 제공합니다. 수강생은 피그마 결과물을 분석하여 HTML+CSS 산출물로 직접 만드는 경험을 하게 됩니다. 모든 챌린지는 빔캠프가 직접 디자인하고 설계한 챌린지입니다.
CSS는 대부분의 웹 프론트엔드 개발 교육 과정에서 기본 개념만을 다루는 데 그치는 경우가 많습니다. 이는 CSS가 웹 프론트엔드 개발에서 필수적인 기술임에도 불구하고, 로직을 다루는 프로그래밍 언어가 아니라는 점에서 학습 동기가 상대적으로 부족하기 때문입니다. 많은 사람들이 CSS 작업을 어렵게 느끼는 가장 큰 이유는 자신의 코드에 대한 확신 부족입니다. 코드 작성에 확신을 가지려면, 정확한 이론을 이해하고 충분한 실무 경험을 쌓는 것이 필수적입니다. 특히, 처음부터 CSS 라이브러리나 프레임워크에 의존해 학습한 경우, 기초 개념이 약해지고 스스로 주도적으로 코드를 작성하는 데 어려움을 겪습니다. CSS는 과거부터 현재까지 끊임없이 변화하며 발전해 왔습니다. 이 과정에서 다양한 방법론과 스타일링 기법들이 등장했으며, 최신 기술과 오래된 개념들이 뒤섞여 학습자들에게 혼란을 주기도 합니다. CSS MAP을 그리는 것은 단순히 개별 속성을 공부하는것을 의미하지 않습니다. CSS의 발전 과정을 이해하고, 오래된 기법과 최신 기술을 상황에 맞게 유연하게 활용할 수 있는 기틀을 마련하는 작업입니다. 어떤 것을 배울 수 있나요?
CSS에만 집중합니다.
이 강의는 단순히 표면적인 CSS를 넘어, CSS의 깊은 본질을 탐구하는 데 초점을 맞추고 있습니다. 강의 전반이 오직 CSS 이야기로 가득 채워져 있으며, 이를 통해 여러분이 CSS에 대한 확신을 갖고 주도적으로 활용할 수 있도록 돕는 것을 목표로 합니다.주도적인 CSS 코드를 작성할 수 있게 됩니다.
줌 라이브 강의에서는 정확한 용어와 핵심 이론을 명확히 설명하는 데 중점을 둡니다. 한편, 주중에 진행되는 실무 챌린지에서는 CSS 라이브러리나 프레임워크의 도움 없이 순수한 CSS로 코드를 작성하며 실무 능력을 키우는 데 초점을 맞춥니다.머릿속 CSS MAP을 그리는 캠프입니다.
교육과정
이런 과정을 거쳐요
1주차꼭 알아야 하는 CSS 기초 #1
다년간의 강의 경험을 통해 엄선된, 꼭 알아야 하는 CSS의 기초 지식을 농축액 스타일로 쭈욱 알아보는 시간을 가집니다. 수강생분들의 지식편차를 줄이기 위함입니다.
줌 라이브 이론 강의
- CSS 초기값에 대한 이해
- 사용자 에이전트 스타일시트와 초기화
- 상속과 캐스케이드
- 셀렉터 특정성 이해
- 네거티브 마진
- 마진 병합 현상 이해
챌린지
- 네거티브 마진과 width % 단위 활용하는 챌린지
- 질문 및 답변
2주차꼭 알아야 하는 CSS 기초 #2
1주차에 이어, 꼭 알아야 하는 CSS 기초에 대하여 체계적으로 알아봅니다.
줌 라이브 이론 강의
- inline, block 그리고 inline-block
- flexbox 기초와 응용
- min-width, flex-grow, flex-shrink, flex-basis의 상관 관계
- position 기초와 응용
- 컨테이닝 블록의 이해
챌린지
- flexbox로 그리드 및 사이드바 만들기 챌린지
- 질문 및 답변
3주차CSS 작업에 최적화된 HTML
HTML을 제대로 작성하기 위해선 경험과 지식이 필요합니다. HTML 마크업을 잘 한다는것은 다양한 관점을 골고루 이해하고 있다는 뜻이기 때문입니다. HTML 기술의 여러 목적중 CSS작성을 위한 뼈대로서의 HTML을 이야기합니다.
줌 라이브 이론 강의
- 체계적인 CSS 작성을 위한 카테고리화
- 클래스 작명에 대한 고민
- 자주 사용하는 레이아웃 클래스로 공통화하기
- 독립된 덩어리로 생각하기: 컴포넌트
챌린지
- 레이아웃 클래스를 활용한 웹사이트 챌린지
- 질문과 답변
4주차반응형 그리드 시스템
웹사이트 제작시 가장 활용도가 높은 레이아웃 형식인 그리드 칼럼 구조를 어떻게 하면 구성할 수 있는지 알아봅니다. 12단 그리드 칼럼을 구성하여 여러가지 그리드 칼럼을 손 쉽게 활용 할 수 있습니다. 또한 반응형웹에서의 타이포그래피 작업시 반드시 알아야 하는 개념에 대해 알아봅니다.
줌 라이브 이론 강의
- flexbox기반으로 만들어보는 그리드 시스템
- display grid기반으로 만들어보는 그리드 시스템
- 그리드 레이아웃 클래스 제작하기
- 다양한 방식의 그리드 시스템, 장단점 파악하기
- %단위는 어떻게 동작하는가?
챌린지
- 12단 그리드시스템을 이용한 챌린지
- 질문과 답변
5주차반응형 타이포그래피
단순히 레이아웃이 완성 되었다고 해서 마무리 되는것이 아닙니다. 다양한 상황에서도 안정적인 레이아웃이 유지되게 하기위한 유연한 기법이 필요합니다. 반응형웹에서의 em과 rem단위의 쓰임에 대하여 다루어 봅니다.
줌 라이브 이론 강의
- 반응형웹에서 타이포그래피 관련 속성을 체계적으로 관리하는 법
- 반응형웹에서의 타이포그래피, em단위와 rem단위
- em과 line-height와의 관계
- auto와 %단위의 의미
챌린지
- em과 rem을 사용하는 챌린지
- 질문과 답변
6주차미디어쿼리 변경점
레이아웃이 바뀌는 기준인 미디어쿼리 변경점(Breakpoint)을 어떻게 설정하고 관리하는지 이야기해 봅니다. 모바일 디바이스에서 적절히 보여지게끔하는 메타태그에 대해서도 배웁니다
줌 라이브 이론 강의
- 사례로 알아보는 미디어쿼리 변경점
- max-width, min-width
- 모바일 퍼스트란?
- 컨테이너쿼리의 이해
챌린지
- 미디어쿼리를 활용해 반응형 추가 챌린지
- 질문과 답변
강사소개
크리에이터
Glenn Lee를
소개합니다
반갑습니다 이종찬 Glenn Lee입니다.
내 경험을 공유하는 데에 최적의 직업인 강사에 푹 빠진 디자이너 / 개발자입니다.
온/오프라인을 막론하고 여러 흥미로운 프론트엔드 콘텐츠를 제작하는 데에 집중하고 있습니다.
2015년부터 CSS 단일 주제만으로 꾸준히 강의를 이어오고 있습니다. 매년 제가 가진 CSS에 대한 생각과 접근 방식이 점차 발전하고 있음을 느낍니다. 저 역시 끊임없이 발전하는 CSS를 탐구하는 한 사람으로서, 앞으로도 CSS 기술의 잠재력을 널리 알리는 여정을 즐겁게 이어나갈 생각입니다.
수강후기
수강후기
참여안내
참여안내
강의 난이도는 어떻게 되나요?
HTML, CSS를 접하고 직접 코딩한 경험이 있다면 본 이벤트에 참여 하실 수 있습니다. 웹사이트에 게시된 교육과정을 참고로 미리 예습하고 오시는 것을 추천합니다.
강의를 듣는데 필요한 장비는 무엇인가요?
줌 라이브 강의를 들을 수 있는 장치가 필요합니다. 코드를 보다 명확하게 볼 수 있도록 큰 화면을 사용하는 것을 권장합니다. 또한, 디스코드를 통해 소통이 이루어지므로, 줌 라이브 화면과는 별개의 디스코드 창을 사용할 수 있는 환경을 준비해 주세요.
참고로, 이 강의는 줌 라이브 화면을 보며 실시간으로 코딩을 진행하는 방식이 아니며, 주로 강의 내용을 집중적으로 이해하는 데 초점이 맞춰져 있습니다.
설치 해야하는 프로그램이 있나요?
- 줌: 실시간 라이브 강의 시청용
- 디스코드: 실시간 소통 + 커뮤니티 활동용
- 크롬 브라우저: 라이브 강의에서 활용하는 기준 브라우저
- Visual Studio Code: 라이브 강의에서 활용하는 기준 코드 에디터
환불 규정이 어떻게 되나요?
- 개강 직전, 100% 환불이 가능합니다
- 전체 수업 일수의 50%가 이미 진행된 경우에는 환불이 불가합니다
- 수업 진행일수 50%미만인 경우, 강의료의 33%를 환불해 드립니다
- 환불요청: glennlee@frontendgym.com