HTML,CSS 개발을 위한 핵심 가이드

Name: HTML,CSS 개발을 위한 핵심 가이드
Rating: 4.8 (134 reviews)

입문자와 웹개발자들에게 HTML,CSS는 낯설고 방대하게 느껴집니다. 특히나 CSS는 개발자들에게 두려움(?)의 대상이기도 합니다. 하지만 HTML, CSS의 원리와 핵심내용만 잘 알고 있다면, 그런 걱정에서 조금 벗어날 수 있습니다. 본강의에서는 HTML,CSS의 중요 개념을 소스코드를 통해 배울 수 있습니다.

(4.8) 수강평 134개

수강생 6,040명

난이도 초급

수강기한 무제한

윤지수

HTML/CSS

POSCO

임직원들도 이 강의를 듣고 있어요!

POSCO

임직원들도 이 강의를 듣고 있어요!

먼저 경험한 수강생들의 후기

4.8

5.0

윤보라

91% 수강 후 작성

기본을 정말 빠르게 잘 정리했습니다. ㅠㅠ 의문점 정리도 확실히 됬네요 감사합니다~~~

5.0

최은아

91% 수강 후 작성

css, html, js 에 대한 전반적인 이해와 활용에 대한 설명이 좋았습니다. 감사합니다.

5.0

한가람

100% 수강 후 작성

감사합니다. 디자이너이구요. 개발 기본 공부하려고 들어왔어요. 이해잘가는 설명! 감사합니다

1. 강좌 소개

입문자와 웹개발자들에게 HTML,CSS는 낯설고 방대하게 느껴집니다. 특히나 CSS는 개발자들에게 두려움(?)의 대상이기도 합니다. 하지만 HTML, CSS의 원리와 핵심내용만 잘 알고 있다면, 그런 걱정에서 조금 벗어날 수 있습니다.

본강의에서는 HTML,CSS의 중요 개념을 소스코드를 통해 배울 수 있습니다.

배우는 것들
HTML을 통한 웹사이트 구조 설계 CSS 기본개념과 렌더링원리 CSS 기본스타일 적용방법 Layout 설정 LESS로 CSS 프로그래밍하기 필수 CSS3 속성으로 애니메이션 구현

2. 도움되는 분들

bootstrap에만 의존하는 웹개발자
웹프론트엔드 개발자로 입문하고 싶은 분들
자신의 디자인을 웹 화면으로 보여주고 싶은 웹디자이너
핵심 개념을 제대로 익히고 싶은 웹퍼블리셔

3. 강좌 특징

입문~초급 난이도
핵심 개념에 집중하고 활용할 수 있는 간결한 강좌

4. 강사소개

윤지수
- 현재 코드스쿼드 웹프론트엔드 마스터.
- SK플래닛 웹UI 마스터.
- NHN NEXT 웹UI 전임교수.
- 네이버 웹UI 개발팀장.

- <개인 유튜브 채널 링크>

코드스쿼드 개발자 출신의 교육 전문가들이 만든 최고품질의 소프트웨어 교육기관 http://codesquad.kr

안녕하세요
입니다.

커리큘럼

전체

22개 ∙ (2시간 27분)

섹션 1. HTML을 통한 웹사이트 구조 설계

6개 ∙ (37분)

섹션 2. CSS 기본개념과 렌더링원리

4개 ∙ (20분)

7. CSS를 HTML에서 사용하는 방법
06:00
8. CSS에서의 상속 개념
05:00
9. 캐스캐이딩 - computedstyle이 결정되는 방식
04:00
10. Selector를 활용한 DOM 탐색
05:00

섹션 3. CSS 기본스타일 적용방법

2개 ∙ (14분)

섹션 4. Layout 설정

5개 ∙ (34분)

섹션 5. LESS로 CSS 프로그래밍하기

3개 ∙ (25분)

섹션 6. 필수 CSS3 속성으로 애니메이션 구현

2개 ∙ (17분)

강의 게시일:

마지막 업데이트일:

수강평

전체

134개

4.8

134개의 수강평

윤보라
수강평 1
∙
평균 평점 5.0
5
91% 수강 후 작성
기본을 정말 빠르게 잘 정리했습니다. ㅠㅠ 의문점 정리도 확실히 됬네요 감사합니다~~~
lukas Ahn
수강평 2
∙
평균 평점 5.0
5
100% 수강 후 작성
잘 보았습니다. 핵심 위주의 강의로 많은 도움이 되었습니다. 감사합니다^^
한가람
수강평 1
∙
평균 평점 5.0
5
100% 수강 후 작성
감사합니다. 디자이너이구요. 개발 기본 공부하려고 들어왔어요. 이해잘가는 설명! 감사합니다
최은아
수강평 1
∙
평균 평점 5.0
5
91% 수강 후 작성
css, html, js 에 대한 전반적인 이해와 활용에 대한 설명이 좋았습니다. 감사합니다.
- 윤지수
  지식공유자
  감사합니다 ^^ javascript도 공부해보세요!
