패밀리 서비스

전체

루트 공지사항 Q&A

코딩은 처음이라 with 웹 퍼블리싱

HTML, CSS 기초부터 반응형 홈페이지 구현까지 한번에 학습합니다.

클래스 소개

난이도

쉬움

카테고리

웹 프로그래밍 - 프로그래밍

태그

자바스크립트, CSS, HTML

수료증

발급 가능

추천 학습대상

- 모든 웹 어플리케이션 시작은 HTML, CSS! 기초부터 확실하게 공부하고 싶은 입문자.
- 웹퍼블리셔를 준비하는 웹디자이너.
- 프론트영역까지 공략하는 백엔드 개발자.

📔 해당 강좌에서 다루는 내용은 무엇인가요?

"코딩은 처음이라 with 웹퍼블리싱" 도서의 실습 문제들을 풀어볼 수 있는 강좌입니다. 핵심을 간단히, 설명을 따라 차근차근 실행해볼 수 있습니다.

✏️ HTML, CSS, JAVASCRIPT

모든 웹 어플리케이션의 시작은 HTML, CSS, javascript입니다. 이 언어를 기본으로 웹페이지가 구성되며 코딩에 친화적인 웹페이지 디자인을 하고 싶은 웹디자이너, 디자인을 참조하여 웹페이지를 구성하는 순서를 비롯하여 핵심 실무 테크닉을 학습할 수 있습니다.

📺유튜브 강의와 함께 따라해보는 웹 퍼블리싱

한번에 언어를 이해하기란 쉽지 않습니다. 공부를 하다가 어려운 점은 저자 강의를 통해 다시 한번 공부해볼 수 있으며, 그래도 어려운점이 있다면 언제든 질문할 수 있습니다.

📚주요 내용은 다음과 같습니다.

PART 1 HTML 기초 doctype, charset, lang, title 속성 블록요소, 인라인요소, text 관련 태그 div, html5 sectioning 제목, 문단, 구분선, 정형화된 텍스트 리스트 테이블 링크 - Anchor Tag 이미지 태그 폼 - 기본 태그 폼 - 부가입력, html5 new type video, audio

PART 2 CSS 기초편 CSS 기본문법, 색상 CSS 단위 CSS 선택자 - 전체, tag, id, class, 자손, 자식 CSS 선택자 - 형제, 속성, 의사 클래스 선택자 CSS 선택자 - 구조, 형태구조, 상태, 부정선택자 CSS 선택자 우선순위 서체 - 폰트 로드, 폰트 적용 글 스타일 - 크기, 두께, 장식, 스타일 글자 정렬, 글자 간격, 들여쓰기 글자 변경, 세로 정렬, 리스트 스타일 overflow background - color, image, attachment background-position, size box model Layout - float Position - relative, absolute Position - fixed, stickty, z-index Flex - part 1 / basic, direction, wrap, flow, justify-content Flex - part 2 / order, flex

PART 3 CSS 중급편 text-shadow, box-shadow gradient transition animation transform - translate, scale transform - rotate, skew Responsive - 반응형 기초, 연습1 반응형 연습 2 - 헤더 반응형 실전예제 - caption animation, Aside Navigation

*PART 4, 5, 6장의 내용은 강좌에 수록하지 않았습니다. 책과 저자의 유튜브 채널을 확인해주세요.

김동주

강의하는 프론트앤드 개발자

IT붐이 일던 2000년대 초반, 웹마스터 과정을 수료하고 직접 개발한 웹사이트를 통해 수출입 업무를 했다. 이후 광고 대행사 웹마케팅 업무를 통해 웹의 생태를 좀더 깊이 이해했고, 중소기업 협동조합에서 조합원사의 웹사이트 개발을 시작으로 15년 이상의 실무 경험을 쌓았다. 2015년 부터 웹디자인, 웹퍼블리싱, 프론트엔드 강의를 시작하여 근무 지점에서 우수강사 표창을 수회 수상했다. 현재는 오프라인 강의 뿐만 아니라 유튜브 채널을 통해 강의를 진행하고, 관련 도서를 집필하는 등 다양한 활동을 하고 있다. 저서: 웹디자인 & 웹 퍼블리싱을 위한 피그마 완벽 활용서 - 비제이퍼블릭 -(현) 그린컴퓨터아트학원 프론트앤드 강사 -(현) 이지웹 대표 -(전) 더조은 컴퓨터아트학원 웹퍼블리싱 강사 -(전) 우리한복아카데미 정보화센터 팀장 -(전) 상상애드윌 웹마케팅 팀장

