성장의 법칙, 메가스터디아카데미

입문
초급
중급
고급

강좌 미리보기

IT·프로그래밍 ㅣ xido

웹 퍼블리싱 5주 완성 Part1. HTML/CSS

총 50개의 강의 (54시간37분)

수강기간 150일

최고 평점

★ ★ ★ ★ ★

(5)

총 8개의 수강후기

IT·프로그래밍 ㅣ xido

웹 퍼블리싱 5주 완성 Part1. HTML/CSS

총 50개의 강의 (54시간37분)

수강기간 150일

최고 평점

★ ★ ★ ★ ★

(5)

총 8개의 수강후기

정가

350,000원

강좌소개

우리가 배울 내용이에요!

“ 웹 퍼블리싱을 위한 기초 과정! ”
HTML/CSS를 활용해서 웹페이지의 구조를 만들고, 스타일을 입히는 법을 배워봅니다.

HTML과 CSS의 기초부터 고급까지
Figma를 이용해 웹페이지 구성하기
재미있게 코드를 활용하는 방법

Part2 바로가기 >

이런 분들께 추천드려요!

퍼블리셔가 되고 싶은 초심자
HTML과 CSS를 제대로
배워보고 싶은 분
이쁜 화면을 그대로 웹 화면으로 구현하고 싶은 분
프론트엔드 개발자로
입문하고자 하는 분

학습목표

웹페이지 HTML/CSS를 제작하기 위한 기초개념을 파악하고 이를 사용할 수 있습니다.
만들어진 레이아웃을 반응형으로 재구축하는 방법에 대해 알 수 있습니다.
HTML/CSS를 깊이 있게 공부하여 '제대로' 활용할 수 있습니다.

강좌특징

HTML, CSS를 파악하기 전 사전에 알아야 하는 다양한 기초 지식에 대해 알아보고, 웹 학습을 통해
이를 사용하는 의미와 중요성에 대해 알아봅니다.
의미 없는 코드와 정리되지 않은 코드를 사용하는 것이 아닌 더욱 의미있는 개념을 사용할 수 있도록 합니다.
Figma를 이용하여 웹페이지를 구성하는 내용물의 구성 형태를 파악하고, 이를 이용하여 웹페이지의
실제 구성 내용을 제작합니다.
웹 사이트를 만들 때 필수적으로 들어가는 요소인 회원가입 페이지를 제작하는데 필요한 form 태그에 대해서 이해하고,
반응형 웹이 무엇인지 왜 사용해야 하는지를 알고 페이지를 재구축 할 수 있습니다.

이 강좌에서는
이런걸 배워요.

프로그래밍 입문
HTML(문서구조)
CSS(시각표현)
실무에서 바로 써먹을 수 있는 예제

이 강의에서는 무엇을 배울 수 있나요?

HTML, CSS 요소들의 개념과 문법
실무 예제 : 반응형 웹 구현, list 구현, 웹사이트 만들기 등

이런 분들께 추천해요!

퍼블리싱 초급자
HTML과 CSS 심화학습
프론트엔드 개발 취준생

커리큘럼 총 50강

Chapter1. 웹기초

5강

03:00:42

1. 웹의 역사, HTTP프로토콜의 이해

05:53

2. 각 브라우저, 에디터 설치

28:08

3. 웹문서 마크다운이해 및 기본경로 파악

01:04:41

4. Git개념 정리 및 desktop github사용법

45:31

5. HTML, CSS 기본 코드 파악 및 세팅, 페이지 실행

FREE

36:29

Chapter2. HTML/CSS 기초 개념 정리

10강

12:43:40

6. 제목, 내용, 리스트, 이미지, 링크, 영역 및 요소/속성의 구분, entity code

02:29:31

7. table 구조 및 CSS 이용 간단한 형태 제작

01:21:46

8. class, id 기초 개념 파악 및 css 선택자, 색상 및 기본 내용 파악

01:09:12

9. 의사전달코드 이해 ( hover, active, focus, visited, before, after )

37:34

10. inline요소와 block요소 구분 및 페이지 링크 및 CSS 파일분리

32:18

11. margin, padding, border, outline

01:46:12

12. float, clear 개념 파악

01:00:20

13. display, visibility, opacity

54:11

14. layout 기본개념이해

54:36

15. 실무예제 1: 기초웹페이지 레이아웃 구축

01:58:00

Chapter3. 기본 레이아웃 및 추가 기능

15강

20:02:16

16. reset.css 설정

59:46

17. nth 선택자 이해

01:03:35

18. 시멘틱 구조

37:20

19. position, z-index

01:02:07

