웹 표준과 반응형 사이트 만들기 강의를 잘 따라왔다면 이제는 실전 연습 차례! 영화 예매 사이트 제작을 디자인편과 코딩편으로 나누어 학습합니다.
이런 걸
배워요!
포토샵을 활용하여 사이트 디자인 하기
반응형 웹 사이트 만들기
플러그인을 활용하여 이미지 슬라이드 만들기
API를 가져와서 영상 띄워주기
자바스크립트로 기능 구현하기
모방으로 하는 퍼블리싱 실습!
디자인을 통해 사이트 구조를 익혀요 🎨
실제 웹 사이트를 따라해 보는 퍼블리싱 실습, 1편!
이 강의는 영화 예매 사이트를 디자인 편, 코딩 편으로 나누어서 진행하는 수업입니다. 메가박스 구버전 페이지를 따라 만들어 볼 거예요. 본 편에서는 포토샵으로 메가박스 사이트를 디자인하고 코딩편에서 퍼블리싱 하는 순서예요. 직접 디자인을 해보면 사이트의 구조가 어떤 식으로 되어 있는지 파악하기 더 수월해질 거예요. 디자인 강의를 원하지 않는 분들은 코딩편 부터 수강하셔도 무관해요.
완강을 향해! 여러분의 열공을 응원할게요.🧚🏻♀️
📢 수강 시 참고 자료 안내
*각 이미지를 클릭하면 해당 강의 페이지로 이동합니다.
Q. 비전공자도 들을 수 있는 강의인가요?
네! 기초적인 내용을 다루는 강의이기 때문에 처음 배우시는 분들도 충분히 들으실 수 있습니다.^^
Q. 강의를 듣기 전 준비해야 할 것이 있나요?
포토샵과 여러분의 열정만 준비해오시면 됩니다.^^
Q. 수업 내용을 어느 수준까지 다루나요?
본 편은 디자인 수업으로 포토샵을 전혀 몰라도 따라오실 수 있는 수준입니다.^^
학습 대상은
누구일까요?
그리드와 헤더, 푸터, 배너까지 다양한 레이아웃을 반응형으로 제작하고 싶은 분
실제로 있는 사이트를 따라 만들어보며 웹 UI/UX 디자인 감을 익히고 싶은 분
웹 퍼블리셔 직무를 희망하는 분
웹 사이트를 처음 부터 하나하나 따라하며 만들고 싶은 분
선수 지식,
필요할까요?
웹 표준 사이트 만들기 (선택)
반응형 웹 사이트 만들기 (선택)
안녕하세요! 🧑🏻💻
웹에 관심이 많고, 강의를 하고있는
웹 스토리보이입니다.
유튜브 채널 Webstoryboy에서
여러가지 강의를 제작합니다.
포기하지 않고 마지막 강의 까지 저와 함께 하나 하나씩 잘 따라와주면
웹 퍼블리셔에 한 발짝 더 다가가실 수 있을 거예요. 꼭 직접 해보셔야 실력이 늘 것입니다.
어렵거나 틀려서 잘 안 된다고, 모르겠다고 포기하시면 다른 사이트 만들 때도 힘이 들겠죠?
따라하시다가 틀리거나 안 되는게 있으시면 본인이 코딩한 것과 제 강의 소스를 비교하시면서
스스로 어디가 틀렸는지 찾아보세요. 그것 또한 공부가 될 거랍니다 🧚🏻♀️
오늘도 여러분의 열공을 응원하며, 화이팅입니다!
전체
24개 ∙ (8시간 13분)
기본 작업
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