반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
HTML-код
- Опубликовано: 10 ноя 2024
- 웹개발시 반응형으로 만드는것이 굉장히 중요합니다. 반응형이 무엇이고 왜 중요하고 어떻게 잘 만들수 있는지 얘기해봤어요 :)
(↙ 자세한 내용)
___________________________
💡 풀스택 개발 로드맵 ⇢ academy.dream-...
🚀 엘리와 더 체계적으로 배우고 싶다면 ⇢ 드림코딩 아카데미:
academy.dream-c...
.....................................................
🔗 Resources (한번 읽어보면 좋은 내용들):
developer.mozi...
www.interactio...
internetingish...
이미지 참고용:
pomagency.com/...
blog.hubspot.c...
/ a-sneak-peek-at-intrin...
responsivedesi...
.....................................................
☀️ 드림코딩 엘리
모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다 :)
❝Don't forget to code your dream
여러분들의 멋진 꿈을 코딩하세요 ⭐️
.....................................................
🌐 프론트엔드 개발자 되기 입문자편 영상 목록:
• 프론트엔드 강의 - 프론트엔드 개발자 되...
📒 자바스크립트 기초 강의 영상 목록:
• 자바스크립트 기초 강의 (ES5+): 같...
💻 개발자라면 누구나 알고 있으면 좋은 지식 💡
• 개발자라면 누구나 알고 있으면 좋은 지식 💡
💰 개발자 경력 관리 영상 목록:
• 승승장구 커리어 관리 🚀
📄 이력서 작성 방법
• 취업 보장 이력서 작성 🙌
📈 IT 트렌드
• IT 트렌드 📈
📷 개발자 브이로그
• 개발자 브이로그 📷
🤗 생산력 향상 팁
• Tech & Tools ❤️
.....................................................
🎵Music
Title: New York by Declan DP
Genre and Mood: Dance & Electronic + Happy
License: Royalty-free music for RUclips, Facebook and Instagram videos giving the appropriate credit.
#반응형웹#프론트엔드#웹개발
이제 우리의 웹사이트는 무조건 반응형으로 🙌 모바일 사용자들을 먼저 고려해서 (MOBILE FIRST) 웹어플리케이션을 만드는거예요 ⭐️
혹시 부족하거나 이해가 되지 않는 부분은 꼭 알려주세요 🙏🏼
출첵합니다!
ㅊㅊ 이해가 안갈 수가 없죠~꿀강의여서요~ㅎㅎ
최고~
출석체크 합니다ㅎ
프론트엔드 공부를 시작하려는 비전공자입니다. 학원이 국비지원보다 알려주는 내용이 많아 학원을 결제하고 개강전에 검색을 하다 엘리님을 알게되었습니다. 혼자 예습하다 시간이 날때 영상을 보는데 모두 알차고 든든한 내용들이라 항상 좋아요를 남기게 되네요. 댓글을 남기기는 처음입니다. 비전공자라 따라가기 버거울것같다는 생각도 가끔 듭니다만 그때마다 엘리님 영상을 보고 힘을 얻어갑니다. 더 노력하고 힘내서 언젠가 선배님으로 엘리님 만나고싶다는 작은 소원 빌면서 오늘도 내일도 화이팅 하겠습니다! 감사합니다 엘리님!
드림코딩을 보며 해외 웹개발자를 꿈꾸는 꿈나무 입니다. 영상 하나하나가 너무나 소중하고 제 인생에 너무나도 많은 도움이 되고있어요. 정말 감사드립니다.
병길님~ 너무~ 스윗한 코멘트 감사합니다 ❤️ 현업에서 기다리고 있을께요. 화이팅!
'반응형' 웹... 관심 갖기 전엔 보이지 않던 부분이 알고 보니 새삼 뭐랄까, 멋지고 대단해보여요!
하하 그런가요? 컨텐츠를 물과 같이 :)
컨텐츠를 물과 같이 만들어라. 캬 취하고 갑니당👏💕
캬~ 물과 같이 만드셔서 반응형에도 캬~ 취하시길 바래요 🍻
Responsive Web Design은 매우 직관적이어서 그것을 자유자재로 구현할 수 있느냐는 차치하고, Responsive Web은 입문자들에게 조차 친숙한 주제라고 생각합니다.
이미 사용 경험이 많으니 이해도 잘 되는 군요. 다음편으로 빨리 넘어가 Responsive 실습해보겠습니다.
공부하느라 바쁘실텐데 영상 볼때마다 이렇게 코멘트 남겨 주셔서 감사해요 :)
출첵합니다 점점 더 재밌어지고 빠져드네요ㅎㅎ
빠져드시나요? 🤗 꺄하하
엘리님 강의 보니까 반응형에 대한 이해가 소화제 먹은거마냥 팡 뚫리네요.. 덕분에 머릿속에서 정리가 잘 되었습니다. 항상 좋은강의 감사드려요!
강의 잘봤어요!! 최초공개 기대중입니다:)
코멘트 감사드립니다 🤗
반응형웹은 필수! 컨텐츠는 담기는 컨테이너에 따라 물흐르듯! 열심히 배우겠습니다~~^^ 감사합니다~
컨텐츠는 물 💧
감사해요 저도 시드니에서 개발공부하는중인데 도움이 많이 됩니다!
어머, 시드니에 계세요? 길에서 저 만나면 아는척 하시기예요~ 🤗
I'm a bit shy😋
다음 강의가 더욱 기대되게 만드는 영상이었습니다. 잘봤어요!
하하 여기두, 코멘트 남겨 주셔서 정말 감사합니다 ❤️
엘리쌤덕에 제 머릿속이 정리되고 넓어지는 느낌이에요ㅜㅜ정말 감사합니다!
출첵!! 반응형 처음 배웠을 땐 진짜 너~무 싫었는데, 이게 또 하다보니깐 유동적으로 바뀌는 모습이 보기에도 좋으니 괜히 눈도 즐겁고 뿌듯하고 막 그러더라구요ㅋㅋㅋㅋㅋ 아직도 힘들긴하지만.. 그래도 재밌는 것 같아요ㅎㅎ
하하 그쵸~? 한번 만들어 놓으면 정말 뿌듯하답니다 :) 컨텐츠를 물과 같이 💧
대충 하는방법만 알았지 이런 중요한 기초개념을 머리에 정리할 수 있다니 너무 좋아요
반응형 좋은 정리가 되셨으면 좋겠어요 🙌
출첵하고 바로! 다음 강의로 가겠습니다~!
학교 종강해서 텀 브레이크 동안 엘리님 영상 정주행하면서 공부중이에요~ 항상 감사드립니당 :)
개발 입문자 입니다. 엘리님 코딩강의 들으면서 어렵더라도 혼자서 웹 만들어 보려구 합니다! :) 영상 항상 잘보고 있어여~~
엘리님 영상은 기초를 확실하게 잡을 수 있어서 정말 좋아요~ 항상 감사합니다!
정주행중입니다. 기본도 없이 Grafana란 Famework 사용중인데 강의듣고 도움이 많이 되었습니다.
드림코딩으로 프론트엔드 차근차근 공부하고 있습니다! 이렇게 자세하고 좋은 영상 너무너무 감사해요👍👍🧡💜💚💛❤💙 바로 css단위 총정리까지 보고 오겠습니다~!
와우 ㅎㅎㅎ 잘 들었어요!! 다음 강의 최초공개 되어있던데 기다릴게요~~
항상 코멘트 감사드려요~~! 네 드디어 HTML + CSS 실전편이 다가왔어요 🙌 나중에 바닐라 자바스크립트 배우면 더 재밌는 웹앱을 만들어 볼 수 있겠죠? 🤗
실전편너무 기대되네요~ 좋은 영상만들어주셔서 감사합니다❣️
저두 코멘트 남겨 주셔서 감사합니다 ♥️
오늘도 도움되는 영상 감사합니다! 다음 실전편 영상 기대할게요!😁
오늘도 코멘트 감사합니다 🙌
반응형 작업시엔 항상 기기별 가로 사이즈 구분하는게 애매했는데 오늘영상 감사합니다~~~!
조금이라도 도움이 되었다니 다행이예요 🙌
1년전 게시물이지만 이제서야 로드맵 참고해서 보고 있습니다 감사합니다
엘리님,, 그동안 인프런이나 유튜브 강의를 보면서도 이해가 안가고 의지가 꺾였는데,, 여기 잘하네요,, 열심히 듣겠습니다 ^^
감사합니다 😍
강의 순서를 잘 못 봐서 , 반응형 헤더 만들기 강의 먼저 보고 실습까지 완료한 뒤에 이 강의를 수강했네요 ㅎㅎ 한 번 더 복습해서 더 잘 이해됩니다 ! 감사합니당 :-)
출석 체크~! 다음편으로!
궈궈 🏃🏻♀️ 출첵 감사합니다
출첵합니다! 좋은 강의 너무 감사드려요 ㅎㅎㅎ
영상 폰트랑 색감이 너무이쁩니당
영상 보시면서 이렇게 출책 해주셔서 감사해요 ❤️
반응형이 뭔지 몰랐는데 엘리 덕분에 설명 잘 듣고가요:)
다음 동영상이 궁금해지네요 헤헤
반응형 화이팅!
너무좋은 영상들 감사합니다 오래오래 만들어주세요 정주행중이에요 ㅜㅜ
좋은 피드백 감사합니다 ❤️
프론트엔드 공부중에 있습니다!
항상 영상을 통해 도움을 많이 받고있어요. 감사합니다 :)
코멘트 감사드립니다 ❤️ 프론트엔드 개발자 화이팅 입니다 🤗
출첵합니당!! 항상 좋은 강의 만들어주셔서 감사합니다🥰
SoYpung님 코멘트 남겨 주셔서 정말 감사해요 ❤️
요새 한국은 코로나 난리인데 호주는 괜찮나요? 늘 건강하시고 좋은강의 감사합니당!
호주는 한국에 비하면 괜찮아요 ㅠ ㅠ 국내에는 난리죠? 저희 부모님은 부산쪽에 있어서 매일 통화하면서 안부 물어보고 있어요ㅠ 4월에 한국 가는 뱅기 끊았는데 어떻게 될지 모르겠어요 😭 최대한 조심하면서 이럴때일수록 해야할일 열심히 하면서 견디는게 좋은것 같아요
말씀해주신 반응형에대해서 어느정도 이해만 하고 넘어가는 파트 인거죠??
영상감사합니다~
아 그리구 댓글에 말씀해주셧는데 모바일을 먼저 고려하는이유가 반응형으로 만들려면 모바일을 먼저 고려해서 만드는게 필수 라서 인가요?
궁금해서 질문남깁니다
출첵하였습니다 !! 오늘도 감사합니다 ㅎㅎㅎ
원랜 댓글을 잘 안다는 성격이라 영상만 보면서 공부를 하였는데, 엘리님의 강의력과 목소리에 그만..첫 댓글 및 출첵 표시를 하게 됩니다!ㅋㅋㅋㅋㅋ
출석체크!!
영상을 쭉 이어서 보고 있는 중이에요.
반응형 웹 잘 배워갑니다!!! 감사합니다!!
Content is like water ! 좋은 말이네요
출석체크하고 갑니다 ~
친절한 설명 감사합니다.저는 작년부터 html과 css 공부 하는 교재를 구입해서 공부하고 있는데 왜 반응형으로 디자인을 하는지 궁금해서 참고합니다^^
좋아요 구독 완료했습니다
강의가 너무너무 좋아서 연속해서 보고 있어요. 양질의 강의 남겨주셔서 정말정말 감사합니다.
출첵~~! 어느새 여기까지 왔네요 😝
와우 곧 실전에서 뵈어요
breakpoint를 몇으로 잡아야할지 늘 헷갈렸는데 반응형 내용 정리해주셔서 감사해요~
그쵸~? 컨텐츠를 물과 같이 🥛
회사에서 웹화면을 만들때 제대로 알지못하고 만들었었네요 ㅠ 많이 도움이 되고 있습니다
출첵! 예시 웹사이트 보여주시는거 넘 조아요
출첵입니다~ 파팅파팅
화이팅!
출석 체크! 꾸준히 따라가겠습니다.
감사합니다 ❤️
항상 좋은 강의 감사드립니다 ❤ 출첵해용
현지님 출석체크 너무 감사해요 🥰
잘 보고 있습니다! 어떻게 공부해야 되는 지 알려주셔서 너무 좋아요
감사합니다 엘리님!! 앞으로 영상 보면서 질문들 남기도록 하겠습니다,
코멘트 감사합니다 🙌
출석체크!! 실전편 기대돼요!
실전에서 만나요 :)
출석체크!! 크.. 문법 해석 부분이 아주 하이라이트예요👏👏👏 너무 잘 보고 갑니다!
출석체크 확인 완료 😎 열심히 공부해 주셔서 감사해요, 화이팅!
기본 없이 시작 했다가 많은 도움 받고 있습니다~ 영상 감사합니다.
MDN 사이트의 media queries편을 보니 내용이 엄청 많네요. 혹시 웹게임 개발할 때는 여기에 나와있는 잘 안 쓰이는 쿼리들도 도움이 될까요? 다음으로 진행하겠습니다. 잘 봤습니다. 감사합니다.
정말 설명 잘해주시네요!! 쏙쏙 다들어와요 ㅎㅎ
출첵!! 엘리언니 짱!! 강의 쉽고 재밌고 좋아요
오늘은 반응형 출석체크해요! :)
부족? 이해가 안가는 부분이 있냐구요? Its Perfect video to me!!!!
You are so sweeeeeeeet ❤️
컨텐츠를 물과 같이 💧💧💧💧
저의 코드작성도 물과같이 써졌으면 좋겠어요 .. 또륵 💧
media query 였군요 감사합니다.
요즘 화면 단이랑 자바 스크립트 데이터 주고 받는 방법 이 필요 해서 왔는데 많은 도움 받고 갑니다.
덕분에 제가힘이 더많이납니다 감사합니다
구독 박고 좋아요 누르고 갑니다 :) 실제로 반응형 웹사이트를 만드시면서 설명해주시는것도 있으면 너무 좋을 것 같아요!! 감사합니다!
나중에 코멘트 남겨 주신거 보고 여기로 왔네요 :) 하하 반응형 실전편 찾아서 하신거 같으니 다행이예요 ❤️
이해하기 쉽게 강의해 주셔서 감사히 잘 공부하고 있습니다. ~~~ 감사합니다.
간단하고 핵심적인 설명 감사합니다~
출석체크 완료! 좋은 강의 감사합니다~!
출첵합니다! 좋은 강의 감사해요
반응형까지 다 오셨네요 ❤️
감사합니다 지금 초보 열심히 따라가고 있습니다
출첵합니다. 좋은 강의 감사합니다 :)
여기까지 오셔서 출책해주셔서 감사해요 🙌
엘리쌤 오늘도 감사합니다!
출첵! 엘리님 좋은 강의 감사합니다!!!!
오늘도 감사합니다~
이번 영상은 정리할 것이 적어 좋네요..
반응형 웹의 정확한 정의 알 수 있어서 너무 좋았습니다
오늘도 좋은영상 감사합니다!!
영상 잘 보았고 어둠속 빛 보이는 희망이 생겼습니다. 브레이크 포인트 정의를 기획. 디자인. 퍼블 중 어느 조직에서 정의해서 작업 방향 잡는 지가 궁금합니다. 브레이크 포인트는 말씀주신 사이즈로 진행하면 무난 할까요
Tafe 강의를 듣는데 이렇게 유툽에서 배우는 게 더 잘 이해가되네요. 엘리님 강의 중에 클론 코딩 등록해서 보는데 깃, 비쥬얼스튜디어 소스트리 연결하는데서 막혀버렸어요... 윈도우에서 하는데.. . 비기너에겐 어려운 게 많네요.
CONTENT IS LIKE WATER! 소개받은 노션에 써뒀어요! 이렇게 또 배웁니다💗 너무 감사해요! 저 여쭤볼게 있어요 엘리님! 드림코딩 아카데미의 클론 코딩을 수강하려고 합니다! 제가 JavaScript가 너무 약하기도 하고, 6개월 학원에서 배운 내용이 전부라(사수가 없어요ㅠㅠ) 기초 탄탄하게 잡고싶어서 수강하고자 하는데 유튜브 자바스크립트 강의 전에 들어두는게 좋을까요? 순서가 궁금해요!💗
클론코딩에는 자바스크립트 개념보다는 실제로 어떻게 쓰는지를 보여드리기 때문에, 유튜브에 있는 자바스크립트 7~8편까지 들어보시고 오시면 좋을 것 같아요 :)
드림코딩 by 엘리 네! 감사합니당❤️
출첵이요~~^^
감사합니다! 어서 넷바를 만들러~~🕺🕺
몇일 안으로 정말 진도 많이 나가셨군요 :) 짱 👍
출첵합니다~ 맨날 px같은걸로 디자인하다가 이건좀아닌데...싶어서 어떻게 할까 고민하다가 강의보고 반응형이라는걸 알았네요! 좋은 강의 감사드려요~
오늘도 출첵! 좋은 강의 감사합니당!!
출첵하고 다음 영상 갑니다.
출첵 넘 재밌어요
출첵! 항상 잘보고있습니다
출첵 ! 오늘도 영상 잘 봤습니다.
출석해요! 영상감합니다. 엘리님 궁금한게 있어요. 네이버 같은경우는 모바일 전용 웹사이트(m.naver.com)와, PC전용 웹사이트(www.naver.com)를 분리해서 운영하더라고요. 이러한 이유가 PC버전에서의 복잡한 레이아웃 때문인가요? 외국에서도 pc와 모바일 버전을 따로 만드는 경우가 많나요?
m. 사이트들은 한참 모바일이 세상에 나오기 시작하면서 부터 많이 쓰여진 예전 방식이랍니다. 한참 모바일 폰들이 나오기 시작했는데 기존에 존재하던 데스크탑용 웹사이트들은 모바일을 전혀 고려하지 않은 레이아웃에, 큰사이즈의 이미지도 막 쓰고 그랬거든요. 그래서 빠른 솔루션으로 m. 사이트로 리다이렉트해서 전혀 새로운 모바일전용 페이지를 만들었던거죠. 하지만 웹기술이 발달하고 모바일이 대중적으로 변화되면서 Responsive Web이 등장하면서 리다이렉트 해야되고 따로 관리해야 하는 m. 보다는 반응형으로 많이 바꼈고, 또 그렇게 바껴가고 있는 추세예요 😃
@@dream-coding 감사합니다! 반응형으로 만들 수 있는 한계점이 있어서 따로 사이트를 관리하는줄 알았어요! 상세한 답변 감사합니다.
엘리님은 현업에서 개발하실때 어떤 프로그램을 쓰시는지 궁금해요!노트북은 맥북이신가요?
오웃 이거 관련해서 영상을 따로 만들어 보도록 할께요 :)
짧게 답변해드리면 저는 맥북을 쓰고 있구요 (집이랑 회사에서 둘다) 프론트엔드 개발은 회사에서는 IntelliJ (회사에서 유료 라이센스를 구입해줬고 VS Code애서는 지원안되는 기능들 몇가지를 제가 써야해서요) 회사에서 VS Code만 사용하는 개발자들도 많아요.
드림코딩 by 엘리 답변감사해욥!!혹시 아톰같은 앱은 사용안하시나용?!
@@hongsam-t1w 몇분은 노트 작성용으로 사용하시구요. 저는 예전에 아톰 + 플러긴으로 쓰긴 했는데 저는 갠적으로
Sublime Text 성능이 더 좋아서 Sublime을 쓰고 있어요 ㅎㅎㅎ
출석했습니다. 오늘도 화이팅!!
오늘도좋은영상감사합니다!출석해요ㅎ
코멘트 남겨 주셔서 감사합니다 ❤️
출석체크 ^.^ 감사합니다 :) 백엔드 개발자 취준생인데 프론트엔드도 어느정도는 알아야할거같아서 엘리님 강의 보고 따라하고있어요!
우아~ 이렇게 열정적으로 열심히 하시는 개발자님들을 보면 저에게도 정말 좋은 자극이 되는거 같아요 🤗 이렇게 능동적으로 열심히 공부하시는 개발자분들이 많아서 정말 뿌듯하네요 ❤️
출첵합니당!
물흐르듯 다음 강의로 갑니당
출첵합니다!
출첵~~항상 고맙습니다. 👍👍👍
꺄우 미디어 쿼리 유형에 이렇게 많은 것들이 있는지 몰랐네요!
주로 스크린 사이즈 특정하거나 프린트 화면 만들때만 사용했었는데
orientation 같은 건 어떻게 사용하는 건지 MDN 한번 훑어보면 도움 될 것 같아욥!! :)
반응형을 처음 알게 되었을 때... 결국 다 노가다였구나..라는 생각이 들었었죠 ㅎㅎㅎ
하하하ㅋㅋㅋㅋ 컨텐츠를 유동적으로 만들면 조금 쉬운 노가다가 될까요?ㅋㅋㅋ
강의 잘 들었습니다!!. 항상 감사드립니다~~
출첵!!감사해용
좋은 강의 감사드립니다!
안녕하세요. 기획자에서 프론트 개발자로 전환을 준비하면서 강의 잘 보고 있습니다. 현업에 있다보면 종종 웹표준 관련 사업이나 애기가 있는데요. 개발자나 퍼블리셔가 웹표준에 대해서 알고 있어야 하는 건지 궁금합니다.