개발 · 프로그래밍

웹 개발

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

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

필수적인 개념과 함께 HTML / CSS를 스스로 잘 활용하기 위한 강의에요.

(4.7) 수강평 3개

수강생 45명

MJ코딩

HTML/CSS

입문자를 위해 준비한
[웹 개발, 웹 퍼블리싱] 강의입니다.

이런 걸 배울 수 있어요

HTML/CSS 기본기를 확실히 다지기
웹사이트를 만드는 방법
스스로 실력을 키우고 성장할 수 있는 근력 키우기
당근마켓 웹사이트 제작

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

강의 주제 📖

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

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

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

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

HTML과 CSS 잘 활용하기 3 Step 📌

HTML/CSS
필수 내용 정리

웹 페이지 개발
필수 핵심 개념

당근마켓 사이트
클론 코딩 실습

이런 분들께 추천해요 🙋

웹 개발 입문을 고민하는 분

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

HTML과 CSS를 배워보고 싶은 분

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

이 강의와 함께해요! 😁

HTML/CSS를 모르고 리액트나 자바스크립트를 배우셨으면 분명 다시 돌아오셔서 HTML/CSS를 학습하시게 될거에요. 직접 사이트를 만들고 활용할 수 있도록 차근차근 학습해요.
HTML/CSS를 공부하고 활용이 어렵다면 기본 개념을 제대로 숙지하지 못했거나, 웹 사이트를 만들기 위한 충분한 연습이 안 되어 있을 수 있어요. 필수 개념 학습과 강의를 마친 후에도 능동적으로 학습하실 수 있게 도와드려요. 나중엔 모르는 내용이나 문제가 발생해도 개발자 도구 및 MDN 문서를 활용하여 스스로 확인할 수 있을 거예요.
만들면서 배우는 강의는 결과가 바로 나와 재미는 있지만 전반적인 정리하기에 어려움이 있어요. 자유도 높은 HTML/CSS 분야에서 꼭 필요한 건, 필수적인 개념의 이해와 연습이에요. 개념부터 제대로 잡아봐요.

강의 특징 ✨

#1.
핵심 기초를
탄탄히

이 강의는 만들면서 배우는 강의가 아니에요. HTML / CSS를 직접 활용하실 수 있도록 웹페이지 제작에 필요한 필수적인 개념을 학습해요. 강의 내용들의 개념들이 잡히지 않는다면 모래 위에 성을 쌓는 것과 같아요.

#2.
모든 과정을
눈으로 확인

학습할 때는 모두 실제 브라우저에서 눈으로 보면서 학습을 하실 거예요. 결국에 우리는 브라우저에 보이기 위한 웹페이지 제작을 해야 하기 때문이죠.

#3.
실전 연습으로
마무리

개념 학습이 끝난 후에는 실제 프로젝트인 당근마켓을 만들면서 실전 연습을 해요. 웹사이트를 만드는 감을 잡고 실전 연습을 통해 강의 이후에도 HTML/CSS를 활용하여 스스로 웹 사이트를 만드실 수 있어요.

학습 내용 📚

1. 기본 필수 개념부터

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

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

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

3. 실전 프로젝트와 함께

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

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

예상 질문 Q&A 💬

Q. 맥에서도 실습을 할 수 있나요?

크롬(or 사파리, 파이어폭스) 브라우저를 사용하신다면 어떤 운영체제에서도 연습하실 수 있어요.

Q. 비전공자도 수강할 수 있나요?

웹 개발 입문 강의로써 비전공자도 수강하실 수 있어요 :)

Q. 실습을 위한 별도의 프로그램을 설치가 필요하나요?

지금 사용 중이신 인터넷 브라우저와 VSC라는 코딩 작성 툴을 사용할 거예요. VSC 설치는 강의 내에서 안내를 드리겠습니다.

Q. 이번 강의를 들으면 어떤 일을 할 수 있나요?

HTML/CSS를 활용해서 웹사이트 제작을 하실 수 있어요! 배포까지 진행하고 사람들과 공유할 수 있는 URL을 만들 수 있는 내용까지 학습하겠습니다.

Q. 반응형 디자인 내용도 포함이 되어 있나요?

반응형 디자인 내용은 포함하지 않았어요. 웹 개발을 시작하시는 분들이나 HTML/CSS 초급자분이라면 반응형 내용까지는 조금 과하다는 생각이에요. 지금 필요한 건 반응형이 아닌 필수 개념 학습이에요. 강의를 통해서 연습하고 HTML/CSS를 사용하시다 보면, 필요에 따라서 자연스럽게 스스로 학습하실 수 있어요.