⚡️ [코딩은 처음이라 with 웹퍼블리싱] 구매 혜택

무료 동영상 강의 / 구름에듀 코드 연습 / 연습&실습 문제까지! ☑️ 소스 코드 제공 : https://github.com/ezwebpublishing/with_coding_web ☑️ 저자 웹사이트 : https://ezwebpub.com ☑️ 저자 유튜브 : http://www.youtube.com/c/EasywebPublishing

☑️ 영진닷컴 IT채널 유튜브 : https://www.youtube.com/channel/UCi7L8rROh6lUePhwrWcCR8A/videos

⚡️ [코딩은 처음이라 with 웹퍼블리싱] 구매처

☑️ 예스24 : http://www.yes24.com/Product/Goods/112073764 ☑️ 교보문고 : http://www.kyobobook.co.kr/product/detailViewKor.laf?mallGb=KOR&ejkGb=KOR&linkClass=331903&barcode=9788931467321

교육 과정

모두 펼치기

01
part 1 HTML

학습 준비하기

index.html

HTML 기초 - 텍스트 관련 태그

섹셔닝 태그

01_block_element.html

02_inline_element.html

03_text_tag.html

04_div_sectioning.html

05_semantic_tag.html

제목, 문단, 구분선, 정형화된 텍스트

07.heading.html

08.paragraph_text.html

09.semantic_hr.html

10.pre.html

리스트

11.list.html

테이블

12.table.html

링크 - Anchor 태그

anchor_ex_base

비디오, 오디오 태그

audio_video_base

02
PART 2 CSS 기초편

CSS 기본 문법, 색상

01_syntax.html

02_colors.html

CSS 단위

03_unit.html

04_unit_vw_vh.html

05_unit_vh.html

선택자 - 전체, tag, id, class, 자식

06_universal_selector.html

07_tag_selector.html

08_id_selector.html

09_class_selector.html

10_id_selector.html

11_desc_selector.html

선택자 - 형제, 속성, 의사 클래스

12_siblings.html

13_attr_selector.html

14_pseudo-class.html

선택자 - 구조, 형태 구조, 상태, 부정

15_pseudo-element.html

16_nth-child.html

17_nth-of-type.html

18_checked.html

19_not_selector.html

선택자 우선순위

20_css_priority.html

서체 - 폰트 로드, 폰트 적용

21_font-face.html

22_google_font.html

글 스타일 - 크기, 두께, 장식, 스타일

23_font-size.html

24_font-weight.html

25_text-decoration.html

26_font-style.html

글자 정렬, 글자 간격, 들여쓰기

27_text-align.html

28_spacing.html

29_text-indent.html

글자 변경, 세로 정렬, 리스트 스타일

30_text-transform.html

31_vertical-align.html

32_list-style.html

33_display.html

배경 - colror, image, attachment

34_overflow.html

35_background-color.html

36_background-image.html

37_background-attachment.html

배경 - position, size

38_background-position.html

39_background-size.html

box model

40_box-model.html

41_box-model-direction.html

Layout - float

42_float.html

43_float_ex1.html

Position - relative, absolute

44_relative.html

45_absolute.html

46_position_ex.html

Position - fixed, sticky, z-index

47_fixed.html

48_sticky.html

49_z-index.html

Flex - part 1

50_flex_basic.html

51_flex_direction.html

52_flex_wrap.html

53_flex_flow.html

54_justify-content.html

55_align-items.html

56_align-content.html

Flex - part 2

57_order.html

03
PART 3 CSS 중급편

text-shadow, box-shadow

01_shadow.html

gradient

02_gradient.html

transition

03_transition.html

animation

04_animation.html

transform - translate, scale

transform - rotate, skew

05_transform.html

Responsive - 반응형 기초, 연습1

06_responsive_01.html

06_responsive_02.html

반응형 연습 2 - 헤더 반응형

06_responsive_03.html

실전 예제

07_image_caption.html

08_aside_animation.html

마지막 업데이트|2022년 08월 29일

강의자 소개

영진닷컴캡틴

안녕하세요. 구름에듀 캡틴 영진닷컴입니다. 함께 학습을 시작해봐요!

강좌 후기

무료

평균평점

5.0

난이도

쉬움

수강기간

평생 무제한