반응형웹 콘텐츠 제작하기 Part1 - 웹버전부터~ 웹퍼블리셔 + HTML5 + CSS3

오랜만에 아주 오랜만에 콘텐츠따라만들기 스리즈중
반응형웹 부분을 해보았습니다.
다소 긴 영상입니다. 두개 영상으로 분리해서 업로드될 예정입니다.
현재 버전은 Web버전만 업로드 되었습니다.
반응형 되는 버전은 다음영상에서 계속 됩니다.
감사합니다.


- 리베하얀 -
* 웹퍼블리셔 하성필 ( Ha Sung pil, Rebehayan)
* 실무와 강의를 병행하고 있고 대부분 영상의 내용은 실무 이야기를 많이 다루고 있습니다.

- 작업 및 촬영 -
* OS : Window 10
* Editor : Atom
* Graphic Tool : Photoshop CC 2020, Zeplin
* Accessibility : NVDA, Sense Leader, JAWS, CCA, Openwax, Axe
* Other Tools : Koala
* Camera : A6400, M50, GR2, A99mk2, A99
* Lense : 35.8, 18-105, 11-22 외 다수

━━━━━━━━━━━━━━━━━━━━━━━━━━

영상은 매주 화, 금요일 오전 8시에 업데이트 되고 있습니다.

━━━━━━━━━━━━━━━━━━━━━━━━━━


- 사이트안내 -
* 문의 : rebehayan@gmail.com
* 개인사이트 : http://rebehayan.com
* 네이버블로그 : http://blog.naver.com/rebehayan
* 장애인차별금지법 대응을 위한 웹접근성과 품질인증 저자 : http://www.acornpub.co.kr/book/beyond-web-accessibility
aabbccdf : 와 너무좋은강의입니다 감사합니다 백엔드위주로 공부하다 프론트로 취업해서 낼출근인데 급하게 찾아보던중 좋은강의가 너무많네요 !
채플린 : 사진보고 크기 재시는데 포토샵 기능인가요?
어떤 방법으로 크기를 재시는 건가요? 폰트 크기 재는거랑 사진이나 패딩 간격 재시는 방법이 궁금합니다!
뭐하고살지 : 좋은 영상 잘 보고 갑니다 space-between 사용후 flex:1 방법 새로 배우고 가네요
왁오리 : 이미지 파일은 따로 받아볼순 없는건가요..? 제가 임의로 다른거 받아서 사용했더니 사이즈 조절이 안되네요
세상지기 : 이런 좋은강좌건은 책으로 발간해주시면 좋을것 같습니다만^^;

웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

HTML, CSS를 이용해서 (Javascript 약간) 반응형 헤더를 함께 만들어 볼꺼예요
(↙ 자세한 내용)

___________________________

풀스택 개발 로드맵 ⇢ https://academy.dream-coding.com/pages/912e50

엘리와 더 체계적으로 배우고 싶다면 ⇢ 드림코딩 아카데미:
http://academy.dream-coding.com/

.....................................................

☀️ 드림코딩 엘리
모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다 :)
❝Don't forget to code your dream
여러분들의 멋진 꿈을 코딩하세요 ⭐️

.....................................................

☀️ 연락

채널 문의 ⇢ ellie@dream-coding.com
아카데미 문의 ⇢ info@dream-coding.com

.....................................................


프론트엔드 개발자 되기 입문자편 영상 목록:
https://www.youtube.com/playlist?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

자바스크립트 기초 강의 영상 목록:
https://www.youtube.com/playlist?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2

개발자라면 누구나 알고 있으면 좋은 지식
https://www.youtube.com/playlist?list=PLv2d7VI9OotSn1ThdDeqvBx8QuRSd01qv

개발자 경력 관리 영상 목록:
https://www.youtube.com/playlist?list=PLv2d7VI9OotSyQ6RPdytiHID5Cmnv_sA3

이력서 작성 방법
https://www.youtube.com/playlist?list=PLv2d7VI9OotTZfvF0s8Vs0gpRtodlTsgg

