HTML+CSS 첫 걸음

코딩으로 웹디자인 by Jeoney Kim

무엇을 배우나요?

코딩으로 웹디자인을 할 수 있는 기술 HTML+CSS 첫 걸음 단계입니다. 웹 레이아웃 구성에 필요한 필수 지식을 다양한 실습을 통해 배우는 강의입니다. 태그의 성질을 파악하고 원리를 배워 여러분 스스로가 자연스럽게 만들고자 하는것을 만들 수 있게 합니다. 원리를 이해하면 문제해결도 쉽고 빠르게 할 수 있습니다. 디자이너, 비전공자, 현직 실무자 등 누구든지 수강 가능한 최고의 입문 캠프입니다.
해당 달에 오픈된 캠프가 없습니다
  • 일정선택

    상단의 일정표중 본인에게 맞는 일정을 선택해 주세요

  • 신청 및 결제

    결제가 정상적으로 완료되면 결제 완료문자와 이메일이 전송됩니다

  • 노트북 셋팅

    노트북은 필수 준비물입니다. 맥 또는 윈도우즈 무관합니다.

  • 안내문자확인

    개강 전날에 최종 안내문자를 보내 드립니다

  • 10분전 착석

    정시에 시작되니 여유롭게 10분 전까지 착석 부탁드립니다

웹사이트 제작의 올바른 첫 걸음

웹을 이루고 있는 가장 기초적인 두가지 기술을 만나 보세요

구조를 위한 HTML

HTML은 웹을 이루고 있는 가장 기초적인 구성 요소입니다. HTML은 웹페이지의 내용을 작성하고 의미를 부여하는 데 사용합니다. 논리적인 구조와 올바른 의미를 부여 한다면 검색엔진의 검색 결과에도 긍정적인 영향을 끼칠 수 있습니다. 웹사이트 제작의 첫 걸음은 HTML 웹페이지 작성입니다.

표현을 위한 CSS

작성된 HTML을 기반으로 웹페이지의 겉모양을 다양한 디자인으로 업그레이드 할 수 있습니다. 빔캠프는 이 디자인을 위한 CSS 기술을 올바르게 이해하고 내가 표현하고 싶은 디자인을 문제 없이 제작 하는 것에 초점을 맞춥니다. CSS라는 이름의 표현 재료를 마음껏 활용하여 익숙해져야 합니다.

무엇을 배우나요?

HTML+CSS 첫 걸음

코딩으로 웹디자인을 할 수 있는 기술 HTML+CSS 첫 걸음 단계입니다. 웹 레이아웃 구성에 필요한 필수 지식을 다양한 실습을 통해 배우는 강의입니다. HTML요소의 성질을 파악하고 그림이 그려지는 원리를 배워 여러분 스스로가 자연스럽게 만들고자 하는것을 만들 수 있게 합니다. 원리를 이해하면 문제해결도 빠르고 정확하게 할 수 있습니다. 디자이너, 비전공자, 현직 실무자 등 누구든지 수강 가능한 최고의 입문 캠프입니다.

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

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

열정있는 새싹!입문자

웹사이트 제작이 관심이 생겨, 용기를 내어 제대로 배워 보려는 모든 열정있는 입문자, 비전공자

열정을 되찾을경력단절자

혹시 아직도 table로 힘들게 레이아웃을 잡으시나요? 급속도로 발전해버린 웹 기술이 낯설게 느껴진다면!

코드가 욕심나는디자이너

디자이너가 코딩에 욕심을 내는 것은 어쪄면 당연한 일입니다. 코딩을 해야지만이 원하는 것을 100% 만들수 있기 때문입니다.

아름다움을 아는개발자

사실 개발자도 디자이너입니다. 기술과 예술은 생각보다 더 맞닿아 있습니다. 사용하기 편리한, 보기에 아름다운 디자인도 기술입니다.

우주정복 자신감!대학생

전공과는 상관없이 자신의 자기개발이 필요하다면 웹사이트 제작으로 시작해보세요. 작은 시작이지만 큰 결과로 발전할 수도 있어요.

HTML+CSS 첫 걸음 캠프의 목표

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

웹디자인은 CSS로!코드로 그리기

재료에 대한 명확한 이해가 중요합니다. 기초를 탄탄히하여 내가 원하는 웹사이트를 디자인 할 수 있습니다.

무조건 암기? NO!생각하는 힘

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

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

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

끝이 아닌 시작!지속적인 공부

웹은 방대한 분야이기 때문에 8강의 수업은 단지 웹에 입문한 것 뿐입니다. 빔캠프는 스스로도 지속적인 공부를 진행 할 수 있도록 가이드를 드립니다.

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

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

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

입문자라도 쉽게 따라 올 수 있도록!

1일차웹디자인은 박스다!

웹사이트 제작에 가장 기본이 되는 HTML이 어떤 역할을 하는지 알아보고 직접 작성해 봅니다. 웹사이트를 마음대로 꾸미기 위한 CSS 기술이 어떤 방식으로 동작하는지 알아봅니다.

