오프라인 캠프
중급

CSS 한걸음더

내손으로 반응형웹

  • 단계

    중급

  • 강의기간

    3시간씩 6강

  • 정원

    3인 맞춤강의

  • 특장점

    맞춤 피드백

  • 학습관리

    복습 동영상 제공

  • 장소

    홍대/상수 일대

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

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

1

필수적인 CSS 기초

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

2

유지보수 최적화 웹

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

3

유연한 반응형 웹

부트스트랩 도움없이 자유도 높게 만드는 반응형웹

생생한
수강후기

.

2023년 02월 25일

이 수업을 듣기까지 고민을 몇 달 정도 했었습니다. 저는 2년 전에 국비지원으로 퍼블리싱을 배웠으나 막상 배우고 나서 혼자 만들 수 있는 것도 하나 없었고 그냥 할 수 있는 게 전혀 없던 상태였습니다. 그래서 나는 이쪽 길이 아니겠구나 내가 못 한 거구나 하고 생각했으나 1년 후에 그래도 퍼블리싱으로 뭔가를 만들고 싶다는 마음에 다시 책을 보고 읽기 시작했었습니다. 그러나 제가 뭘 이해했고 모르는지는 잘 몰랐기에 수업을 들어야겠다고 생각을 했습니다. 학원은 국비지원으로 낭비했다는 생각이 들어서 돈을 내고 괜찮은 과외나 스터디를 찾아서 배우자고 방향을 바꿨습니다. 바로 알바를 해서 돈을 모았고 내가 모은 돈으로 어떤 수업을 듣는 게 좋을까 고민하다가 알게 된 수업이 하코사 카페에서 본 빔캠프 수업이었습니다. 리뷰도 너무 좋았고 커리큘럼도 괜찮아 보여서 수업을 들어볼까 했지만 국비지원으로 시간을 보내버렸던 기간이 있어서 돈을 내고 배우는 이 수업은 괜찮을까 하고 몇 달을 고민했던 시간이 있었습니다. 결과적으로 수업을 들었고 수업을 들은 후기는 내가 왜 고민했을까? 라는 의문이었습니다. 빔캠프 강사님은 기초를 정말 이해하기 쉽게 알려주셨고 지루하다 싶으면 또 재밌는 얘기를 해주시면서 환기를 해주셨습니다. 추가로 실무 얘기도 해주셔서 실무에서는 이렇구나 하고 들어볼 수 있는 좋은 경험이 되었습니다. 주 마다 두번씩 나가는 과제는 아무것도 몰랐던 저에게 사실 쉽다고 하기엔 어려운 시간이었습니다. 그러나 과제를 하면 강사님께서 피드백을 꼼꼼히 해주시고 잘못된 부분을 잘 캐치해 주시면서 수업을 듣기 전보다는 더 나아진 코드를 작성하는 저를 만날 수 있었습니다. 수업을 듣기 전에는 정말 페이지 하나조차도 내가 만들 수 있을까? 내가 뭘 모르는걸까? 라는 의문이 항상 들었습니다. 그러나 수업을 들은 지금은 제가 페이지를 만들어 낼 수 있고 모르는 부분이 어떤 것인지 알게 되었으며 할 수 없었던 게 아니었구나 싶어서 자존감도 자신감도 많이 올라간 시간이었습니다. 수업만 들으면 되는 게 아니라 과제가 미완성이라도 꼭 제출해야 많은 것을 얻어 갈 수 있습니다. 그리고 강사님이 수강생들을 가르치는 것에 대해 진심이시고 이 일에 너무나도 진심인 분이셔서 대충 알려주시거나 알고만 넘어가게 하지 않고 끝까지 이해하게 도와주십니다. 모르는 걸 여쭤봐도 바로바로 답해주셔서 고민이 많이 사라지는 수업이었기 때문에 저처럼 페이지를 잘 만들지 못하거나 고민이 드신다면 수업을 들어보시길 추천드립니다. 주말에는 아침 수업을 듣고 평일에는 내주신 과제를 하면서 많이 생각해보고 몰입할 수 있었던 시간이었던 것 같습니다. 수업 전에는 페이지를 만드는 것도 제대로 만들지 못하는 게 두려워서 만들 시도조차 하지 않았던 제가 수업 이름처럼 한 걸음 나아간 계기가 되었던 것 같습니다.

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

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

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

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

코드가 욕심나는디자이너

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

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

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

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

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

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

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

CSS 한 걸음 더 캠프의 목표

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

이론 90%

  • CSS의 초기값과 UA Stylesheet
  • 상속과 캐스케이드
  • CSS Selectors 다시보기 & Specificity
  • Negative Margins
  • Margin Collapsing

실습 10%

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

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

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

flexbox flow-root block-formatting-context position centering in css

이론 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 prefix 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
  • 반응형웹에서의 타이포그래피! em단위와 line-height

실습 30%

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

5일차반응형 타이포그래피

단순히 레이아웃이 완성 되었다고 해서 마무리 되는것이 아닙니다. 다양한 상황에서도 안정적인 레이아웃이 유지되게 하기위한 유연한 기법이 필요합니다. 반응형웹에서의 em과 rem단위의 쓰임에 대하여 다루어 봅니다.

em rem line-height Line box

이론 80%

  • em과line-height와의 관계
  • 반응형웹에서 타이포그래피 관련 속성을 체계적으로 관리하는 법
  • auto와 %단위의 의미

실습 20%

  • 다양한 예제를 통한 em과 rem 개념설명
  • 질문과 답변

6일차미디어쿼리 변경점

