러닛 회원가입
러닛 회원 로그인
사용자 인증
초보자도 할 수 있는 반응형 웹 만들기
일정 2019년 03월 예정 시간 미정 장소 러닛 압구정센터 지도보기 참가비 15만원  x 2개월 = 30만원

찜하기 클릭 시 강의 시작 전 알려드립니다.

강의 소개

소개

본 강의는 리더님과 함께 오픈을 준비중인 과정입니다 :)
찜하기를 눌러두시면 오픈 시에 알려드리도록 하겠습니다!

웹의 기본 개념부터 플렉서블 박스까지, 직접 예제로 실습해보면서 배우는 재미있는 반응형 웹 만들기!
메인 페이지의 구조 잡는 것부터 콘텐츠를 배치하는 레이아웃 디자인, HTML5와 CSS3 코드까지 직접 배워보는 과정입니다 :)

참가대상

- 반응형 웹을 만들고 싶은 디자이너
- 반응형 웹을 만들고 싶은 기획자
- 반응형 웹을 만들고 싶은 개발자

상세정보

  • 일정2019년 03월 예정
  • 시간미정
  • 장소러닛 압구정센터 지도보기
  • 참가비 15만원  x 2개월 = 30만원

후기

    커리큘럼 소개

    주교재로 <반응형 웹 만들기>를 사용합니다.
    초보자도 할 수 있는 반응형 웹 만들기
    • 1. 반응형 웹 기본 개념 이해하기
      - 반응형 웹이란?
      - 왜 반응형 웹으로 만들어야 하나?
      - 사례로 알아보는 반응형 웹
      - 반응형 웹 학습과 제작을 위한 준비 작업
      - 반응형 웹 제작을 위한 핵심 기술 맛보기

      2. px을 %로 바꾸기 - 가변 그리드
      - 본격적으로 가변 그리드 배우기
      - 가변 마진과 가변 패딩 이해하기
      - 폰트도 자유자재로! 가변 폰트 이용하기
      - 멀티미디어 요소 가변적으로 만들기 - 가변 이미지와 가변 동영상

      1. 반응형 웹 기본 개념 이해하기<br>
- 반응형 웹이란?<br>
- 왜 반응형 웹으로 만들어야 하나?<br>
- 사례로 알아보는 반응형 웹<br>
- 반응형 웹 학습과 제작을 위한 준비 작업 <br>
- 반응형 웹 제작을 위한 핵심 기술 맛보기<br>
<br>
2. px을 %로 바꾸기 - 가변 그리드<br>
- 본격적으로 가변 그리드 배우기 <br>
- 가변 마진과 가변 패딩 이해하기 <br>
- 폰트도 자유자재로! 가변 폰트 이용하기<br> 
- 멀티미디어 요소 가변적으로 만들기 - 가변 이미지와 가변 동영상 <br>
    • 3. 미디어 쿼리와 뷰포트
      - 화면의 크기나 환경에 따라 웹 사이트를 변경하는 기술, 미디어 쿼리
      - 화면의 보이는 영역을 다루는 기술, 뷰포트

      4. 새로운 웹 기술, 플렉서블 박스
      - 플렉서블 박스 기본 개념 이해하기
      - 플렉서블 박스 기술 익히기

    • 5. 반응형 웹 사이트 준비 작업하기
      - 웹 사이트 구조 다지기

      6. 메인 페이지 작업하기
      - 메인 페이지 구조 작업하기
      - 메인 페이지 반응형 웹 작업하기

      5. 반응형 웹 사이트 준비 작업하기<br>
- 웹 사이트 구조 다지기<br>
<br>
6. 메인 페이지 작업하기<br>
- 메인 페이지 구조 작업하기 <br>
- 메인 페이지 반응형 웹 작업하기
    • 7. 서브 페이지 작업하기
      - 서브 페이지 구조 작업하기
      - 서브 페이지 반응형 웹 작업하기

      8. 마무리 작업하기
      - CSS 파일로 분리하기
      - 자바스크립트 이용해 메뉴 영역 작업하기

    • 9. 반응형 웹사이트 준비 작업하기
      1단계 : 웹사이트 구조 살펴보기
      2단계 : 폴더와 기본 파일 구성하기
      3단계 : 기본 구조와 기본 스타일 작업하기

      10. 반응형 웹 페이지 작업하기
      - 헤더 / 슬라이더 / 디스플레이 영역 구조 작업하기
      - 프로모션 / 구분선 / 최근 작업 영역의 구조 작업하기
      - 최근 글 / 연락처 영역 / 푸터 영역의 구조 작업하기

      9. 반응형 웹사이트 준비 작업하기<br>
1단계 : 웹사이트 구조 살펴보기 <br>
2단계 : 폴더와 기본 파일 구성하기 <br>
3단계 : 기본 구조와 기본 스타일 작업하기<br>
<br>
10. 반응형 웹 페이지 작업하기 <br>
- 헤더 / 슬라이더 / 디스플레이 영역 구조 작업하기 <br>
- 프로모션 / 구분선 / 최근 작업 영역의 구조 작업하기 <br>
- 최근 글 / 연락처 영역 / 푸터 영역의 구조 작업하기
    • 11. 마무리 작업하기
      - CSS 파일로 분리하기
      - 스타일 코드를 CSS 파일로 분리하기
      - 자바스크립트 이용해 메뉴 영역 작업하기
      - 메뉴가 나타나거나 감춰지는 토글 버튼 만들기



    강의 참가신청