HTML CSS Selector block-level-element Box-Model

이론 80%

  • HTML을 작성해야 하는 이유와 목적
  • CSS의 동작방식, 선택자 개념
  • 웹디자인은 모두 박스형태에서 시작한다
  • CSS 박스모델 알아보기

실습 20%

  • 내가 만드는 최초의 웹페이지
  • CSS 박스모델 다양한 연습 해보기
  • 질문 및 답변

2일차명찰을 달아보자!

CSS 작업의 기초는 선택자(Selector)의 작성입니다. 디자인 하기 원하는 요소를 제대로 선택 할 수 있어야 효율적인 작업이 가능합니다. 선택자 중 가장 많이 쓰이는 Class 선택자를 배웁니다. Class 선택자가 왜 필요하고, 어떤 방식으로 동작하는지 이해하는 것이 목표입니다.

Selector type-selector descendant-combinator class-selector pseudo-class

이론 80%

  • 선택자 기본 개념
  • 하위선택자로 선택하기
  • 클래스 이름으로 선택하기
  • 클래스를 올바르게 활용하기 위한 기초 다잡기
  • 가상선택자도 한번 써보자

실습 20%

  • 나의 디자인을 좀 더 섬세하기 작업하기 위한 클래스 실습
  • 클래스 작성시 실수 하기 쉬운 개념 실습하기
  • 질문 및 답변

3일차텍스트를 다뤄보자!

웹페이지는 여러개의 박스로 구성 되어 있습니다. 박스안에는 무엇이 들어있을까요? 바로 텍스트나 이미지가 들어 가겠지요! 텍스트는 박스 형태가 아닙니다. 이러한 요소를 인라인이라고 부릅니다

inline-level-element inline-block display line-height span

이론 80%

  • 텍스트 요소를 다루는 기초지식! 인라인 알아보기
  • 타이포그래피를 다루는 속성들
  • 어떤 성질로 보여지게 할 것인가! 디스플레이 속성
  • 인라인과 블럭의 특정중 장점만! 인라인-블럭
  • 인라인-블럭의 단점

실습 20%

  • 인라인 요소의 장단점 파악하기
  • 인라인-블럭으로 만들 수 있는 예제

4일차붕~! 띄워 가로배치!

박스들을 가로배치하기 위한 속성인 float속성을 알아봅니다! 우선 float를 최대한 많이 경험하여 어떠한 장단점이 있는지 느껴보는 시간을 가집니다.

float

이론 30%

  • 박스를 가로로 배치하기 위한 플로트 속성 알아보기
  • 플로트는 문제점이 있다! 문제점 자세히 파악하기

실습 70%

  • 플로트로 인해 생기는 문제점 해결해 보기
  • 질문과 답변

5일차가로배치 문제점 파악 & 해결

박스를 가로배치하기 위한 플로트 속성에는 치명적인 단점이 존재합니다! 그러한 문제가 왜 생기는지 자세히 알아보고 어떻게 해결하면 되는지 이야기 나눕니다. 플로트속성이 만들어지게 된 역사부터 이야기합니다.

float clear overflow

이론 50%

  • 플로트의 원래 용도 알아보기
  • 플로트를 온전히 컨트롤 하기 위한 노력! 클리어!
  • 플로트를 온전히 컨트롤 하기 위한 노력! 오버플로우!

실습 50%

  • 플로트의 문제점을 클리어 속성으로 해결하기
  • 플로트의 문제점을 오버플로우 속성으로 해결하기
  • 상황에 따른 해결 방법의 차이 경험해보기

6일차다양한 레이아웃!

박스를 가로배치하기 위한 플로트를 이해하는것도 중요하지만 사실 더욱 중요한 것은 풍부한 실습입니다. 대부분의 시간을 실습을 통해 플로트의 여러 사례를 경험해 볼 수 있게 합니다.

float clear overflow css-layouts

이론 10%

  • 박스모델과 플로트 속성의 조화

실습 90%

  • 플로트로 만드는 그리드
  • 플로트로 만드는 다양한 레이아웃
  • 질문과 답변

7일차원하는 위치로 딱!

요소의 위치를 좀 더 직접적으로 지정 할 수 있는 포지션 속성에 대하여 배워봅니다. 포지션 속성의 여러 면모를 접해보고 어떤 특성이 있는지, 어떻게 활용하면 될 것인가를 연구합니다.

position relative absolute

이론 70%

  • 현재 위치기준으로 위치를 이동 시켜보자! 상대적 기준점!
  • 전체 창 기준으로 위치를 이동 시켜보자! 절대적 기준점!
  • 상대적인 절대 기준점 사용해보기

실습 30%

  • 절대적인 기준점으로 배치하기
  • 박스에서 벗어나는 디자인해보기
  • 질문과 답변

8일차구름위로 올라가기

지금까지 다루어 본 레이아웃 관련 CSS속성을 총집합하여 원하는 웹페이지를 디자인해봅니다. 100% 실습을 통해 원하는 페이지를 완성하는 것이 목표입니다.

float+position relative+absolute box-model inline block inline-block