20. 실무예제 2: 기초웹페이지 레이아웃 내용 변경

01:42:14

21. 웹프로토타입툴 - figma 기초사용법

01:52:47

22. 웹 프로토타입툴 - figma이용하여 프로토타입제작

02:41:04

23. 웹 프로토타입툴 - figma 크기변환시체크 및 가이드제작

53:45

24. image, background 구분

01:47:56

25. ir기법, is기법

01:17:32

26. gradient 기법정리

40:31

27. font

01:15:18

28. 단위 설정

01:15:38

29. font icon 개념 파악 및 내용 적용

37:29

30. 실무예제 3: 이미지삽입 및 font적용

02:15:14

Chapter4. 멀티미디어기능 및 반응형웹

20강

18:50:34

31. 에디터 사용을 용이하게 세팅하기

34:08

32. video, audio

52:19

33. form 기본내용 이해

41:05

34. form type 구성내용

01:59:46

35. 속성선택자, 형제 선택자

40:27

36. 실무예제 5 : 로그인페이지

02:06:01

37. shadow

42:28

38. border-radius

FREE

22:12

39. transform

42:09

40. 실무예제 6 : footBox 영역 및 카드 리스트 세팅

01:24:19

41. transition, animation

52:21

42. css 변수설정

27:00

43. vw, vh단위

30:52

44. 각 디바이스 구성의 이해 및 media query

41:36

45. 각 구성에따른 레이아웃 변화 이해

37:17

46. 실무예제 7 : 반응형웹 제작 - 반응형제작을 위한 기초세팅

50:55

47. 실무예제 8 : 반응형웹 제작 - 틀 구조세팅

56:21

48. 실무예제 9 : 반응형웹 제작 - 각 영역별 자연스러운 구성 처리 1

01:43:28

49. 실무예제 10 : 반응형웹 제작 - 각 영역별 자연스러운 구성 처리 2

01:53:04

50. 웹페이지 배포

12:46

커리큘럼 전체보기

수강후기

수강생 총 평점

5
MEGA가 추천하는 이유

“ 퍼블을 재미있게 학습하기 ”

피그마를 활용해 실제 웹페이지를 구현해 볼 수 있어요!

후기 총 8개

방문자 님이런 강좌는 어때요?

정가

350,000원

수강신청

카테고리

자격증

메타버스

IT·프로그래밍

디자인·영상

업무스킬

무료강좌

국비지원과정

제페토 3D 아이템 모델링

3D 아이템 제작 가이드

학원

강남 IT전문관

강남 ART 전문관

강남 국비전문관

종로

신촌

구로

인천

부산

취업코스

취업 관리 솔루션

채용 공고

커뮤니티

이벤트

메카뎀매거진

메카뎀잡서치

메카뎀 소식

메가레터

메카뎀블로그

인스타그램

페이스북

유튜브

브랜드 소개

교육에 진심인 사람들

올해의 우수 브랜드

오프라인 학원소개

알림창

알림을 전체 삭제하시겠습니까?

읽지 않은 항목만 표시

웹 퍼블리싱 5주 완성 Part1. HTML/CSS

웹 퍼블리싱 5주 완성 Part1. HTML/CSS

350,000원

강좌소개

우리가 배울 내용이에요!

이런 분들께 추천드려요!

학습목표

강좌특징

이 강좌에서는 이런걸 배워요.

이 강의에서는 무엇을 배울 수 있나요?

이런 분들께 추천해요!

퍼블리싱 초급자

HTML과 CSS 심화학습

프론트엔드 개발 취준생

커리큘럼 총 50강

Chapter1. 웹기초

5강

03:00:42

1. 웹의 역사, HTTP프로토콜의 이해

05:53

2. 각 브라우저, 에디터 설치

28:08

3. 웹문서 마크다운이해 및 기본경로 파악

01:04:41

4. Git개념 정리 및 desktop github사용법

45:31

5. HTML, CSS 기본 코드 파악 및 세팅, 페이지 실행

36:29

Chapter2. HTML/CSS 기초 개념 정리

10강

12:43:40

6. 제목, 내용, 리스트, 이미지, 링크, 영역 및 요소/속성의 구분, entity code

02:29:31

7. table 구조 및 CSS 이용 간단한 형태 제작

01:21:46

8. class, id 기초 개념 파악 및 css 선택자, 색상 및 기본 내용 파악

01:09:12

9. 의사전달코드 이해 ( hover, active, focus, visited, before, after )

37:34

10. inline요소와 block요소 구분 및 페이지 링크 및 CSS 파일분리

32:18

이 강좌에서는
이런걸 배워요.