Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
취업 준비생을 위한 반응형 웹 (HTML, CSS)
Rating: 4.0 out of 5(21 ratings)
107 students

취업 준비생을 위한 반응형 웹 (HTML, CSS)

[2023 취업대비] 누구나 시작할 수 있는 간단한 반응형 웹 사이트 포트폴리오 하나를 쉽고 빠르게 만들어봅니다.
Last updated 3/2025
Korean
Korean [Auto],

What you'll learn

  • 웹 페이지 기본 구조 이해
  • 반응형 웹 UI 이해
  • jQuery load를 이용한 UI 구성
  • jQuery 선택자와 클릭 이벤트 개념 이해

Course content

3 sections13 lectures2h 6m total length
  • 강의를 시작하며2:10

    ① 강사소개

    ② 수강필요성

    ③ 수업내용안내

  • VS Code & 확장도구 설치5:37

    비주얼 스튜디오 코드 (VS CODE)

    마이크로소프트의 개발 툴 중 최초로 크로스 플랫폼을 지원하는 에디터, 플러그인 확장기능(Extention)을 지원


    확장기능 설치

    1. Live Server (로컬 서버 실시간 확인)

    2. Auto Rename Tag (대칭 태그 자동 수정)


    툴팁 비활성화 (툴팁이 불편한 경우)

    1. 파일 > 환경 설정 > 설정

    2. 설정 창에서 "hover" 입력

    3. "Editor > Hover : Enabled" 체크 해제

Requirements

  • HTML & CSS에 대한 약간의 지식

Description


[ 수강필요성 (+동기부여) ]


기술 시대

기술 가진 사람이 ‘우대’받는 시대

1) 고용 안정성 (필요한 만큼 쉽게 내보내지 못함)

2) 유리한 처우 (구하기 어려운 사람이 되면 될 수록 유리함)

3) 직업 확장성 (프리랜서, 외주제작, 강사, 연사, 출판 등)


보편적인 기술

HTML, CSS, Javascript

1) 웹 페이지를 만드려면 반드시 사용해야하는 기술

2) IT 업계에서 널리 쓰임 (찾는 곳이 많음)


낮은 진입 장벽

HTML, CSS

1) 상대적으로 배우기 쉬운 편

2) 디자인 & 개발 직군에서 업무 확장을 위해 배우기 좋음


[ 수업목표 ]

웹 페이지 기본 구조 이해

반응형 웹 UI 이해

jQuery load를 이용한 UI 구성

jQuery 선택자와 클릭 이벤트 개념 이해


[ 수업내용]

1) 반응형 웹 사이트 살펴보기 (2:38)

2) 웹 사이트 기본 구조 설계 및 코딩 (7:10)

3) jQuery 기본 사용법과 클릭 이벤트 이해 (5:57)

4) 반응형 CSS 코드 작성 (6:05)

5) 상단 헤더 구성 - 모바일 (16:34)

6) 좌측 햄버거 메뉴 구성 - 모바일 (35:37)

7) 상단 헤더 구성 - PC (7:53)

8) 상단 네비게이션 구성 - PC (10:06)

9) jQuery load를 이용한 공통 헤더&푸터 호출 (4:23)

10) 반응형 웹 사이트 콘텐츠 완성 (22:19)

Who this course is for:

  • 반응형 웹사이트를 만들고자 하시는 분
  • 웹사이트 기본 구조를 이해하고자 하시는 분