인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

웹 개발

빠르게 훑는 HTML + CSS 기초

다양한 응용 예제로 HTML과 CSS의 기초 지식을 익힐 수 있는 강의입니다. 이 강의를 수강한 후 HTML과 CSS에 자신감을 가져보세요!

(4.7) 수강평 11개

수강생 96명

HTML/CSS

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

이런 걸 배울 수 있어요

  • HTML, CSS 기초

  • HTML, CSS 응용법

웹 퍼블리셔가 많이 사용하는
HTML, CSS의 핵심기술을 배워보세요!

웹 퍼블리셔가
되고 싶으신가요?

HTML과 CSS에 대해 공부하고 싶으신가요? 그런 분들께 저의 지식을 공유해드리고 함께 나아가기 위해 강의를 제작했습니다. 웹 퍼블리셔가 되기 위해 알고 있어야 하는 HTML과 CSS의 기초를 다지는 이 강의를 듣고 스스로의 능력을 향상시켜 보세요! 

이런 분들께 추천드려요.

✅ HTML과 CSS의 기초를 다지고 싶으신 분
✅ 웹 퍼블리셔로 취업하고 싶으신 분
✅ 다양한 예제로 배운 내용을 응용해보고 싶으신 분
✅ 수동적인 강의가 아닌 능동적인 강의를 듣고 싶으신 분

이론은 이제 그만!

커리큘럼마다 속해있는 다양한 예제를 만들어보며 HTML 태그와 CSS 스타일링을 더 재밌게 공부할 수 있습니다. 어렵지 않습니다! 초급자의 눈높이에 맞춰 제작된 강의로 어렵지 않게 학습할 수 있습니다. 강의를 들은 후 여러 디자인을 코딩할 수 있는 능력을 길러보세요!

학습 내용 📚

  • div 태그 개념 설명
  • div 태그로 알아보는 position
  • div 태그로 알아보는 flex box
  • span, p 태그 개념 설명
  • span, p 태그로 알아보는 font style
  • a 태그 개념 설명
  • a 태그로 알아보는 hover 효과
  • ul 태그 개념 설명
  • table 태그 개념 설명
  • input 태그 개념 설명

 

✅ 예제 1 - 영화 리뷰창 만들기
div, span, p 태그를 이용하여 영화 리뷰창을 만들어봅시다.

✅ 예제 2 - 회원가입 폼 만들기
table, input 태그를 이용하여 회원가입 폼을 만들어봅시다.

✅ 예제 3 - 서브 메뉴가 있는 메뉴바 만들기
a, ul 태그 등을 이용하여 메뉴바를 만들어봅시다.

✅ 예제 4 - 로그인 화면 만들기
배운 태그들을 이용하여 실무에서 많이 만드는 로그인 화면을 만들어봅시다.

✅ 예제 5 - 상품리스트 만들기
배운 태그들을 이용하여 상품 리스트를 만들어봅시다.

안녕하세요, 김현진입니다 ✒️

안녕하세요, 웹 퍼블리셔 김현진입니다.
현재 웹 퍼블리셔로 근무하면서 여러 스킬들을 쌓고 있고 4년간 관련 전공 지식을 습득하며 저만의 스타일을 갖춰왔습니다. 또한 지금은 지식공유자로 여러분께 지식을 공유해드리는 일까지 하고 있습니다.

예상 질문 Q&A 💬

Q. 비전공자도 들을 수 있는 강의인가요?

물론입니다. 비전공자도 쉽게 배우실 수 있도록 어렵지 않게 만들었습니다!

Q. 강의를 듣기 전 준비해야 할 것이 있나요?

아무것도 준비하지 않은 상태로 오셔도 상관없습니다! 모든 것을 여러분께 떠먹여드릴 거예요.

Q. 수업 내용을 어느 수준까지 다루나요?