지식공유자 소개 ✒️

이력 사항

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

수강 전 참고 사항 📢

실습 환경

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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

코딩을 처음 접하시는 분
웹개발이 처음이신 분
HTML/CSS 활용이 어려우신 분

안녕하세요
MJ코딩입니다.

3,617

명

수강생

133

개

수강평

개

답변

4.7

점

강의 평점

개

강의

안녕하세요. MJ코딩입니다😀

강의에 관심과 수강을 해주셔서 감사합니다 :)

강의 내용은 처음 접할 때는 가볍지만은 않은 내용이지만, 이해를 하실 수 있고 실제로 사용하실 수 있도록 준비를 하였습니다.

커리어와 실무에 도움이 되셨으면 하는 마음입니다.

프로그래밍 학습을 위한 유튜브 채널도 함께 운영을 하고 있습니다. (유튜브 링크 클릭)

필요한 내용을 보시고 참고 하여 도움이 되셨으면 좋겠습니다.

감사합니다^^

커리큘럼

전체

37개 ∙ (8시간 19분)

섹션 1. HTML 기본 다지기

7개 ∙ (1시간 6분)

1. #0 강의 소개
04:15
2. 샘플코드 다운로드 방법
3. #1 HTML 시작하기
15:29
4. #2 head 태그 & 메타데이터
11:18
5. #3 웹의 기본 텍스트 다루기
13:49
6. #4 이동을 위한 하이퍼링크 a 태그
10:33
7. #5 웹사이트의 구조 잡기 태그
11:07

섹션 2. CSS 기본 다지기

12개 ∙ (3시간 5분)

8. #1 CSS 시작하기 (with 선택자)
20:21
9. #2 CSS 연결 방법 및 복습
17:04
10. #3 CSS의 상속과 우선순위
18:08
11. #4 선택자 정리
07:41
12. #5 box 모델 (block 속성 vs inline 속성)
17:03
13. #6 box 모델의 구조 (margin, border, padding, content)
11:32
14. #7 box 모델 상세 분석
23:26
15. #8 배경과 테두리 꾸미기
15:17
16. #9 콘텐츠가 넘치는 overflow
04:15
17. #10 CSS의 단위
11:36
18. #11 항목 크기 지정하기
21:59
19. #12 이미지 크기 & form 태그
17:11

섹션 3. CSS 텍스트 다루기

4개 ∙ (1시간 2분)

20. #1 폰트 스타일링
11:41
21. #2 리스트 스타일링
16:50
22. #3 링크 스타일링
21:21
23. #4 구글 폰트 & BEM
12:10

섹션 4. CSS 레이아웃

7개 ∙ (1시간 39분)

섹션 5. 실전 사이트로 만들면서 공부하기

7개 ∙ (1시간 26분)

강의 게시일: 2023. 01. 09.

마지막 업데이트일: 2023. 01. 10.

수강평

전체

3개

4.7

3개의 수강평

시골햄스터
수강평 10
∙
평균 평점 5.0
2023. 01. 24.
5
100% 수강 후 작성
클론코딩 재밌어요
- MJ코딩
  지식공유자
  2023. 01. 26.
  시골햄스터님 안녕하세요 :) 도움이 되신 것 같아 기쁜 마음이며 강의를 수강해주셔서 감사합니다 😀 강의 내용을 기반으로 다른 사이트도 "직접" 만들어 보시면서 더욱더 훌륭한 실력을 쌓으셨으면 좋겠습니다. 감사합니다 ^^
임채성
수강평 1
∙
평균 평점 5.0
2025. 04. 30.
5
62% 수강 후 작성
choisy030
수강평 1
∙
평균 평점 4.0
2024. 06. 02.
4
97% 수강 후 작성

MJ코딩님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

[스프링 배치 입문] 예제로 배우는 핵심 Spring Batch

MJ코딩

핵심 개념을 배우고 바로 사용하는 Spring Batch! 스프링 배치의 진입장벽을 낮추고, 직접 스프링 배치를 활용할 수 있어요.

초급

Spring Batch

직접 활용할 수 있는 Git과 Github - 기초부터 협업까지

MJ코딩

강의에 목표는 협업, Git과 Github를 직접 다루시면서 협업까지 하실 수 있도록 학습을 해볼게요 :)

입문

GitHub, Git

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

Colini 웹개발 가이드

싸플

