오프라인 캠프

중급

CSS 한걸음더

내손으로 반응형웹

CSS 지식의 체계적인 정리
부트스트랩 도움 없이 만드는 자유도 높은 반응형웹
캠프가 종료되어도 언제 어디서든 볼 수 있는 복습영상 페이지 제공

단계
중급
강의기간
3시간씩 6강
정원
3인 맞춤강의
특장점
맞춤 피드백
학습관리
복습 동영상 제공
장소
홍대입구역 근방

CSS는 체계적인 내용 정리를 꼭 필요로 합니다.

CSS 한 걸음 더 캠프의 3가지 목표

필수적인 CSS 기초

체계적인 정리를 통해 탄탄한 기본기 갖추기

유지보수 최적화 웹

계속해서 변화하는 요구사항에 스마트하게 대처하기

유연한 반응형 웹

CSS Framework의 도움없이 손수 만드는 반응형 웹

왜 CSS 한걸음더 인가요?

배워야 할 것이 많은 웹 프론트엔드에서 CSS는 언제나 입문만 하고 쉽게 넘겼습니다.

웹 프론트엔드 개발과정은 과거에 비해 매우 복잡해지고 있습니다. 웹 개발의 공부를 이제 막 시작하는 분은 너무나 많은 공부거리 덕분에 엄청난 피로감이 몰려오게 됩니다. 그러한 이유로 공부의 진입장벽이 쉬운 CSS는 하루 반나절정도 기본 컨셉만을 이해한채로 넘기기 일수입니다. CSS를 제대로 공부할 기회를 놓치는 것입니다. CSS 한 주제만으로 설명해야할 내용들이 많이 있습니다. 웹 프론트엔드 개발을 위해서는 언젠간 CSS만을 제대로 정리하는 시간을 가져야 합니다.

CSS의 재발견, 새로운 마음으로 첫 걸음 때기

대부분의 CSS 입문과정 강의는 전체 커리큘럼의 일부로 들어가는 경우가 많습니다. 상대적으로 제대로 입문할 시간이 부족하게 됩니다. 입문 단계에서 기초가 제대로 정립되지 않았거나 다작을 통한 반복 학습이 되지 않았기 때문에 시간이 지나면 지날수록 점점 더 어려워지고, 언젠간 정리해야할 골칫덩어리로 남게됩니다. 본 캠프는 그러한 부분을 확실히 해소시켜드리고자 오랫동안 고민해 왔습니다.

CSS를 배우기 위한 접근법 3가지

지식의 체계적인 정리에 포커스

꼭 알아야 하는 CSS의 기반 지식에 집중합니다. 용어 정리와 CSS만의 특별한 컨셉을 제대로 정리하는 시간이 꼭 필요합니다.

원리를 확실히 알고 활용하기

CSS를 단순히 암기하여 활용하는 방식은 오래가지 못합니다. 원리를 알아야 다양한 조합을 통해 웹디자인 문제를 해결해 나갈 수 있습니다.

이론을 기반으로 다작하기

CSS는 결국 웹디자인을 위한 기술입니다. 실제 웹디자인을 통해 배워야 합니다. 많이 만들어보지 않으면 배울 수 없습니다.

생생한
수강후기

⭐

손지호

2023년 05월 04일

내가 프론트엔드 개발자인지 의심을 하며 여러 학습을 독학으로 진행해보다가 이 강의를 듣고 진짜 퍼블리싱의 전문성을 가질 수 있겠다는 자신감이 생겼습니다. 자신이 무엇이 부족한지 정확히 알 수 있고 정말 Publishing, CSS 영역에서 무엇이 전문성을 만드는지 알 수 있었던 기회였던 것 같습니다. 만약, 주말마다 특별히 바쁜일이 없는 개발자 지인이 있다면 꼭 추천해보고 싶습니다.

유튜브로 먼저 학습해보시고 괜찮다면 오프라인 강의해보는 것도 추천드립니다.

어떤 것을
배울 수 있나요?

CSS에만 집중합니다.

다양한 경로로 웹 개발 혹은 웹디자인 분야에 관심이 생기셨을 것이라 생각됩니다. 웹 개발 영역은 굉장히 방대해지고 있습니다. 많은 개념들을 한꺼번에 익혀야 하기 때문에 CSS만을 전문적으로 공부할 기회는 흔치 않습니다.

