HTML+CSS 한걸음더

내손으로 반응형웹
HTML+CSS가 무엇인지는 알지만 좀 더 체계적인 정리가 필요한 모든 분에게 꼭 맞는 클래스입니다. 웹사이트를 좀 더 유연하고 유지보수에 최적화하여 코딩하는 여러 방법을 다룹니다. 특히 반응형 웹디자인 기술을 구현하기 위한 %, em, rem 단위와 그리드 시스템에 대하여 체계적으로 접근합니다.

크리에이터 Glenn Lee

내 경험을 공유하는 데에 최적의 직업인 '강사' 에 푹 빠진 디자이너입니다. 온/오프라인을 막론하고 여러 흥미로운 프론트엔드 디자인 강의들을 제작하는 데에 집중하고 있습니다. 웹을 이용하는 사람들, 웹을 만드는 사람들 모두가 아름다운 웹을 원하는 시대가 되었습니다. 같이 아름다운 웹사이트 제작을 즐겨봅시다 :)

앗! 코스의 일정 또는 장소가 맞지 않나요?

빔캠프는 최대한 많은 인원이 참여 할 수 있는 코스를 만들기 위해 여러분들의 의견을 상시 조사하고 있습니다. 설문조사에 참여해주시면 좀 더 합리적인 캠프 코스를 만드는데 많은 도움이 될 것입니다.

좀 더 체계적으로, 좀 더 스마트하게!

HTML+CSS가 무엇인지는 알지만 기초지식의 빈틈으로 인해 혼란스럽다면!

무엇을 배우나요?

HTML+CSS가 무엇인지는 알지만 좀 더 체계적인 정리가 필요한 모든 분에게 꼭 맞는 클래스입니다. 웹사이트를 좀 더 유연하고 유지보수에 최적화하여 코딩하는 여러 방법을 다룹니다. 특히 반응형 웹디자인 기술을 구현하기 위한 %, em, rem 단위와 그리드 시스템에 대하여 체계적으로 접근합니다.

유연한 반응형웹

요즘의 웹은 PC뿐만 아니라 정말 다양한 환경에서 사용됩니다. 다양한 환경에 의해 화면사이즈 또한 천차만별인 시대입니다. 다양한 화면사이즈에 자동으로 반응하여 최적화된 레이아웃, 사용자 환경을 제공하는 것이 반응형웹의 본질입니다.

CSS 방법론

CSS의 다양한 속성들을 단편적으로 알고 있는것 보다 중요한 개념이 바로 많은 양의 CSS코드를 어떻게 하면 확장성있고, 유지보수가 간편하고, 알기 쉬운 코드를 작성하는가하는 개념입니다. 이미 많은 전문가들이 이를 CSS 방법론이라는 이름으로 활발한 연구가 진행되고 있습니다.

수강생들의 생생한 캠프리뷰

100% 실제수강생의 솔직 후기입니다

  • 디자이너 CHW

    첫 걸음을 듣고 퍼블리싱의 기초를 배우고 재미를 느꼈다면 한 걸음 더 과정을 통해서 실무에서 필요한 '생각하는 법'을 배우게 된거 같아요. 더 큰 그림을 그리기 위해 어떻게 생각하고 어떻게 마크업을 기획해야하는지를 알게 되서 정말 많은 도움이 됐어요. 과정 이름 처럼 한걸음을 더 나아간 것 뿐일 수 있지만 한 걸음의 큰 힘을 실어주는 과정임이 분명합니다. 적극 추천합니다!

  • 대학생 김유정

    디자인에 참고를 하고자 맛보기식으로 첫걸음 수업을 수강하였다가, CSS에 흥미가 생겨서 한걸음 더 수업을 수강하게 되었습니다. 암기식의 가르침이 아니라 원리를 배우고 실무에 어떻게 적용되는지를 배울 수 있어서 좋은 강연이었습니다.^^

  • 디자이너 Yoohee

    다른 학원을 돌고돌다가 친구의 추천을 받고 등록하였습니다. 다른 곳에서 수강할 땐 뭔가 겉도는 식의 수업이였는데 빔캠프는 실제로 실무에 적용할 수 있는 것을 쏙쏙 알려줘서 좋았습니다. 조금 더 심화된 단계를 배울 예정이면 고민없이 다시 빔캠프를 수강할 예정입니다.

  • 디자이너 greensweet

    1년차가 되어가는 현직 퍼블리셔입니다. 무려 10개월간의 국비 교육과정(이라고 쓰고 허송세월이라고 읽는)을 거치고 어렵게 처음 입사한 회사에서 그동안 혼란스러운 시간을 보냈습니다. 일많아서 바쁜 프로그래머(지만 아쉬운대로 사수가 된)에게 도움받으려니 미안하고, 혼자서 헤매다가 엉망인 코드를 넘겨주자니 미안하고, 이래저래 시간끌다가 작업시간을 너무 써버려서 또 너무 미안하고, 문제생겨서 수정해야하는데 내 코드를 내가 몰라서 시간을 또 많이 써버려서 너무너무 미안했습니다.

    결코 혼자 시간들여 애쓰고 길을 찾는다고해서 늘게 되는 것 같지 않았어요. 좋은 정보, 강의가 넘쳐나지만 좋은 길을 알고 선택하기는 어려웠습니다. 그렇게 강의가 간절했던 와중에 좋은 선택을 하게 된 것 같습니다.

    어렵게 회사생활하면서 좌절감이 컸는데, 한 달 수업을 듣고 html,CSS 작성 과정에서 뭘 생각해야하는지 체계가 생겨서 혼란스러움이 많이 걷힌 것 같아요.
    질문할 수 있는 시간이 많았는데 실무경험이 풍부하신 데다가 어떤 질문을 해도 환영하시고 결론을 다 갖고 계신 것 같았어요. 유튜브강의처럼 설명도 상세하지만 질문해서 답변을 들을 때가 이 수업의 가장 큰 장점 같습니다. 질문하는 것도 어려운 일인데 서툴게 질문해도 뭘 궁금해하는지 다 알고 정리를 잘해주시는 베테랑선생님이셨어요. 수업 때 어떻게 그렇게 에너지가 넘치시는지 모르겠습니다.
    꼭 다른 수업 과정이 개설되길 바라고, 또 수강하고 싶습니다. 수업 꼭 만들어주세요.

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

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