IT 트렌드
https://www.youtube.com/playlist?list=PLv2d7VI9OotRTfM1zJLQMCLriBpLFg8r-

개발자 브이로그
https://www.youtube.com/playlist?list=PLv2d7VI9OotR1tALnxov7sAUshyBmfYfU

생산력 향상 팁
https://www.youtube.com/playlist?list=PLv2d7VI9OotQB-9p29xrAnARhuE1Vf88I

.....................................................

Music
Title: Special Days by JayJen
Genre and Mood: Dance \u0026 Electronic + Bright
License: Royalty-free music for YouTube, Facebook and Instagram videos giving the appropriate credit.

#반응형웹#프론트엔드#웹개발
Lighthouse : JS파트에서 toggle 에러현상을 경험하여 공유하고자 댓글을 씁니다. 혹시 같은 문제로 고민하시는 분들이 계실까봐요.

메뉴바를 클릭했을 때 메뉴와 아이콘이 일시적으로 나타났다 바로 사라지는 현상이 생겼는데 html에서 a href=" " 이 부분이 공백으로 되어서 그런 현상이 발생하는 것 같습니다.
a href= "#"을 넣어주면 메뉴와 아이콘이 일시적으로 나타났다 사라지는 현상이 없어집니다. 참 사소한 거라 생각했는데 사소한게 아니었네요.
한스갱 : 이 영상은 최고인거 같아요..
이전 html, css 강의들을 보고 이 영상으로 한번 더
복습이 되면서 내용들을 더 확실히 이해하게 되는거 같아요. 감사합니다
So Won Moon : 선생님 수업 너무너무 좋아요. 명확하고 이해가 잘됩니다. 매 강의마다 감탄하면서 따라가고 있어요^^ 감사합니다.
wanseop kim : 엘리님 항상 느끼는거지만 정말 세세하고 이해하기 쉽게 잘 설명해주셔서 감사합니다! 항상보면서 많은 도움을 받고 있어요 힘드시겠지만 앞으로도 계속 좋은 강의들 부탁드립니다!!
garam park : 처음에 영상 보고, 따라 만들어보면서 연습했습니다! :) 좋은 강의 감사드려요!!ㅠㅠㅠ 엘리님 최고... 국비지원 학원에서 배운 것보다 더 많은 것을 가르쳐 주시네요 ㅠㅠㅠ

디자인 코드 변환 도구 제플린(zeplin)의 개념과 실전 반응형 웹 앱 제작하기 | 수익형 웹, 앱 만들기 3강

디자인을 코드로 개발자에게 전달하는 퍼블리싱 툴인 제플린(Zeplin)의 개념과 그 사용법을 알아보고 동물상 테스트 완성형 서비스 만들기 2강에 이어서 디자이너에게 전달받은 디자인으로 웹 앱을 만드는 실습 강의입니다.
반응형 웹 사이트를 만드는 기본 개념인 %, rem, media query과 효율적인 배치를 도와주는 flexbox에 대한 간단한 개념과 실습을 담았습니다.
자세히 설명하면 강의가 너무 길어져서 최대한 간략하게 실전 실습 위주로 진행하였는데 궁금한 내용이 있으시다면 언제든 댓글 남겨주세요!
또, 영상속 제플린 프로젝트를 보시고 싶으신 분은 메일 주소 댓글로 남겨주시면 초대 드리겠습니다.

이 영상은 시리즈물로 구름IDE를 개발환경으로 사용하고 있습니다. 이전 개발 과정이나 환경세팅이 궁금하신 분은 이전 영상을 시청해주세요!

- 실전 수익형 서비스 만들기 (인공지능이 보는 나의 동물상 찾기)
https://www.youtube.com/playlist?list=PLU9-uwewPMe2-vtJAgWB6SNhHcTjJDgEO

- 구름IDE
https://ide.goorm.io/

- 완성 코드 보기
https://goor.me/MGzkb