주도적인 CSS 코드를 작성할 수 있게 됩니다.

CSS 작업이 어렵다고 느끼는 가장 큰 이유중 하나가 바로 "자신의 코드에 확신이 없기 때문"입니다. 스스로의 충분한 경험을 통해 "확신에 찬 주도적 코드" 작성을 시도 해야 합니다. 만약 여러분이 tailwind CSS나 기타 CSS Framework로 CSS 입문을 하셨다면 가장 핵심이 되는 기초 이론부터 다시 쌓아 올리는 공부를 시작해야 할 때입니다.

머릿속 CSS MAP을 그리는 캠프입니다.

CSS는 짧은 시간동안 굉장히 많은 변화가 생기게 된 기술입니다. 덕분에 이를 공부하는 여러분들은 최신 CSS 개념과 예전 방식의 개념이 뒤섞인 상태로 공부를 하게 됩니다. 그런 관점에서 CSS의 과거, 현재를 모두 아는것이 중요합니다. 역사를 아는 것은 지식의 전체 뼈대를 세우는 일입니다. 내가 원하는 레이아웃을 만들어 낼 수 있는 방법은 수도 없이 많습니다만 뾰족한 정답은 없습니다. 상황 혹은 맥락을 이해하고 스스로 지식의 호불호를 정하여 지도를 그려내야합니다. 머릿속 CSS MAP을 그려봐야 합니다. 전체 뼈대를 알지 못하면 자잘한 곁가지 지식은 결코 힘을 낼 수 없습니다.

만들어지는 과정을 같이 보면서 실질적으로 어떤 개념이 필요한것인지 배울 수 있습니다.

어떤 개념에 대하여 무조건 "받아들이세요" 하기 보단 다양한 배경, 어떤 연유로 생겨난 개념인지 강조합니다. 코드베이스로 한땀 한땀 같이 살펴보면서 자연스럽게 익히는 방식을 지향합니다.

예제 중심으로 진행이 됩니다.

CSS는 결국 코드로 웹디자인을 하는 것입니다. 즉 보여지는 측면이 굉장히 중요합니다. 이러한 CSS를 글로 된 이론으로만 배운다는 것은 한계가 있습니다. 대부분의 웹사이트 제작 강의에서는 이론 설명을 하기 위해 딱딱한 모습의 예제를 제시합니다. 빔캠프의 예제는 여러분들에게 영감을 줄 만큼 아름답습니다. 그러면서도 이론을 잘 설명하기 위한 다양한 장치가 있는 예제입니다. 여러분들의 흥미를 끌 수 있는 다양한 예제를 준비하였습니다. 스텝바이스텝으로 CSS의 중요한 측면을 재발견합니다.

난이도가 너무 쉽지 않을까 고민되신다면?

이미 CSS의 기초 개념이 있다고 생각이 들기 때문에 제대로 배우려는 시도를 하기 어려운 것입니다. CSS를 주제로 장기간 강의를 한 시행착오와 경험을 직접 듣는다면, 자신이 알고 있는 CSS의 기초 개념을 스스로 정리하는 시간이 될 것입니다. 그리고 자신이 부족한 부분을 스스로 발견 할 수 있고, 발전 시킬 수 있습니다.

이런 분들을 위해 준비된 캠프입니다

아래 상황에 해당 된다면 빔캠프의 문을 두들겨 주세요

아름다움을 아는 프론트엔드 개발자

CSS도 체계적인 접근이 필요한 기술임을 이해하는 프론트엔드 개발자를 환영합니다.

CSS 작성에 거부감이 생긴 프론트엔드 개발자

CSS는 웹 프론트엔드의 근간입니다. 피할수 없으니 제대로 파악하는 것이 즐기는 일입니다.

코드에 확신을 가지고 싶은완벽주의자

단순히 할 줄 아는것과 본인이 사용하고 있는 기술에 대하여 깊이 이해하는것은 다릅니다.

코드가 욕심나는디자이너

CSS의 방식을 100% 이해하고 디자인하는 웹디자이너의 가치는 매우 높습니다.

당장에 실무에 투입하고 싶은프리랜서

단순한 이론을 전달하는 것이 아닌, 바로 쓸 수 있는 실용기술을 재미있게!