웹 개발 처음 시작하시는 분들을 위한 완전 기초 강의! HTML, CSS, Javascript, React 등 웹개발 기초를 쌓아보자!

입문

HTML/CSS, JavaScript, React

제임스코딩 풀스택 개발 입문 5주 완성

제임스코딩

제임스코딩 과정은 풀스택 심화 커리큘럼 시작 전, 웹 개발의 기본기를 함양할 수 있는 풀스택 개발 입문 과정입니다. 여러분은 제임스코딩 풀스택 개발 입문 5주 완성을 통해 프로그래밍과 자바스크립트의 기초를 탄탄하게 다질 수 있습니다.

입문

HTML/CSS, JavaScript, Git

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

영코디 킴쌤

초등학생 코딩교육부터 시작하여 IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자인 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 쉽고 재미있는 코딩강의를 이제 오프라인 뿐만 아니라 온라인에서도 만나실 수 있습니다. 500여명이 넘는 프론트엔드, 백엔드, 풀스택, 웹 개발자를 배출해온 영코디 킴쌤과 함께라면 당신의 개발자 꿈도 곧 현실이 됩니다!

입문

HTML/CSS, 웹 디자인, 클론코딩

김일한의 리액트(React) 개발자를 위한 실습을 통한 입문 과정

소프트캠퍼스

본 과정은 리액트를 이용하여 프론트 웹을 개발할 수 있는 방법에 대해 학습합니다. 리액트를 위한 자바스크립트 핵심문법, CDN 기반 리액트 개발, NPM 기반 리액트 개발 방법 학습 합니다.

입문

React, JavaScript, HTML/CSS

실전 HTML & CSS 강좌

Seoul Wiz

Web을구성하고있는HTML5 과 CSS3 를 다루는 강좌 입니다.

입문

HTML/CSS

[인프런 X 생활코딩] HTML과 인터넷

인프런

생활코딩의 첫 번째 웹 개발 강의, <WEB 1 - HTML & Internet> 리뉴얼 버전이 오직 인프런에서만 공개됩니다!

입문

HTML/CSS, JavaScript, netlify

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

초급

HTML/CSS, 반응형 웹, 인터랙티브 웹

2024 html/css 기초탄탄 초스피드 완강코스

J.영

html/css초보 입문자를 대상으로 기초를 탄탄하게 다지며, 물론 반응형 레이아웃 제작 실전을 배울 수 있습니다.

입문

HTML/CSS, html-layout, css3

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

웹디자인기능사 출제기준(2025.1.1~2025.12.31)까지 시행되는 출제기준에 정확히 맞춘 웹디자인 기능사 실기 시험 내용에 최적화 되어 있는 실기시험 전문 강의로서, HTML+CSS+JQUERY 퍼블리싱, 코딩웍스 웹디자인 기능사 실기시험 강의는 다릅니다. 2023년도에 추가된 D유형, E유형 완벽 제작 수업영상과 2024년도에 추가된 F유형 완벽 제작 수업영상이 모두 반영되어 있습니다.

입문

HTML/CSS, jQuery, 웹 디자인

퍼블리셔 취업 진짜 실전 가이드(PDF)

코딩웍스(Coding Works)

퍼블리셔 취업을 위한 진짜 가이드 전자책(PDF)으로 효율적인 퍼블리싱 학습방법, 좋은 퍼블리싱 강의 잘 가르치는 퍼블리싱 강사 고르는 안목, 신입이지만 경력자처럼 퍼블리싱하는 요령, 바람직한 코딩 습관과 원칙, 개인 포트폴리오 홈페이지 제작 방법, 디자이너 개발자와의 협업 요령, 퍼블리셔로 알아야 할 필수 사이트, 포토샵 UI 디자인 실력키우기 등 퍼블리셔 취업을 위해 반드시 알아야 하는 HTML+CSS+JQUERY 퍼블리싱 기본기를 상세하게 알려드립니다. 또한, 국비지원 퍼블리셔 과정에 대해 상세히 설명합니다.

입문

HTML/CSS

웹디자인개발기능사 [2025년] 실기전체 A - F (카톡질문가능)

두노피

전국 합격률 60%중에 우리반 합격률은 90%! 시험요구사항을 파악하면 가능합니다. 실기 책 사지마요 어려워요

초급

HTML/CSS, jQuery

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

초급

HTML/CSS, jQuery, JavaScript

이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹개발

그린코딩

그냥 들어보세요. 강의력과 흡입력 그리고 강의의 질이 다릅니다.