HTML 주요 태그들에 대한 설명과 CSS 선택자, 간단한 스타일링 등을 배우고 응용하는 법까지를 배웁니다!

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 웹 퍼블리셔로 취업하고 싶으신 분

  • HTML, CSS로 뭐든 만들어보고 싶으신 분

선수 지식,
필요할까요?

  • HTML, CSS 기본 개념

안녕하세요
현진타임입니다.

커리큘럼

전체

19개 ∙ (2시간 41분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

11개

4.7

11개의 수강평

  • 비니님의 프로필 이미지
    비니

    수강평 1

    ∙

    평균 평점 3.0

    3

    100% 수강 후 작성

    완전 초보자입니다. 음.. 목차 부분은 알차고 좋아요. 조금 아쉬운 부분이 있다면 이 영상은 html/css를 이미 어느 정도 알고 계시는데 까먹어서 다시 들으시는 분들에게 조금 더 적합한 강의 같아요! 초보자분들이 들으셔도 좋지만 조금 아쉬운 강의였습니다ㅠㅠ

    • 안안재형님의 프로필 이미지
      안안재형

      수강평 1

      ∙

      평균 평점 5.0

      5

      84% 수강 후 작성

      제가 원했던 강의 스타일입니다. 불필요한 내용 하나도 없고 정말 필요한 내용만 있고 실무팁도 포함되고. 간단명료해서 너무 좋습니다. 가격까지 저렴하네요

      • 재롱이님의 프로필 이미지
        재롱이

        수강평 32

        ∙

        평균 평점 5.0

        5

        100% 수강 후 작성

        가끔식 복습하기 정말 좋습니다!

        • mrloveletter님의 프로필 이미지
          mrloveletter

          수강평 6

          ∙

          평균 평점 4.7

          4

          100% 수강 후 작성

          완전 처음 하는 분들 보다는 한 번 배우신 분들이 예제로 따라 만들기 하실 때 많이 도움이 되실 것 같아요. 기본적인 용어 설명 같은 것보다는 이미 안다는 전제 하에 바로 적용하는 방식으로 설명해주십니다. 집중해서 코딩하실 때 말씀이 잠깐 없으신데, 의식적으로 계속 말씀을 해주시면 더 좋을 것 같아요. 강의 따라서 코딩을 하다보니 말씀을 해주시면 바로 입력할 수 있을 것 같은데 꼭 화면을 봐야 하더라구요. 그리고 선생님께서 코딩을 다 마치셨을 때 잠깐 한 1~2초라도 멈췄다가 진행 해주시면 그 화면에서 일시정지 누르고 제 코드랑 비교하기가 수월할 것 같은데 너무 바로 넘어가셔서 코드 완성된 화면을 찾아가서 일시정지를 하면서 하다보니 조금 번거로운 느낌이 있었어요. 꿀팁을 많이 알려주셔서 좋았습니다~ 한 번 배우시고 복습 겸으로 짧은 강의로 훑고 싶으신 분들께 추천드립니다-!

          • seol2ya님의 프로필 이미지
            seol2ya

            수강평 17

            ∙

            평균 평점 5.0

            5

            100% 수강 후 작성

            오래전 배웠던 퍼블의 기억을 살리고자 들었는데 도움이 많이 되었습니다. 감사합니다

            비슷한 강의

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

            실전! 웹사이트제작! Step by Step! (한국소비자원 소비자시대- 레이아웃제작 기초)강의 썸네일

            실전! 웹사이트제작! Step by Step! (한국소비자원 소비자시대- 레이아웃제작 기초)

            J.영

            [웹사이트제작 Step By Step] 초급 강좌로, 한국소비자시대 웹진(현재는 리뉴얼 됨) 메인페이지를 그대로 제작해 보는 과정입니다.

            초급

            초급

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

            WEB2 - CSS강의 썸네일

            WEB2 - CSS

            Egoing Lee

            이 수업은 https://opentutorials.org(생활코딩 사이트)를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다.

            초급

            초급

            HTML/CSS

            시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.1강의 썸네일

            시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.1

            유용한IT학습

            웹디자인기능사 실기를 준비하기 위한 기초 내용을 공개 문제를 통해 학습하는 강의입니다. 실무에서 웹 코딩을 활용하고자 하는 웹디자이너에게도 유익한 강의에요.

            초급

            초급

            HTML/CSS, JavaScript

            만들면서 배우는 HTML/CSS강의 썸네일

            만들면서 배우는 HTML/CSS

            수코딩

            자기 자신을 소개하는 심플한 포트폴리오를 만들어보면서 HTML 태그로 구조를 만드는 방법과 CSS 속성으로 웹 페이지를 꾸미는 방법을 배워봅니다.

            초급

            초급

            HTML/CSS

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

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

            유용한IT학습

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

            초급

            초급

            HTML/CSS, jQuery, XD

            웹디자인기능사 실기 문제풀이 A-1강의 썸네일

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

            Dongho Lee

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

            초급

            초급

            HTML/CSS, 웹 디자인

            시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.2강의 썸네일

            시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.2

            유용한IT학습

            웹디자인기능사 실기를 준비하기 위한 기초 내용을 공개 문제를 통해 학습하는 강의입니다. 실무에서 웹 코딩을 활용하고자 하는 웹디자이너에게도 유익한 강의에요.

            초급

            초급

            HTML/CSS, JavaScript

            실무중심의 HTML5 시각화 프로그래밍강의 썸네일

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

            트레이딩온

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

            초급

            초급

            HTML/CSS

            모던 웹 인터렉티브 CSS3 [PART2/3]강의 썸네일

            모던 웹 인터렉티브 CSS3 [PART2/3]

            영코디 킴쌤

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

            입문

            입문

            HTML/CSS, 웹 디자인, css3

            [환상의족발] 디자인부터 코딩까지강의 썸네일

            [환상의족발] 디자인부터 코딩까지

            두노피

            맛있는 족발이에요~ 요즘 족발 장난 아니던데...꿀꺽

            초급

            초급

            Photoshop, HTML/CSS, 클론코딩

            떠먹는 Three.js강의 썸네일

            떠먹는 Three.js

            제주코딩베이스캠프

            Three.js의 기초적인 개념을 학습하고, 이를 응용하여 '나만의 섬 만들기' 미니 프로젝트를 진행합니다. 프로젝트를 진행하면서 쉽고 가볍게 Three.js를 익힐 수 있습니다.

            초급

            초급

            Three.js, HTML/CSS, JavaScript

            포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편강의 썸네일

            포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편

            짐코딩

            HTML&CSS, 자바스크립트를 배웠다면 이를 활용하여 직접 포트폴리오 사이트를 만들고 배포해 보세요. 실제로 써 보는 것은 우리의 실력을 향상시키는 데 큰 도움이 될 것입니다.

            입문

            입문

            HTML/CSS, JavaScript, github-pages

            퍼블리셔 취업 진짜 실전 가이드(PDF)강의 썸네일

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

            코딩웍스(Coding Works)

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

            입문

            입문

            HTML/CSS

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

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

            두노피

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

            초급

            초급

            HTML/CSS, jQuery

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

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

            코딩웍스(Coding Works)

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

            초급

            초급

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

            Figma 디자인부터 퍼블리싱까지강의 썸네일

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

            Michael Kwon

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

            초급

            초급

            Figma, HTML/CSS

            웹디자인기능사 실기 B-3 유형 html+css강의 썸네일

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

            두노피

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

            초급

            초급

            HTML/CSS

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

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

            webstoryboy

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

            초급

            초급

            HTML/CSS, jQuery, JavaScript

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

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

            코딩웍스(Coding Works)

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

            입문

            입문

            HTML/CSS, jQuery, 웹 디자인

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

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

            제주코딩베이스캠프

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

            입문

            입문

            JavaScript, Python, Django

            공개하지 않는 강의로 수강이 제한됩니다.