CSS 한 걸음 더 캠프의 목표

모두 다같이 열심히 해서 목표를 이뤄 보아요!

CSS의 온전한 이해기초에 집중

재료에 대한 명확한 이해가 중요합니다. 아무리 화려해보이는 웹사이트일지라도 핵심 기초는 변하지 않습니다.

무조건 암기? NO!온전한 이해

암기한 지식은 그리 오래 가지 못합니다. 원리를 이해하고 생각을 통해 지식의 빈틈을 메울수 있습니다.

이왕이면 재미있게!재미와 영감

웹은 충분히 재미있는 분야입니다. 재미에 눈을 뜨면 그 이후부턴 스스로 잘 할 수 있게 됩니다. 여러분의 영감 창고가 되겠습니다.

혼자서도 잘해요!나홀로 제작

스스로 원하는 것을 만들때에 빛이 납니다. 누군가의 웹사이트를 따라 만드는 것은 한계가 있습니다. 간단한 페이지부터 스스로 하나하나 만들 수 있도록 합니다.

속도 보다는 방향!방향 설정

웹 공부는 끝이 없습니다! 수강생 각자의 목표는 모두 다를 수 밖에 없지요. 클래스가 종료된 후 어떤 공부를 더 하는것이 각자의 목표에 가까워 질 수 있는지 같이 이야기해 봅니다.

지속적으로 업데이트 되는 살아있는 캠프 과정

계속해서 업그레이드되는 교육 과정입니다

1일차꼭 알아야 하는 CSS 기초 #1

다년간의 강의경험을 통해 엄선된, 꼭 알아야 하는 CSS의 기초 지식을 농축액 스타일로 쭈욱 알아보는 시간을 가집니다. 수강생분들의 지식편차를 줄이기 위함입니다.

CSS Box-model display inline block inline-block flexbox css specificity negative margins

이론 90%

CSS 초기값에 대한 이해
사용자 에이전트 스타일시트와 초기화
상속과 캐스케이드
CSS Selectors 다시보기 & Specificity
Negative Margins
Margin Collapsing

실습 10%

타임라인 레이아웃 만들기
Margin의 음수값 사용으로 만들 수 있는 예제
질문 및 답변

2일차꼭 알아야 하는 CSS 기초 #2

1일차에 이어 꼭 알아야 하는 CSS 기초에 대하여 체계적으로 알아봅니다.

flexbox containing block stacking context position position

이론 80%

inline, block 그리고 inline-block
flexbox 기초와 응용
min-width, flex-grow, flex-shrink, flex-basis
position 기초와 고급기법

실습 20%

flexbox로 그리드 및 사이드바 만들기
position사용 예시 예제
질문 및 답변

3일차CSS 작업에 최적화된 HTML

HTML을 제대로 작성하기 위해선 경험과 지식이 필요합니다.HTML 마크업을 잘 한다는것은 다양한 관점을 골고루 이해하고 있다는 뜻이기 때문입니다. HTML 기술의 여러 목적중 CSS작성을 위한 뼈대로서의 HTML을 이야기합니다.

css methodologies layouts components

이론 40%

체계적인 CSS 작성을 위한 Layout Class
Component? 독립된 덩어리로 디자인하는 법
클래스명을 결정하는 방법

실습 60%

이론에 따른 웹사이트 제작해보기
질문과 답변

4일차반응형 그리드 칼럼 시스템

웹사이트 제작시 가장 활용도가 높은 레이아웃 형식인 그리드 칼럼 구조를 어떻게 하면 구성할 수 있는지 알아봅니다. 12단 그리드 칼럼을 구성하여 여러가지 그리드 칼럼을 손 쉽게 활용 할 수 있습니다. 또한 반응형웹에서의 타이포그래피 작업시 반드시 알아야 하는 개념에 대해 알아봅니다.

Grid System 12 Unit viewport height em auto keyword % unit box-sizing

이론 70%

Negative Margin과 box-sizing 속성을 결합하여 만드는 Flexbox기반의 Grid Column System
CSS Grid 이용하기
반응형웹에서의 타이포그래피! em단위와 line-height

실습 30%

가변 단위의 사용
%단위란 어떻게 동작하는가?
auto키워드에 대하여
12단 그리드 작성해보기
질문과 답변