영화 예매 사이트 만들기: 디자인편

Name: 영화 예매 사이트 만들기: 디자인편
Rating: 4.9 (7 reviews)

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

(4.9) 수강평 7개

수강생 1,171명

난이도 초급

수강기한 무제한

webstoryboy

example

example

먼저 경험한 수강생들의 후기

4.9

5.0

Jang Jaehoon

13% 수강 후 작성

좋은 강의 감사합니다!

5.0

똘똘이스머프

100% 수강 후 작성

강의 감사합니다. 덕분에 프론트엔드 개발을 위한 지식을 많이 얻었다고 생각합니다. 아직도 배울 것이 많고 체득화가 필요하지만 많은 도움이 되었네요. 항상 건강 조심하세요.

5.0

미갱이

100% 수강 후 작성

감사합니다. 사이즈에 따른 디자인 잡는법에 대해 많은도움이 되었습니다!

수강 후 이런걸 얻을 수 있어요

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

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

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

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

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

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

📢 수강 시 참고 자료 안내

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

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

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

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

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

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

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

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

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

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

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

예상 질문 Q&A 💬

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

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

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

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

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

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

이런 분들께
추천드려요

학습 대상은
누구일까요?

그리드와 헤더, 푸터, 배너까지 다양한 레이아웃을 반응형으로 제작하고 싶은 분
실제로 있는 사이트를 따라 만들어보며 웹 UI/UX 디자인 감을 익히고 싶은 분
웹 퍼블리셔 직무를 희망하는 분
웹 사이트를 처음 부터 하나하나 따라하며 만들고 싶은 분

선수 지식,
필요할까요?

웹 표준 사이트 만들기 (선택)
반응형 웹 사이트 만들기 (선택)

안녕하세요
입니다.

7,502

명

수강생

101

개

수강평

개

답변

4.9

점

강의 평점

개

강의

안녕하세요! 🧑🏻‍💻

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

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

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

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

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

커리큘럼

전체

24개 ∙ (8시간 13분)

섹션 1. 영화 예매 사이트 만들기 : 디자인편

24개 ∙ (8시간 13분)

1. 기본 작업
12:54
2. 그리드 시스템
21:20
3. 360 그리드 시스템
16:10
4. 600 그리드 시스템
12:11
5. 768, 1280 그리드 시스템
17:47
6. 960 그리드 시스템
06:42
7. 레이아웃
17:51
8. 헤더
12:46
9. 헤더 반응형
19:25
10. 배너
33:09
11. 배너 반응형
15:56
12. 컨텐츠 1
24:38
13. 컨텐츠 1 반응형
48:32
14. 컨텐츠 1 반응형 수정
04:45
15. 컨텐츠 2
11:42
16. 컨텐츠 2 반응형
22:31
17. 컨텐츠 3
25:11
18. 컨텐츠 3 반응형
15:58
19. 컨텐츠 4
34:41
20. 컨텐츠 4 반응형
23:15
21. 컨텐츠 5
26:58
22. 컨텐츠 5 반응형
37:29
23. 푸터
19:15
24. 푸터 반응형
12:28

강의 게시일:

마지막 업데이트일:

수강평

전체

7개

4.9

7개의 수강평

Jang Jaehoon
수강평 644
∙
평균 평점 4.9
5
13% 수강 후 작성
좋은 강의 감사합니다!
Leo
수강평 24
∙
평균 평점 4.5
4
100% 수강 후 작성
하나씩 따라하면서 배우게 되어 시간은 걸렸지만, 공부 많이 되었습니다.
똘똘이스머프
수강평 868
∙
평균 평점 5.0
5
100% 수강 후 작성
강의 감사합니다. 덕분에 프론트엔드 개발을 위한 지식을 많이 얻었다고 생각합니다. 아직도 배울 것이 많고 체득화가 필요하지만 많은 도움이 되었네요. 항상 건강 조심하세요.
미갱이
수강평 16
∙
평균 평점 5.0
5
100% 수강 후 작성
감사합니다. 사이즈에 따른 디자인 잡는법에 대해 많은도움이 되었습니다!
코딩하는카피바라
수강평 8
∙
평균 평점 5.0
5
8% 수강 후 작성
잘놀다갑니다.

