Thumbnail
개발 · 프로그래밍 웹 개발

영화 예매 사이트 만들기: 디자인편 대시보드

(5)
5개의 수강평 ∙  825명의 수강생

무료

지식공유자: webstoryboy
총 24개 수업 (8시간 13분)
수강기한: 
무제한
수료증: 미발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[웹 퍼블리싱, 그래픽 디자인] 강의입니다.

웹 표준과 반응형 사이트 만들기 강의를 잘 따라왔다면 이제는 실전 연습 차례! 영화 예매 사이트 제작을 디자인편과 코딩편으로 나누어 학습합니다.

✍️
이런 걸
배워요!
포토샵을 활용하여 사이트 디자인 하기
반응형 웹 사이트 만들기
플러그인을 활용하여 이미지 슬라이드 만들기
API를 가져와서 영상 띄워주기
자바스크립트로 기능 구현하기

모방으로 하는 퍼블리싱 실습!
디자인을 통해 사이트 구조를 익혀요 🎨

웹 퍼블리셔 꿈나무를 위한 강의 ✏️

실제 웹 사이트를 따라해 보는 퍼블리싱 실습, 1편!

이 강의는 영화 예매 사이트를 디자인 편, 코딩 편으로 나누어서 진행하는 수업입니다. 메가박스 구버전 페이지를 따라 만들어 볼 거예요. 본 편에서는 포토샵으로 메가박스 사이트를 디자인하고 코딩편에서 퍼블리싱 하는 순서예요. 직접 디자인을 해보면 사이트의 구조가 어떤 식으로 되어 있는지 파악하기 더 수월해질 거예요. 디자인 강의를 원하지 않는 분들은 코딩편 부터 수강하셔도 무관해요.

완강을 향해! 여러분의 열공을 응원할게요.🧚🏻‍♀️

📢 수강 시 참고 자료 안내

  • 소스 다운로드
  • PSD 다운로드
  • 각 항목을 클릭하면 해당 사이트로 연결됩니다.
  • 본 강의에서 이용된 프로그램은 Adobe PhotoshopCC 2018입니다.

웹퍼블리셔 꿈나무 로드맵 🌲

*각 이미지를 클릭하면 해당 강의 페이지로 이동합니다.

1. [웹 퍼블리싱 실습] 웹 표준 사이트 만들기

사이트 만드는 방법에 대한 감을 잡을 수 있는 강의입니다.

2. [웹 퍼블리싱 실습] 반응형 사이트 만들기

웹 환경에 따라 자유자재로 스크린 사이즈를 변경하는 반응형 웹을 제작합니다.

3. 영화 예매 사이트 만들기: 디자인편현재 강의

이제는 실전이다! 영화 예매 사이트 제작 1탄, 디자인편입니다.

4. 영화 예매 사이트 만들기: 코딩편

이제는 실전이다! 영화 예매 사이트 제작 2탄, 코딩편입니다.


예상 질문 Q&A 💬

Q. 비전공자도 들을 수 있는 강의인가요?

네! 기초적인 내용을 다루는 강의이기 때문에 처음 배우시는 분들도 충분히 들으실 수 있습니다.^^

Q. 강의를 듣기 전 준비해야 할 것이 있나요?

포토샵과 여러분의 열정만 준비해오시면 됩니다.^^

Q. 수업 내용을 어느 수준까지 다루나요?

본 편은 디자인 수업으로 포토샵을 전혀 몰라도 따라오실 수 있는 수준입니다.^^


이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
그리드와 헤더, 푸터, 배너까지 다양한 레이아웃을 반응형으로 제작하고 싶은 분
실제로 있는 사이트를 따라 만들어보며 웹 UI/UX 디자인 감을 익히고 싶은 분
웹 퍼블리셔 직무를 희망하는 분
웹 사이트를 처음 부터 하나하나 따라하며 만들고 싶은 분
📚
선수 지식,
필요할까요?
웹 표준 사이트 만들기 (선택)
반응형 웹 사이트 만들기 (선택)

안녕하세요
webstoryboy 입니다.
webstoryboy의 썸네일

안녕하세요! 🧑🏻‍💻

웹에 관심이 많고, 강의를 하고있는 
웹 스토리보이입니다.

유튜브 채널 Webstoryboy에서 
여러가지 강의를 제작합니다.

포기하지 않고 마지막 강의 까지 저와 함께 하나 하나씩 잘 따라와주면
웹 퍼블리셔에 한 발짝 더 다가가실 수 있을 거예요. 꼭 직접 해보셔야 실력이 늘 것입니다.

어렵거나 틀려서 잘 안 된다고, 모르겠다고 포기하시면 다른 사이트 만들 때도 힘이 들겠죠?
따라하시다가 틀리거나 안 되는게 있으시면 본인이 코딩한 것과 제 강의 소스를 비교하시면서

스스로 어디가 틀렸는지 찾아보세요. 그것 또한 공부가 될 거랍니다 🧚🏻‍♀️
오늘도 여러분의 열공을 응원하며, 화이팅입니다!

커리큘럼 총 24 개 ˙ 8시간 13분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 영화 예매 사이트 만들기 : 디자인편
기본 작업 미리보기 12:54 그리드 시스템 미리보기 21:20
360 그리드 시스템 16:10
600 그리드 시스템 12:11
768, 1280 그리드 시스템 17:47
960 그리드 시스템 06:42
레이아웃 17:51
헤더 12:46
헤더 반응형 19:25
배너 33:09
배너 반응형 15:56
컨텐츠 1 24:38
컨텐츠 1 반응형 48:32
컨텐츠 1 반응형 수정 04:45
컨텐츠 2 11:42
컨텐츠 2 반응형 22:31
컨텐츠 3 25:11
컨텐츠 3 반응형 15:58
컨텐츠 4 34:41
컨텐츠 4 반응형 23:15
컨텐츠 5 26:58
컨텐츠 5 반응형 37:29
푸터 19:15
푸터 반응형 12:28
강의 게시일 : 2022년 01월 24일 (마지막 업데이트일 : 2021년 12월 25일)
수강평 총 5개
수강생분들이 직접 작성하신 수강평입니다.
5
5개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
똘똘이스머프 thumbnail
5
강의 감사합니다. 덕분에 프론트엔드 개발을 위한 지식을 많이 얻었다고 생각합니다. 아직도 배울 것이 많고 체득화가 필요하지만 많은 도움이 되었네요. 항상 건강 조심하세요.
2023-02-11
미갱이 thumbnail
5
감사합니다. 사이즈에 따른 디자인 잡는법에 대해 많은도움이 되었습니다!
2022-09-01
코딩하는카피바라 thumbnail
5
잘놀다갑니다.
2022-08-18
ohmyzava thumbnail
5
JS로 포폴하나 뚝딱입니다
2022-02-26
nels thumbnail
5
좋은 강의 감사합니다.
2022-02-25