입문

HTML/CSS, JavaScript, Spring Boot

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

코딩웍스(Coding Works)

취업을 위해 면접을 자주 봐야 합니다. 면접을 자주 보기 위해서는 괜찮은 퍼블리셔 개인 포트폴리오 홈페이지가 반드시 있어야 합니다. 코딩웍스가 심혈을 기울여 만든 괜찮은 개인 포트폴리오 홈페이지 제작 가이드 교재(PDF)입니다. 해당 교재는 인터넷에서 구글링 해서 구할 수 있는 내용이 아닙니다. 코딩웍스가 수년간 현장에서 300여 명의 학생에게 퍼블리싱 이론, 실전, 개인 포트폴리오 홈페이지 제작 강의하고 학생들이 빨리 원하는 회사에 취업할 수 있도록 개인 포트폴리오 홈페이지 제작 방법을 상세하게 담은 세상에 하나뿐인 퍼블리셔 취업 개인 포트폴리오 홈페이지 제작 가이드(PDF) 입니다.

초급

포트폴리오, 웹 디자인, HTML/CSS

이거 하나로 종결-스프링 기반 풀스택 웹개발 무료강의

그린코딩

꽉찬 40시간 스프링기반풀스택개발전면무료강의

입문

HTML/CSS, Spring Boot, Spring Security

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

코딩웍스(Coding Works)

지금까지 200여명의 오프라인 학원 학생들 신입 퍼블리셔 취업 포트폴리오 지도한 경험을 통해 코딩웍스가 심혈을 기울여 만들었습니다. 면접과 취업을 부르는 퍼블리셔 '개인 포트폴리오 홈페이지' 제작 강의는 퍼블리셔 취업을 위해 필수로 준비해야 하는 개인 포트폴리오 홈페이지를 어떻게 어디서부터 준비하는지 알려드리는 충실한 가이드입니다. 강의는 총 19시간 이상의 강의 내용이 담겨 있습니다. 개인 포트폴리오 홈페이지 제작 전 퍼블리싱 관련 필수사항, 취업과 실무에서 최고로 중요한 퍼블리싱 기본기, 취업을 위한 제이쿼리와 자바스크립트 & 코딩 미션, 개인 포트폴리오 홈페이지에 넣을 포트폴리오 결과물 제작 방법, 개인 포트폴리오 홈페이지 섹션 별 콘텐츠 레이아웃 및 상세내용, 지원할 기업 구분하기 & 퍼블리셔 실전 면접 요령 등 신입 퍼블리셔로서 알아야 할 모든 내용을 담고 있습니다.

초급

포트폴리오, HTML/CSS, jQuery

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

인터랙티브 웹, JavaScript, HTML/CSS

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

Photoshop과 Adobe XD 프로그램을 활용해 다양한 디바이스의 웹, 앱 레이아웃을 디자인해 본 뒤 간단한 코딩 기술을 학습해 직접 구현해볼 수 있게 됩니다.

초급

HTML/CSS, jQuery, XD

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

데이터를 가공하여 표의 형태로 표현할 수도 있지만 가장 중요한 것은 데이터를 인간이 한 눈에 알아 볼 수 있게 표현하는 것입니다.

초급

HTML/CSS

Figma 디자인부터 퍼블리싱까지

Michael Kwon

디자이너와 개발자를 위한 올인원 강좌! 새로운 UI3 반영

초급

Figma, HTML/CSS

₩27,500

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

입문자를 위해 준비한 [웹 개발, 웹 퍼블리싱] 강의입니다.

이런 걸 배울 수 있어요

강의 주제 📖

HTML과 CSS 잘 활용하기 3 Step 📌

이런 분들께 추천해요 🙋

강의 특징 ✨

#1.핵심 기초를탄탄히

#2.모든 과정을눈으로 확인

#3.실전 연습으로마무리

학습 내용 📚

예상 질문 Q&A 💬

지식공유자 소개 ✒️

이력 사항

수강 전 참고 사항 📢

실습 환경

이런 분들께 추천드려요!

안녕하세요 MJ코딩입니다.

커리큘럼

수강평

MJ코딩님의 다른 강의

비슷한 강의

입문자를 위해 준비한
[웹 개발, 웹 퍼블리싱] 강의입니다.

#1.
핵심 기초를
탄탄히

#2.
모든 과정을
눈으로 확인

#3.
실전 연습으로
마무리

이런 분들께
추천드려요!

안녕하세요
MJ코딩입니다.