HTML/CSS 하루 만에 끝내기 (비전공자 웹 개발 입문)

Name: HTML/CSS 하루 만에 끝내기 (비전공자 웹 개발 입문)
Price: 8800 KRW

코드 한 줄 몰라도 괜찮습니다. 단 60분이면, 직접 웹페이지를 만들 수 있습니다. 이 강의는 비전공자를 위해 설계된 초단기 HTML/CSS 입문 강의로, 복잡한 이론 대신 실습 중심으로 진행됩니다. ✔ HTML로 웹페이지 구조 만들기 ✔ CSS로 디자인과 레이아웃 적용하기 ✔ 박스 모델과 Flexbox로 요소 배치하기 ✔ 나만의 자기소개 랜딩 페이지 완성 단순히 문법을 배우는 것이 아니라, “직접 만들어보는 경험”을 통해 웹의 구조를 이해하는 것에 집중합니다. 짧지만 강력한 8차시 구성으로 👉 처음 배우는 사람도 끝까지 완강하고 👉 결과물을 만들어낼 수 있도록 설계되었습니다.

11명 이 수강하고 있어요.

난이도 입문

수강기한 무제한

Sunny - 자동화&실전 IT!

웹개발

html

웹개발

html

네오플

에 관심있는 사람들도 듣는 중!

네오플

에 관심있는 사람들도 듣는 중!

수강 후 이런걸 얻을 수 있어요

HTML과 CSS의 기본 구조를 이해하고 직접 사용할 수 있습니다
텍스트, 이미지, 링크 등 웹의 기본 요소를 자유롭게 구성할 수 있습니다
박스 모델과 Flexbox를 활용해 기본적인 레이아웃을 만들 수 있습니다
CSS를 활용해 색상, 폰트, 정렬 등 디자인을 적용할 수 있습니다
나만의 자기소개 랜딩 페이지를 직접 완성할 수 있습니다
웹페이지가 어떻게 동작하는지 흐름을 이해하고 다음 단계 학습 기반을 만들 수 있습니다

💻 코딩 처음이라면, 이 강의 하나로 충분합니다

HTML, CSS…
들어는 봤지만 어디서부터 시작해야 할지 막막하셨나요?

이 강의는 비전공자를 위해 설계된
초단기 웹 개발 입문 강의입니다.

코드 한 줄 몰라도 괜찮습니다.
👉 단 60분이면, 직접 웹페이지를 만들 수 있습니다.

🚀 “설명”이 아니라 “완성”까지 갑니다

많은 입문 강의는 이론만 배우고 끝납니다.
하지만 이 강의는 다릅니다.

👉 배우고 끝나는 것이 아니라
👉 직접 만들어보는 것까지 경험합니다

HTML로 구조 만들고
CSS로 디자인 입히고
하나의 웹페이지를 완성합니다

👉 짧지만 확실하게 “만들 수 있는 상태”까지 갑니다.

🧠 이 강의에서 배우는 핵심

✔ HTML과 CSS의 역할과 구조 이해
✔ 텍스트, 이미지, 링크 구성 방법
✔ CSS 선택자와 스타일 적용
✔ 박스 모델을 통한 공간 설계
✔ Flexbox를 활용한 레이아웃 배치

👉 웹 개발의 “뼈대”를 빠르게 잡습니다.

🛠 8차시로 끝내는 실전 커리큘럼

이 강의는 총 8차시, 약 60분으로 구성되어 있습니다.

웹의 구조 이해 + 개발 환경 세팅
HTML 기본 구조 만들기
이미지/링크/버튼 구성
CSS 스타일 적용
박스 모델 이해
Flexbox 레이아웃
실전 페이지 제작
최종 완성 및 검수

👉 짧지만 가장 중요한 것만 압축했습니다.

🎯 결과물: 나만의 웹페이지 완성

이 강의를 끝내면
👉 자기소개 랜딩 페이지 1개를 직접 완성하게 됩니다.

헤더 / 메인 / 콘텐츠 / 푸터 구성
카드형 레이아웃
버튼 및 링크 연결
간단한 인터랙션

👉 단순 실습이 아니라
👉 실제로 사용할 수 있는 결과물입니다.

💡 왜 이 강의가 중요한가요?

코딩 입문에서 가장 중요한 건
👉 “완벽한 이해”가 아니라
👉 “성공 경험”입니다

이 강의는
복잡한 이론을 줄이고
👉 빠르게 결과물을 만들어보게 함으로써

👉 “나도 할 수 있다”는 감각을 만들어줍니다.

🔥 이 강의의 차별점

60분 초단기 완성 구조
비전공자 기준 설명
실습 중심 (이론 최소화)
결과물이 남는 강의
다음 단계 학습까지 이어지는 기초 설계

🎯 강의 목표

이 강의의 목표는 단 하나입니다.