yesman
수강평 1
∙
평균 평점 1.0
1
32% 수강 후 작성
강의를 잘 만드신 것 같은데..외국인들이 있는 곳에선 동영상을 보면서 공부를 절대 못할 것 같네요.. 의도치 않을 것일 수도 있는데..네이버, 구글 아이디가 상당히 부적절해보여서요. 'niganiga', 'nigayo' .. 아이디 네임을 바꾸는 것을 고려 해보시는 것도 나쁘지 않을 것다는 생각이 드네요... 네이버 아이디 보고 설마 했는데 구글 아이디보고 깜짝 놀라 당황했습니다.
- 윤지수
  지식공유자
  먼저 강의를 보시면서 상당히 불편하셨을 것 같은데 사과드립니다. 당연히 의도하진 않았지만..(niga라는 건 그저 you are.. 라는 의도였네요) 충분히 오해할 수 있는 단어라고 생각합니다. 덕분에 심각하게 느끼고 있고요. 당장 아이디를 바꿔야겠네요. 진심을 담아주신 충고 감사드립니다.

비슷한 강의

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

입문자를 위한, HTML&CSS 웹 개발 입문

짐코딩

HTML과 CSS를 배워서 웹사이트 제작에 필요한 기본 지식을 배울 수 있습니다. 코딩을 처음 접할 때 두려움이 없도록 정말 알기 쉽게 설명한 강의입니다.

입문

HTML/CSS

입문자를 위한, HTML&CSS 웹 개발 입문

짐코딩

실전 HTML & CSS 강좌

Seoul Wiz

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

입문

HTML/CSS

실전 HTML & CSS 강좌

Seoul Wiz

CSS 레이아웃 - flex & grid

유노코딩

CSS 레이아웃 기술의 대표 주자 flex와 grid의 개념 및 사용법을 공부할 수 있는 강의입니다.

초급

HTML/CSS, Flex

CSS 레이아웃 - flex & grid

유노코딩

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

코딩웍스(Coding Works)

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

초급

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

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

코딩웍스(Coding Works)

웹디자인기능사 실기 문제풀이 A-1

Dongho Lee

웹 디자인 기능사 실기시험을 충실하게 준비합니다. 다양한 방법으로 문제를 해결합니다.

초급

HTML/CSS, 웹 디자인

웹디자인기능사 실기 문제풀이 A-1

Dongho Lee

프론트엔드 입문: HTML, CSS 가장 쉽게 이해하기

3년차 프론트엔드 개발자가 가장 쉽게 알려주는 HTML, CSS 기초 강의입니다.

입문

HTML/CSS, html5, css

프론트엔드 입문: HTML, CSS 가장 쉽게 이해하기

[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)

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

코딩웍스(Coding Works)

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

초급

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

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

코딩웍스(Coding Works)

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

트레이딩온

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

초급

HTML/CSS

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

트레이딩온

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

두노피

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

초급

HTML/CSS, jQuery

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

두노피

웹 애니메이션을 위한 GSAP 가이드 Part.02

범쌤

“GSAP 이런 것까지 가능했어?” 애니메이션이 복잡하고 어렵다는 기존의 고정관념을 깨드립니다.

초급

gsap, 인터랙티브 웹, JavaScript

웹 애니메이션을 위한 GSAP 가이드 Part.02

범쌤

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

라이브러리는 선택이지만, 웹 표준 기술은 필수입니다. 웹 애니메이션의 새로운 표준인 Web Animation API에 남들보다 빠르게 적응하고, 실무에도 바로 활용해보세요!

초급

Web Animations API, JavaScript, HTML/CSS

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

바~로 실습! 개념몰라도 됨, HTML 시작

두노피

개념을 외우는게 아니라 실습을 통해 개념도 배우는 수업입니다. 다른곳에서 코드를 보면 울렁거리거나 토할것같은 분들도 오세요. 누구나 할 수 있습니다.

입문

HTML/CSS, 웹 디자인

바~로 실습! 개념몰라도 됨, HTML 시작

두노피

웹디자인기능사 실기 B-3 유형 html+css

두노피

자격증 시험이 아니더라도 연습하기 좋은 예제입니다. 웹디자인 기능사 실기 B-3 유형을 천천~~히 따라해보아요

초급

HTML/CSS

웹디자인기능사 실기 B-3 유형 html+css

두노피

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

webstoryboy

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

초급

HTML/CSS, jQuery, JavaScript

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

webstoryboy

비전공자도 가능한 AI 바이브코딩 입문 코스

아이티커넥트

💡 비개발자도 AI와 함께 단 10시간 창업 MVP부터 수익화 서비스까지! 💰 외주비 수천만원이 필요했던 개발 이제 12만원으로 완전 해결 🎯 명함인식, 감정분석, 입지분석까지 실전 비즈니스 프로젝트 5개 완주 🔥 기획자, 마케터, 예비창업자라면 개발자 없이도 아이디어 구현 ⚡ 지금 시작하면 평생 써먹을 개발 자립 능력을 획득하세요!

입문

HTML/CSS, Java, 웹앱

비전공자도 가능한 AI 바이브코딩 입문 코스

아이티커넥트