무료

webstoryboy님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

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

webstoryboy

모바일, 태블릿, 웹 환경에 따라 자유자재로 스크린 사이즈를 변경하는 반응형 웹을 제작해봅시다.

초급

반응형 웹

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

webstoryboy

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

webstoryboy

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

초급

반응형 웹

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

webstoryboy

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

webstoryboy

이왕 만들거면 제대로 만들자! 공식 웹 표준을 지키며 만드는 퍼블리싱 강의입니다🧑🏻‍💻

입문

HTML/CSS

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

webstoryboy

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

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

webstoryboy

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

초급

반응형 웹

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

webstoryboy

실전! 웹사이트제작! Step By Step! _Basic (한화캐미컬_반응형웹)

J.영

HTML5와 CSS3를 활용하여 웹사이트(한화캐미컬/솔루션)를 제작 실습과정으로, PC 모드 레이아웃과 반응형 페이지 제작을 완벽히 이해하고, 활용할 수 있는 실전! 웹페이지 제작 ! Step by Step!의 Basic Course 강좌입니다. (강의 완성 파일 첨부!)

초급

HTML/CSS, 반응형 웹, jQuery

실전! 웹사이트제작! Step By Step! _Basic (한화캐미컬_반응형웹)

J.영

인슈의 게임 캐릭터 포토샵 디자인&원화 입문자편

박인수

그림을 막 시작한 초보부터 포토샵을 사용하여 그림을 그리는 사람들까지 재미있고 이해하기 쉽게 배우실수 있습니다.

초급

Photoshop, 드로잉

인슈의 게임 캐릭터 포토샵 디자인&원화 입문자편

박인수

누구나 할 수 있는 이모티콘 디자인 Part.2

유용한IT학습

초보자도 할 수 있는 이모티콘 제작과 판매 방법

입문

이모티콘, Photoshop, 캐릭터 디자인

누구나 할 수 있는 이모티콘 디자인 Part.2

유용한IT학습

"국내최다승인 임티작가"가 알려주는 속성 이모티콘 만들기

씨엠제이

국내 최다 이모티콘 승인작가가 알려주는 이모티콘 제작방법에 대한 강의

입문

이모티콘, 캐릭터 디자인, Photoshop

"국내최다승인 임티작가"가 알려주는 속성 이모티콘 만들기

씨엠제이

[포토샵 혁명 방송] 포토샵 중급 완성

유용한IT학습

포토샵 이미지 보정과 편집을 위한 기초와 전문 편집을 위한 채널 시리즈 강좌를 시작합니다.

초급

Photoshop

[포토샵 혁명 방송] 포토샵 중급 완성

유용한IT학습

카톡 이모티콘 디자인 과정

소프트캠퍼스

카카오와 라인에서 이모티콘 작가로 활동 하고 계신 김영삼 강사님의 이모티콘 디자인 부터 카카오톡, 라인에 이모티콘을 제작하여 제안하고 수익을 내는 모든 경험을 강의로 담았습니다.

초급

이모티콘, Photoshop, 캐릭터 디자인

카톡 이모티콘 디자인 과정

소프트캠퍼스

포토샵 기본기 하루 5분, 3주 만에 끝내기

디자인베이스

비전공자도 쉽게 배우는 포토샵 기초 강좌입니다. 빠르게 포토샵 툴을 배워야하는 디자인과 1,2학년 분들, 포토샵으로 부업하고 싶은 분들, 본인의 사업을 꾸미고 싶은 분들, 유튜브 크리에이터나 블로그와 인스타그램을 운영하시는 분들이 배우면 아주 도움됩니다! 시작이 반입니다 여러분... 겁먹지 마세요.