최종정리 10%

  • 블럭, 인라인, 인라인-블럭
  • 플로트와 플로트 해제법
  • 포지션 결합하여 사용하기

실습 90%

  • 배운 속성을 조합하여 원하는 페이지 제작하기
  • 최종 질문과 답변

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

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

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

Creator. Jeoney Kim

반갑습니다, 김지연입니다.

어렷을 때부터 웹사이트 제작이 좋았습니다. 무엇인가 내 마음대로 만들어 나가는 작업이 매우 자유롭고 재미있음을 경험 하였습니다.

서버관리 및 퍼블리셔, 유지보수 업무, 강사에 이르기 까지 웹과 관련된 다양한 경험을 하였습니다. 정말 웹을 사랑하는 사람에게 배우게 되는 것입니다 :)

열정 가득한 수강생작을 만나보세요!

실제 진행하는 예제와 수강생이 직접 제작한 웹디자인

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

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

  • 디자이너 황서연

    처음에 아무것도 모르고 수업을 들었는데,
    지금은 완벽하진 않아도 조금이나마 제가 머릿속에서 생각하는 디자인의 페이지를 구현할 수 있다는 점이 좋았습니다.
    짧은 기간이었지만 여러가지를 배우고 강의 잘 듣고 갑니다.

  • 대학생 김민아

    디자인과를 다니다가 휴학을 한 후 무엇을 배워볼까 고민하던 중에 독학을하다가 실패한 html을 배워보기로 결정하고 학원을 등록하였습니다! 독학을 할때 몇날며칠이 걸리던 부분이 빔캠프에서는 선생님의 자세한 설명으로 쉽게 금방 이해가 되었습니다. 과제도 항상 리뷰를 자세하게 해주셔서 좋았습니다! 다음 강의도 듣고 싶어서 신청하려구요! 좋아용!

  • 대학생 박소연

    너무 좋아요! 독학으로 한동안 혼자서 해보려 했는데 게을러지기도 하고 어려운 게 있으면 해결하기가 어려워 수강하게 되었어요. 개인 스케쥴상 복습을 많이 하지는 못해서 스스로에게 아쉬웠지만 수업만 들어도 유익하고 도움이 많이 됐어요! 숙제도 꼬박하고 열심히 한 번 더 제대로 공부해보고 싶어지는 마음이 들었습니다ㅜㅜ! 하나하나 피드백 해주시는 것도 너무 좋고 스스로 답을 찾는 방법과 코딩에 대한 재미를 붙여주셔서 감사합니다.

  • 디자이너 박윤정

    GUI 디자이너 8년차...회사에서 싸이트 작업이 예정되어 있어서 예전 코딩업무를 했던걸 복습한다는 생각으로 수업을 듣게 되었어요. 8강 수업 동안 처음에 생각한 복습의 차원을 뛰어넘는 수준 높고, 강도 있고, 깊이 있는 수업으로 생각 했던 것보다 더 많은 걸 얻었답니다.
    기본 원리를 설명해주시는 방식으로 수업이 진행되어서 그동안 외워서 작업했던 코딩에서 벗어나 혼자 작업할때도 문제가 생기면 해결 할 수 있게 되었어요.
    수업 진행마다 복습을 하고 다시 사용해 보고 예제와 과제를 체크하면서 익히는 과정이 습득하는데 도움이 많이되고 정말 좋았어요.
    수업이 끝나고 일주일 정도 되었는데 선생님께서 그동안 과제로 냈던 제가 작성한 코딩 페이지를 되짚어 주시는 감동까지...
    처음에 빔캠프사이트에서 댓글들을 보고 이렇게까지 좋으려나 했는데...정말 전 대대대 만족 이었구요.
    수업 듣는 동안엔 과제를 해서 다음 수업때 궁금했던걸 풀고 싶어서 퇴근하고 들어와 새벽 3시까지 과제를 했을 정도로 너무 재미있게 수업을 들었답니다.
    코딩을 짜고 나면 끝이 아니고 문제가 생기잖아요~ 이럴때 어떻게 해결하고 수정해야 하는지가 정말 중요 한 것 같아요.
    그래서 전 빔캠프 너무 좋았어요~ 해결할 수 있는 방법을 찾을 수 있게 되었으니까요!
    너무 감사합니다.
    정말 도움 많이 되었어요!

자주 묻는 질문

궁금한 점은 물어보세요

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

    수강생 작품을 참고하시면 됩니다.^^ 물론 사람마다 개인 차이는 있습니다. 3시간 씩 8강, 총 시간으로만 따지면 24시간 밖에 되지 않기 때문에 과제를 놓치지 않고 꾸준히 한다면 기본적인 홈페이지 레이아웃은 혼자서도 충분히 만들 수 있습니다.

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

    처음 시작은 아무것도 모르는 입장에서 시작합니다. 그러나 강의가 절반 이상 넘어가면 홈페이지 전체 레이아웃 잡기를 토대로 다양한 구성으로 진행 됩니다.

  • 준비물은 무엇인가요?

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

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

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

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

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

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

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

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

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