- 제플린 공식 홈페이지
https://zeplin.io/

- 크몽
http://bit.ly/Kmong

- bootstrap 주소
https://getbootstrap.com/

- 조코딩 지난 영상 보기
https://www.youtube.com/playlist?list=PLU9-uwewPMe19RQNzTdSdewSgw92UI1kl

- 동물상 테스트 해보기 (미완성)
https://animalface.site/

---
본 영상은 구름IDE에서 에반젤리스트 활동 지원을 받아 제작되었습니다.
조코딩 JoCoding : 디자인을 코드로 개발자에게 전달하는 퍼블리싱 툴인 Zeplin의 개념과 그 사용법을 알아보고 동물상 테스트 완성형 서비스 만들기 2강에 이어서 디자이너에게 전달받은 디자인으로 웹 앱을 만드는 실습 강의입니다. 반응형 웹 사이트를 만드는 기본 개념인 %, rem, media query과 효율적인 배치를 도와주는 flexbox에 대한 간단한 개념과 실습을 담았습니다.

자세히 설명하면 강의가 너무 길어져서 최대한 간략하게 실전 실습 위주로 진행하였는데 궁금한 내용이 있으시다면 언제든 댓글 남겨주세요!
또, 영상속 제플린 프로젝트를 보시고 싶으신 분은 메일 주소 댓글로 남겨주시면 초대 드리겠습니다.

이 영상은 시리즈물로 구름IDE를 개발환경으로 사용하고 있습니다. 이전 개발 과정이나 환경세팅이 궁금하신 분은 이전 영상을 시청해주세요!

- 실전 수익형 서비스 만들기 (인공지능이 보는 나의 동물상 찾기)
https://www.youtube.com/playlist?list=PLU9-uwewPMe2-vtJAgWB6SNhHcTjJDgEO

- 구름IDE
https://ide.goorm.io/

- 완성 코드 보기
https://goor.me/MGzkb

- 제플린 공식 홈페이지
https://zeplin.io/

- 크몽
http://bit.ly/Kmong

- bootstrap 주소
https://getbootstrap.com/

- 조코딩 지난 영상 보기
https://www.youtube.com/playlist?list=PLU9-uwewPMe19RQNzTdSdewSgw92UI1kl

- 동물상 테스트 해보기 (미완성)
https://animalface.site/

---
본 영상은 구름IDE에서 에반젤리스트 활동 지원을 받아 제작되었습니다.
AsSlap : 세상엔 천재들이 많네요. 저런걸 만드는 개발자나 이런걸 소개해주는 코딩님이나 후.... 열심히 살아야겠다.
재원 : 항상 좋은 영상 감사합니다 !!
다른 코딩영상보며 공부하다 보면 실직적으로 얻는데 눈에 크게 보이지 않아서 지루할때가 있는데
조코딩님 영상은 결과물이 눈에 보이니 흥미가 계속 생기는거 같아요
그런 의미로 제플린 초대희망합니다 !!
jaewono786@gmail.com
초루소 : 조코딩님 채널을 통해서 프로그래밍 언어는 단순 도구에 불과하고, 코더가 아닌 프로그래머가 되기 위해서는 프로그램 서비스를 설계하고 필요한 오픈 코드를 찾아보고 수정할 줄 알아야 하는것 같습니다. 좋은 채널, 영상 만들어주셔서 감사합니다! 조코딩님 따라서 더욱 공부해서 발전하겠습니다 제플린 프로젝트 초대 부탁드립니다! lamer5130@gmail.com
piao : 안녕하세요 조코딩님 ! 항상 영상 잘 보고 배우고 있습니다 !
하나씩 따라하다 보니 재미도 있고 0to100까지 만들지 못해도 원하는 걸 만들 수 있다는 걸 잘 느끼게 해 주셔요!
이번 영상에서 만드는 프로젝트를 따라해 보려고 합니다! 제플린 프로젝트 초대 부탁 드립니다 ^^
nonamedm@naver.com 입니다.

...