레이아웃이 바뀌는 기준인 미디어쿼리 변경점(Breakpoint)을 어떻게 설정하고 관리하는지 이야기해 봅니다. 모바일 디바이스에서 적절히 보여지게끔하는 메타태그에 대해서도 배웁니다

mediaquery breakpoint

이론 70%

  • 사례로 알아보는 미디어쿼리 변경점
  • max-width, min-width
  • 모바일 퍼스트란?

실습 30%

  • 4가지 변경점 작업해보기
  • 질문과 답변

CSS 한 걸음 더 캠프만의 특장점

여러분에게 집중하기 위한 방안

크리에이터 Glenn Lee를
소개합니다

반갑습니다 이종찬 Glenn Lee입니다.

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

웹을 이용하는 사람들, 웹을 만드는 사람들 모두가 아름다운 웹을 원하는 시대가 되었습니다. 같이 아름다운 웹사이트 제작을 즐겨봅시다 :)

열정 가득한 캠프 예제를 만나보세요!

예제는 교육 흐름상 변경 될 수 있습니다 :)

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

오프라인 수업 + 온라인 복습 영상 방식으로 진행되는 캠프입니다

오프라인 수업만의 장점이 있습니다. 오프라인 수업 시간만큼은 100% 몰입하여 배울수 있고 좀 더 밀착 형태의 피드백을 받기 용이합니다. 더 나아가 오프라인 강의와 연계되는 공부를 위해 1:1 과제 피드백 영상 제공, 복습 영상 제공등 다양한 장치를 마련 하였습니다.

오프라인 직강

무엇인가 배우기 위해서는 정확한 시간 약속과 적절한 제약이 있어야 합니다. 정해진 시간에 수업을 듣고 집중해야 배울 수 있습니다. 궁금한 점은 바로 질문해야 나의 지식으로 남게 됩니다. 무엇보다 대체 될 수없는 오프라인 수업의 최대 장점인 현장감을 느낄 수 있습니다.

매 시간 복습 동영상 강의 제공

수업 내용이 기억이 나지 않을까, 진도가 빨라 못 따라가진 않을까 걱정하지 마세요. 수업 종료 후, 복습을 위한 영상 강의가 제공됩니다. 단순히 라이브 수업 내용을 똑같이 설명하는 영상에서 머무르지 않고 추가 연구 내용을 제시하여 지속적인 공부가 될 수 있도록 돕는 역할을 수행합니다.

혼자서도 공부를
이어갈 수 있도록

매시간 부여되는 과제

이론적인 공부가 아무리 완벽하다고 할 지라도 실제 실습이 따라주지 않는다면 소용이 없습니다! 매시간 부여되는 과제를 스스로 해결하고 피드백을 받는 과정에서 더욱 더 큰 배움을 얻어 가실 수 있습니다!

1:1 맞춤, 동영상 피드백

6인 이하로 진행되는 소규모 온라인 캠프이기 때문에 1:1 맞춤 피드백이 가능합니다! 궁금한 점들을 모두 해결해 가세요! 기존 수강생분들이 제일 만족해 하는 부분입니다. 글로 몇 줄 적어 피드백 드리는 방식이 아닌 과제를 보면서 더 나은 방향의 코드를 설명하는 동영상 피드백입니다. 또한 내가 아닌 다른 수강생의 과제+피드백을 보는 것도 굉장한 도움이 됩니다.

언제든 부담없이 질문 할 수 있는 수강생 전용 디스코드 채널 운영

수업 도중에 질문할 타이밍을 놓쳤더라도 걱정하지 마세요. 언제든 열려있는 수강생 커뮤니티 채널이 있어요! 채팅방 형식이라 편하게 질문하실 수 있고 답변을 들으 실 수 있습니다.

자주 묻는 질문

  • 캠프 과정을 모두 수료하면 어떤 수준까지 만들 수 있나요?

    확신을 가지고 한줄 한줄 CSS 코드를 작성할 수 있게 됩니다. 부트스트랩과 같은 CSS Framework의 의존에서 벗어나 원하는 스타일을 좀 더 체계적으로 작성 할 수 있습니다.

  • 강의 난이도는 어떻게 되나요?

    HTML+CSS의 기초지식이 필요한 캠프입니다. 웹사이트 제작에 경험이 전혀 없으신 분은 CSS 첫 걸음 캠프를 우선 추천 드립니다.

  • 준비물은 무엇인가요?

    개인 노트북이 필요합니다. 운영체제는 윈도우, 맥 모두 괜찮습니다. 윈도우7 이상 권장합니다. 1강 부터 6강까지 사용 가능한 노트를 꼭 준비해주세요!

  • 아쉽게도 일정이 맞지 않네요.

    홈페이지에 이미 공지된 일정을 변경하거나 조율하는 것은 어렵습니다. 다음 일정을 참고 부탁드립니다. 캠프 문의에 의견을 남겨주세요 :) 더욱 많은 인원에게 강의를 제공하기 위해 노력하겠습니다.

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

    개강 직전, 100% 환불이 가능합니다
    얼리버드 프로모션중인 캠프의 경우에는 환불이 불가능합니다
    전체 수업 일수의 50%가 이미 진행된 경우에는 환불이 불가합니다
    수업 진행일수 50%미만인 경우, 강의료의 33%를 환불해 드립니다
    환불요청: support@veamcamp.com

  • 추가적인 궁금증은?

    빔캠프에게 문의하기
빔캠프는 인터넷 익스플로러를 지원하지 않습니다. 최신 브라우저로 접속하기 권장 드립니다 :)