👉 HTML/CSS를 “배운다”가 아니라
👉 “직접 만들 수 있게 만드는 것”

이런 분들께
추천드려요

학습 대상은
누구일까요?

코딩을 처음 시작하는 비전공자
HTML과 CSS를 빠르게 이해하고 싶은 입문자
웹페이지를 직접 만들어보고 싶은 분
긴 강의보다 짧고 핵심만 배우고 싶은 분
개발을 시작하기 전에 전체 흐름을 먼저 경험해보고 싶은 분

선수 지식,
필요할까요?

별도의 프로그래밍 지식은 필요하지 않습니다
코딩을 처음 접하는 분도 수강할 수 있습니다
본적인 컴퓨터 사용이 가능하면 충분합니다
완전 초보자 기준으로 쉽게 설명합니다

안녕하세요
Sunny - 자동화&실전 IT!입니다.

커리어인증

실전에서 바로 써먹을 수 있는 IT 자동화와 생산성 시스템을 연구합니다.

복잡한 개념을 쉽게,

바로 실행 가능한 형태로 정리하는 것을 좋아합니다.

✔ 구글폼 & 스프레드시트 자동화

✔ 노코드 생산성 시스템 구축

✔ AI 활용 업무 효율화

✔ 초보자를 위한 IT 실전 가이드

“이론보다 실행”을 지향합니다.

커리큘럼

전체

16개 ∙ (1시간 33분)

섹션 1. 웹의 언어: HTML과 CSS의 정체

2개 ∙ (11분)

섹션 2. HTML 기본: 웹 페이지 뼈대 세우기

2개 ∙ (12분)

3. 제목, 문단, 목록 태그로 문서 구조화
06:08
4. 자기소개 페이지 텍스트 요소 실습
06:39

섹션 3. 멀티미디어와 링크 활용

2개 ∙ (11분)

5. 이미지, 하이퍼링크, 버튼 태그 학습
05:43
6. 프로필 이미지 및 SNS 링크 버튼 구현 실습
05:20

섹션 4. CSS 기초: 스타일의 마법

2개 ∙ (12분)

섹션 5. 박스 모델: 모든 것은 상자다

2개 ∙ (11분)

섹션 6. 레이아웃 정석: Flexbox 입문

2개 ∙ (11분)

섹션 7. 실전 프로젝트: 상단 헤더 및 히어로 섹션 구축

2개 ∙ (11분)

섹션 8. 실전 프로젝트: 마무리 및 검수

2개 ∙ (11분)

강의 게시일:

마지막 업데이트일:

수강평

아직 충분한 평가를 받지 못한 강의입니다.

모두에게 도움이 되는 수강평의 주인공이 되어주세요!

비슷한 강의

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

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

인프런

처음으로 프로그래밍을 시작하는 분들을 위한 웹 개발 입문 강의입니다. HTML, CSS, Javascript를 배우고 인스타그램 포스팅 카드를 만들어봄으로써 웹페이지 제작에 꼭 필요한 기본적인 내용들을 학습합니다.

입문

HTML/CSS, JavaScript

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

인프런

웹디자인 개발기능사 (디자인+HTML)

두노피

딸깍하면서 배우는 쉽고 재미있는 수업입니다. 포트폴리오의 방향성을 참고하실 수 있습니다.

입문

HTML/CSS, JavaScript, 웹 디자인

웹디자인 개발기능사 (디자인+HTML)

두노피

제대로 파는 HTML CSS - by 얄코

얄팍한 코딩사전

코알못도 따라올 수 있는 친절하고 쉬운 강좌! 현업 개발자는 HTML & CSS 박사로 들어주는 끝판왕 강좌!

입문

HTML/CSS

제대로 파는 HTML CSS - by 얄코

얄팍한 코딩사전

생성형 AI로 웹 사이트 제작부터 배포(w. Chat GPT, Cursor AI, Database)

JEngineer

생성형 AI(Chat GPT, Cursor AI)를 통해서 웹 사이트 개발과 배포하는 과정을 전반적으로 학습합니다.

초급

HTML/CSS, JavaScript, 웹앱

생성형 AI로 웹 사이트 제작부터 배포(w. Chat GPT, Cursor AI, Database)

JEngineer

가장 쉬운 리액트(React) - by 얄코

얄팍한 코딩사전

설명대장 얄코의 녹진하고 꾸덕한 강좌로 가장 쉽게, 가장 빠르게 리액트를 배우세요!

초급

JavaScript, React, Node.js

가장 쉬운 리액트(React) - by 얄코

얄팍한 코딩사전

코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)

제주코딩베이스캠프

제주에서 진행하는 부트캠프를 온라인으로! 빠르게 자신만의 서비스를 만들어보세요! :)

입문

jQuery, JavaScript, Python

코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)

제주코딩베이스캠프