한 단계 도약을 원하는실무자

예전 고정크기 방식의 웹사이트 제작 경험만 있는 실무자라면 사고의 전환이 필요합니다.

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

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

코드가 욕심나는디자이너

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

아름다움을 아는개발자

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

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

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

HTML+CSS 한 걸음 더 캠프의 목표

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

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

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

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

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

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

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

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

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

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

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

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

최대한 친절한 캠프 진행을 지향합니다

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

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

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

이론 90%

  • CSS 선택자 다시보기 & 우선순위
  • inline과 block의 차이점
  • CSS3란 무엇인가?
  • Margin의 음수값 사용
  • CSS로 가로배치를 하려면?

실습 10%

  • 가로배치를 위한 inline-block
  • Margin의 음수값 사용으로 만들 수 있는 예제
  • 질문 및 답변

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

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

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

이론 80%

  • float의 원래 용도는 가로배치가 아니다
  • root 요소가 가지고 있는 특성을 이용하기
  • overflow 속성으로 만들 수 있는 3가지 레이아웃 예시
  • position 기초와 고급기법

실습 20%

  • float로 사이드바 만들기
  • overflow사용 예시 예제
  • 질문 및 답변

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

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

css methodologies prefix layouts component

이론 40%

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

실습 60%

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

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

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

Grid System 12 Unit viewport height em

이론 70%

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

실습 30%

  • 12단 그리드 작성해보기
  • 질문과 답변

5일차미디어쿼리 맛보기

반응형웹은 웹사이트를 보고있는 환경에 따라 레이아웃의 변화가 일어나야함으로 고정px단위보다는 가변단위를 위주로 사용해야하는데요. 때로는 바뀌는 레이아웃에 따라 값 자체를 바꿔 표현해야하는 상황도 만나게 됩니다. 그 때 이용하는 미디어쿼리 개념에 대한 설명입니다.

CSS3 media-queries max-width meta tag

이론 50%

  • 창 크기에 따른 CSS의 변화 일으켜보기
  • 미디어쿼리도 결국 기본 CSS이다! 기초개념 다시한번

실습 50%

  • 모바일 환경에서 확인해보기
  • 질문과 답변

6일차깨지지 않는 레이아웃

CSS기초 지식만으로도 여러 환경에 유연하게 반응하는 반응형 컴포넌트를 만들 수 있습니다. 자칫 놓치기 쉬운 개념들을 다시 한번 되 짚어보는 시간을 가집니다.

auto keyword % unit box-sizing

이론 70%

  • 가변 단위의 사용
  • %단위란 어떻게 동작하는가?
  • auto키워드에 대하여

실습 30%

  • 풍부한 예시로 알아보기
  • 질문과 답변

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

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

em rem line-height Line box

이론 80%

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

실습 20%

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

8일차미디어쿼리 변경점

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

mediaquery breakpoint

이론 70%

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

실습 30%

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

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

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

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

Creator. Glenn Lee

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

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

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

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

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

자주 묻는 질문

궁금한 점은 물어보세요

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

    사람마다 개인 차이는 있습니다. 3시간 씩 8강, 총 시간으로만 따지면 24시간 밖에 되지 않기 때문에 과제를 놓치지 않고 꾸준히 한다면 반응형웹에 대해 이해하고, 유지보수에 최적화된 체계적인 구조의 웹사이트를 구현 할 수 있을 것입니다.

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

    HTML+CSS에 대한 선행지식이 없다면 듣기 어려운 캠프입니다. HTML+CSS 첫 걸음 캠프에 먼저 참여 하시기를 추천 드립니다.

  • 준비물은 무엇인가요?

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

  • 디자이너만 수업을 들을 수 있나요?

    HTML+CSS 기초 지식만 있다면, 비전공자 또는 웹디자인 코딩에 관심이 있는 사람이라면 누구든지 참여 가능합니다.

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

    홈페이지에 이미 공지된 일정을 변경하거나 조율하는 것은 어렵습니다. 3개월 정도의 강의 일정을 미리 공지하기 때문에 추후 일정을 참고 부탁드립니다.

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

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

준비된 다른 캠프도 만나보세요

디자이너 시선으로 접근하는 다양한 웹디자인/개발 온오프라인 컨텐츠를 제공합니다