오프라인 캠프
중급

CSS 한걸음더

내손으로 반응형웹

  • 단계

    중급

  • 강의기간

    3시간씩 6강

  • 정원

    3인 맞춤강의

  • 특장점

    맞춤 피드백

  • 학습관리

    복습 동영상 제공

  • 장소

    홍대/상수 일대

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

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

1

필수적인 CSS 기초

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

2

유지보수 최적화 웹

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

3

유연한 반응형 웹

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

생생한
수강후기

YG

2020년 08월 29일

저에게는 1달이라는 수업 시간이 너무 짧게만 느껴졌던 것 같아요.!!

Html과 CSS에 대한 지식이 너무 단편적이고 정리되지 않아 코딩하면서도 의문을 많이 가졌었지만, 선생님의 수업을 들으면서 그런 의문들을 해소 할 수 있었고 나아가 원리를 파악할 수 있었던 것 같아요.

또, 이해가 부족하다는 생각이 들면 선생님은 또 그걸 어떻게 아셨는지..?! 너무 친절하고 재미있게 설명해 주셔서 너무 좋았고 그런 웃음이 넘치는 수업 시간이 기다려진 것 같아요~!
다음에 기회가 된다면 꼭 다시 들으러 올게요~!

감사합니다:)

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

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

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

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

코드가 욕심나는디자이너

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

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

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

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

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

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

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

CSS 한 걸음 더 캠프의 목표

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

이론 90%

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

실습 10%

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

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

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

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

이론 80%

  • inline, block 그리고 inline-block
  • float의 용도 알아보기
  • float속성 올바로 바라보기
  • position 기초와 고급기법
  • flexbox 기초와 응용

실습 20%

  • float로 사이드바 만들기
  • 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 한 걸음 더 캠프만의 특장점

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

누가 진행하는 캠프인가요?

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

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

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

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

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

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

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

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

오프라인 직강

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

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

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

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

매시간 부여되는 과제

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

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

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

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

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

자주 묻는 질문

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

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

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

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

  • 준비물은 무엇인가요?

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

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

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

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

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

  • 추가적인 궁금증은?

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