입문

Photoshop

포토샵 기본기 하루 5분, 3주 만에 끝내기

디자인베이스

부트스트랩(BOOTSTRAP)3을 활용한 반응형 웹페이지 만들기

유용한IT학습

디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의입니다.

초급

Bootstrap, 반응형 웹

부트스트랩(BOOTSTRAP)3을 활용한 반응형 웹페이지 만들기

유용한IT학습

부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

영코디 킴쌤

부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기[2024년 개정판] 수업의 실전 제작수업으로 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩4를 활용하여 직접 제작해 봅니다.

초급

Bootstrap, 반응형 웹, 웹 디자인

부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

영코디 킴쌤

이야기로 배우는 CSS

소셜아카이브

HTML로 만든 카페 홈페이지를 CSS로 아름답게 꾸미는 실전 프로젝트 강의입니다. 색상, 레이아웃, 타이포그래피부터 Flexbox, Grid, 애니메이션, 반응형 디자인까지 CSS의 모든 기초를 민지와 코드 선생의 스토리를 따라가며 자연스럽게 배울 수 있습니다. 4시간의 학습으로 초보자도 프로페셔널한 웹 디자인을 완성할 수 있습니다.

입문

css, 반응형 웹, Flex

이야기로 배우는 CSS

소셜아카이브

키샷 중급•고급 : 극 사실적인 제품 이미지를 위한 키샷 렌더링 & 후보정 Part.2

SOO

실무 능력 향상을 위한 극사실적인 렌더링 프로세스! 키삿&후보정 중급•고급 노하우! 친절하게 알려드릴게요 😀

중급이상

KeyShot, 3d-modelling, 3d-rendering

키샷 중급•고급 : 극 사실적인 제품 이미지를 위한 키샷 렌더링 & 후보정 Part.2

SOO

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

초급

HTML/CSS, 반응형 웹, 인터랙티브 웹

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

[환상의족발] 디자인부터 코딩까지

두노피

맛있는 족발이에요~ 요즘 족발 장난 아니던데...꿀꺽

초급

Photoshop, HTML/CSS, 클론코딩

[환상의족발] 디자인부터 코딩까지

두노피

Tailwind CSS로 만드는 멋진 웹 UI 스타일링

코딩웍스(Coding Works)

[Tailwind CSS로 만드는 멋진 웹 UI 스타일링] 강의는 현재 가장 핫한 프레임워크인 Tailwind CSS v3.4.1을 이론부터 실전 반응형 웹사이트까지 19시간 충실하게 다루고 있습니다. 수업 시간이 길다고 좋은 강의는 아닙니다. 하지만 해당 강의는 시간도 긴 좋은 강의라고 자부합니다. 특히, Tailwind CSS 모든 이론을 8시간 30분 동안 상세하게 다루기 때문에 CSS 이론이 부족한 사람에게 CSS 이론을 충실히 학습할 수 있습니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

초급

TailwindCSS, 반응형 웹, HTML/CSS

Tailwind CSS로 만드는 멋진 웹 UI 스타일링

코딩웍스(Coding Works)

키샷 입문•초급 : 극 사실적인 제품 이미지를 위한 키샷 렌더링 & 후보정 Part.1

SOO

비사실적이고 장난감 같이 보이는 이미지는 더이상 NO! 극사실적인 제품 렌더링의 고급 노하우 친절하게 알려드릴게요!

입문

KeyShot, 3d-modelling, 3d-rendering

키샷 입문•초급 : 극 사실적인 제품 이미지를 위한 키샷 렌더링 & 후보정 Part.1

SOO

실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)

J.영

실전! 웹사이트제작 Step By Step! 크루알라모드(https://crewalamode.com/) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다.

초급

반응형 웹, jQuery, HTML/CSS

실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)

J.영