모바일 웹 퍼블리싱 포트폴리오 with CSS Nesting

코딩웍스(Coding Works)

19페이지, 총 22가지 다양한 모바일 레이아웃 제작하면서 퍼블리셔 취업과 퍼블리셔 실무에서 가장 경쟁력이 있는 모바일 웹 제작 능력을 향상할 수 있습니다. 퍼블리셔로서 모바일 웹을 제작하기 위한 거의 모든 제작 방법과 노하우를 다질 수 있습니다. 모바일 웹 퍼블리싱 수업에서 가장 강점인 부분인 HTML 와이어프레임 상세한 작성법을 모든 페이지 하나하나 상세하게 설명합니다. 강의를 통해 HTML 와이어프레임 제작 능력이 크게 향상될 것입니다. 특히 CSS 중첩(Nesting) 방식을 충분히 학습할 수 있습니다. Flex 레이아웃을 중심으로 중상급 CSS 실전 능력을 충분히 갖추시게 됩니다.

초급

모바일 디자인, HTML/CSS, wireframe

모바일 웹 퍼블리싱 포트폴리오 with CSS Nesting

코딩웍스(Coding Works)

[2024]리베하얀의 HTML 기초 실무

리베하얀

HTML 기초문법을 다루는 강의입니다. 다양한 사례의 미션이 존재하며, 실무에서 사용가능한 최신문법까지 알려드립니다.

입문

HTML/CSS, nvda

[2024]리베하얀의 HTML 기초 실무

리베하얀

비전공자를 위한 웹사이트 개발 첫걸음 #HTML, #CSS

banana-coder

웹사이트를 만드는 개발자가 되기 위해선 배워야 할 기술들이 많습니다. 그 많은 기술들 중 가장 먼저 배워야 할, 웹사이트의 제작의 기본인 HTML, CSS에 대해 설명합니다. HTML, CSS를 작성하는 방법을 배우고, 마지막엔 아마존이라는 실제 웹사이트를 비슷하게 만드는 프로젝트를 합니다. 그리고 만든 프로젝트를 url로 만들어 배포할 수 있도록 합니다.

입문

HTML/CSS, github-desktop

비전공자를 위한 웹사이트 개발 첫걸음 #HTML, #CSS

banana-coder

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jay

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

초급

HTML/CSS, JavaScript, REST API

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jay

파이썬 웹서비스API 실전 프로젝트 - 돈 버는 디지털마케팅

노마드크리에이터

네이버쇼핑, 쿠팡파트너스 등 돈 버는 디지털마케팅은 꾸준함도 필요하지만, 과학적인 분석과 자동화로 쉽고 효과적으로 접근하세요. 인기상품, 키워드, 블로그, 쇼핑 정보를 수집하고 분석하는 프로그램을 만드는 핵심 비법을 알려드립니다.

초급

디지털 마케팅, Python, 웹앱

파이썬 웹서비스API 실전 프로젝트 - 돈 버는 디지털마케팅

노마드크리에이터

[웹 개발 풀스택 코스] HTML&CSS 기초

개발자의 품격

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 HTML&CSS에 대한 강의입니다. 이 강의를 통해 웹 개발의 뼈대인 HTML과 웹을 아름답게 만드는 CSS에 대해서 이해하게 됩니다.

입문

HTML/CSS

[웹 개발 풀스택 코스] HTML&CSS 기초

개발자의 품격

자바스크립트 제대로 배워볼래?

개발자의 품격

자바스크립트를 제대로 배우길 원하는 초급자를 위한 가장 탄탄한 기초 강의입니다. 여러분은 이 강의를 통해 자바스크립트라는 언어를 이해하는 시작점이 될 것이고, 프론트엔드(Vue, React, Angular) 개발자, 서버(Node.js) 개발자가 되기 위한 기초를 완벽하게 준비할 수 있습니다.

초급

JavaScript, ES6, HTML/CSS

자바스크립트 제대로 배워볼래?

개발자의 품격

ChatGPT API 입문 강의 - 30분 만에 다국어 번역기 웹 풀스택 개발하기

까룬

ChatGPT API로 30분 만에 다국어 번역기 웹 풀스택 개발하고, 인공지능을 전혀 모르더라도 프로덕트에 최신 인공지능(ChatGPT API)을 도입해봐요!

입문

ChatGPT, Python, HTML/CSS

ChatGPT API 입문 강의 - 30분 만에 다국어 번역기 웹 풀스택 개발하기

까룬

Node.js에 TypeScript 적용하기(feat. NodeBird)

제로초(조현영)

Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

중급이상

Node.js, 웹앱, TypeScript

Node.js에 TypeScript 적용하기(feat. NodeBird)

제로초(조현영)

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

코딩웍스(Coding Works)

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

입문

HTML/CSS, jQuery, 웹 디자인

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

코딩웍스(Coding Works)