전에 잠깐 웹페이지 제작 업무를 맡게 되어서html/css/js와 반응형 미디어 쿼리로 웹사이트를 만들었는데저는 px단위로 크기를 잡고 position으로 위치를 잡았는데 요즘은다양한 방법들이 있더라구요 제가 전담해서 프론트 개발을 할개 아니라화면설계와 간단한 데이터베이스 웹 연동, 테스트용 서비스 페이지 제작정도만하려고 합니다.퇴근 후, 주말 시간을 활용해서 관련 공부를 하려고 하는데 flex&grid같은걸 공부할지다른 프레임워크같은걸 공부할지 고민입니다.미디어쿼리나 자바스크립트 같은건 기억이 조금은 나는데 레이아웃 잡는게어렵네요..ㅠㅠ 선배님들 도와주세요 ^^

작업을 하다보니까 css 미디어 쿼리를 쓸 때도 있고 vuex 에서 window width를 저장해놓고 사이즈가 감지되면  v-if-else로 필요한 컴포넌트를 불러오는 방식을 동시에 쓰고 있습니다.  레이아웃이 크게 변하지 않는 부분은 미디어 쿼리로 해결하고너무 크게 변하는 부분은 v-if-else로 렌더링하고 있는데요 서서히 프로젝트가 커짐에 따라서 이게 나중에 유지보수가 가능할지 두렵네요    처음부터 PC/Mobile를 나눠서 따로 만들었어야 했나 싶다가도막상 또 그렇게 나누자니 레이아웃이 크게 안 바뀌는 부분도 제법 많아서 혼란에 빠졌습니다. 이와 관련해서 조언을 얻을 수 있을지 궁금합니다. 

안녕하세요. 프로토타입 만드는 중에 궁금한 점이 있습니다.   어댑티브를 적용했을 경우 생기는 문제   1. 표의 칸 높이를 조정하거나 폰트를 조정하거나 하면 따로 적용이 안되고 함께 사이즈가 늘어나는 문제   2. 마스터로 만든 것들과 별표 붙은 위젯들도 동일한 문제   > 모바일 뷰와 웹 뷰에서 표를 간격이나 폰트사이즈를 각각 조정할 수 있도록 하는 방법이 있는지 궁금합니다?  

넷플릭스 반응형 웹페이지 제작 중 질문드립니다. 실제 넷플릭스 공식홈페이지처럼 TV 이미지 안에 영상이 나오는 듯한 효과를 똑같이 구현하고 싶습니다. 넷플릭스 공식 홈페이지에서 개발자도구로(F12) 확인해서 코드를 따라했는데요, 웹페이지 기준으로는 오류없이 딱 맞게 나옵니다. 하지만, 반응형 도구로 보니 위치나 크기가 자꾸만 어긋나는 오류가 있습니다. 혹시 이부분은 어떻게 해야하는지 몰라서 코드부분 남기니 확인부탁드립니다.. (▼) 원하는 부분 : 반응형도구로 봐도 <video> 부분의 위치 및 크기가 딱 맞게 구현. 넷플릭스 url  https://www.netflix.com/kr-en/ img { max-width: 100%; height: auto; border: 0; } .animation-card.watchOnDevice .our-story-card-img, .animation-card.watchOnTv .our-story-card-img { position: relative; z-index: 2; } .animation-card.watchOnTv .our-story-card-animation { width: 100%; height: 100%; max-width: 73%; max-height: 54%; position: absolute; top: 46%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .animation-card.watchOnDevice .our-story-card-video, .animation-card.watchOnTv .our-story-card-video { width: 100%; height: 100%; } (▽) 코드 및 오류 : 실제로 코드를 똑같이 퍼블리싱했을 때, 반응형도구로 비디오의 위치가 어긋나는 오류   감사합니다~

일반 데스크탑화면일때 뷰량 모바일일때 뷰량 헤더부분(네비게이션) 을 다르게 구성해서 모바일로 가면 화면을 다른걸로 보여줘야되는데 어떻게 해야되나요?

안녕하세요 16:25초 할머니 그림부분에 아랫쪽에 이미지가 삐져나오는데 이부분은 어떻게 맞추나요?  알려주시면 감사하겠습니다.

 혼자 고민하다가 도저히 안되서 질문드려요.,.ㅠㅠ 1.CSS 부분 강사님 소스와 똑같이 정의해도 몇몇은 다르게 보입니다. 대표적으로 카테고리 부분에서 반응형이 작동하지 않고 잘려서 나옵니다. (이유를 모르겠습니다.) flex를 적용해제하거나 colum 설정시, 카테고리 버튼이 쭉 아래로 ( 예를들어 react, vsocde, tt 형태로) 나열이 됩니다. 2. server 부분 auth 라우터 부분에서  states(401)을 삭제후 res.json 만 보낼 경우 메인화면에서 로그인하지도 않았는데 AppNavbar.js - authLink가 자꾸 출력이 됩니다. 그래서 확인해본 결과 인정여부를 확인하는 isAuthenticated가 자꾸 true로 바뀌더군요 states를 다시 작성하니 작동이 됩니다. 전 states가 시스템에 문제를 일으키지 않고 메세지 같이 명시만 해주는걸로 알았는데 아닌건가요? 3.  프로필 수정 ( 비밀번호 수정) 로그인 직후 비밀번호 수정 버튼을 클릭 시 페이지가 이동하지 않고, 포스트 수가 증가 합니다. (예를 들어 메인화면에서 포스터수:12개, 노출되어있는 포스터: 6개, 숨겨진 포스트 6개    일시 버튼클릭 시 노출되어 있는 포스터 수(6개)  만큼 포스터수가 증가합니다. 예시대로 하면 최종적으로 12+6 =18 개가 되고있습니다). 그러나 페이지 새로고침 후 비밀번호 수정버튼을 누를시에는 정상적으로 페이지가 이동하여 작동합니다. 원인을 도저히 모르겠네요..) 깃주소 남깁니다. https://github.com/dnjsvltm201311681/cookblog

강의에서 나온 스크로다운 방식을 통해서 페이지 넘김을 진행했을시 반응형 테스트로 다른 디바이스 및 가로모드 세로모드 모두 에서 사용하게 되면 화면이 일률적으로 나오지 않고 깨져서 나오는 것으로 확인되었습니다. 추신)CSS를 활용하여 미디어쿼리도 적용하였으니 일부 비율에서는 페이지 넘김 기능이 작동하지 않고 또 가로모드에서는 깨지는 현상이 발생했습니다. 혹시 이러한 부분에 대해서 문제의 해결책을 알려주실 수 있을까요? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.