코딩은 처음이라 with 웹 퍼블리싱 - goormEDU
All Lectures
RouteNoticeQ&A

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

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

Lecture Introduction
Difficulty
Easy
Category
Web Programming - Programming
Tag
자바스크립트, CSS, HTML
Certificate
You can issue a certificate of completion
Target Audience
- 모든 웹 어플리케이션 시작은 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

Curriculum
Expand All
  • 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
Instructor Introduction
hello.Goorm Edu Captain 영진닷컴.Let's start learning together!

Lecture Reviews
Free

Average Rating
5.0
Difficulty
Easy
Lecture Period
Unlimited