[웹개발 입문] 혼자서도 개발하는 HTML과 CSS with 당근마켓

웹 페이지 제작을 위한 핵심, HTML과 CSS!
활용까지 고려한 강의로 학습하세요 📖

강의 주제 📖

여러분은 div 태그하면 어떤 내용이 생각이 나시나요? 레이아웃을 나누는 개념이 떠오르시나요? 기본 강의로 배울 때는 이 정도만 배웠어요. 하지만 이 정도 개념으로는 div 태그를 제대로 활용할 수 없어요. div 태그는 블록 태그로써 블록 속성을 가지고 있는 게 더 중요해요.

저는 스스로 웹 페이지를 만들고 싶었어요. 여러 HTML/CSS 강의와 실습 위주의 강의를 모두 듣고 내가 직접 만들려고 시도했지만, 정작 스스로 원하는 웹 페이지를 만들 수 없는 나를 발견했어요. 어떤 문제가 있는지 고민했어요.

그리고 HTML/CSS를 활용하기 위해서 적당히 알고서는 응용을 할 수 없다는 걸 깨달았어요. HTML/CSS 모든 기능들을 알기 어렵고 그럴 필요도 없어요. 적어도 개발에 앞서 꼭 필요한 탄탄한 청사진을 만들어야 원하시는 페이지를 만들고 응용할 수 있어요.

저는 이런 고충을 겪고 답답한 마음에 HTML/CSS 강의를 제작했어요. 만들면서 배우는 강의보다는 시작이 조금 지루하실 수 있지만 강의 완료 후에는 직접 만들 수 있으니 더 큰 재미를 보실 수 있으실 거예요. 목표는 HTML/CSS를 스스로 활용할 수 있으며, 웹 개발의 바이블 MDN을 보고 이후에도 스스로 문제들을 해결할 힘을 키우는 것이에요.

이런 분들께 추천해요 🙋

웹 개발 입문을 고민하는 분

웹 페이지를 만들어보고 싶은 분

HTML과 CSS를 배워보고 싶은 분

HTML/CSS를 공부했지만 활용이 어려운 분

강의 특징 ✨

학습 내용 📚

1. 기본 필수 개념부터

• 전 세계 웹 개발의 공식 문서처럼 사용되는 MDN을 기반으로 친절한 설명과 함께 HTML/CSS 필수 개념을 배울 거예요.
• 놓치기 쉽지만, 개발 시 꼭 알아야 하는 개념(Block 레벨 특징, Normal Flow 등)을 학습해요.
• MDN 기반으로 배우기에 실제 개발 시 필요할 때, 언제든 문서를 열어볼 수 있어요.

2. 모든 학습은 실제 눈으로

• HTML/CSS를 배우는 목표는 웹브라우저에서 볼 수 있는 웹사이트를 만드는 게 목표에요. 학습 중 실습은 코드와 브라우저를 통해서 눈으로 실제 발생하는 모습을 보면서 학습을 진행해요.
• 샘플 코드도 주어지며 내 컴퓨터에서 직접 여러 가지 실습을 해보실 수 있어요.

3. 실전 프로젝트와 함께

• 필수 개념을 모두 익히신 후에는 실전 프로젝트로 경험치를 쌓으실 거예요.

• 사진 내용처럼 당근마켓을 직접 만들고 URL을 생성할 수 있도록 배포까지 진행해요.

예상 질문 Q&A 💬

지식공유자 소개 ✒️

이력 사항

• 현) Mozilla 오픈소스 committer
• 전) 핀테크 스타트업 개발자
• 전) 과기부 글로벌 전문 개발자
• 전) 효성 빌링개발팀 (정산 DB 개발)

수강 전 참고 사항 📢

실습 환경

• 운영 체제 및 버전(OS): Windows10 (macOS, Linux 어떤 운영체제에서도 실습 가능) 
• 사용 도구: Firefox / Chrom browser (Firefox, Chrom, Safari 모두 실습 가능), Visual Studio Code