-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
제가 질문이 좀 많습니다. 죄송합니다.
20.12.11 00:45 작성 조회수 159
1
완강하고 완전히 저의 것으로 만들기 위해 혼자서 여러번 처음부터 끝까지 하다가 딱 여기서 project 반응형으로 수정할때, 막혀 고생했던것들 관련하여 질문올립니다.
뭐냐면,
우선 웹상에서 선생님께서 버튼을 누르면 tabs가 움직일때, margin-left 로 조정해서 하셨지만,
저는 project-inner에 position: relative; 를 주고
tabs에 position: absolute;를 준뒤,
움직임은 left값으로 조정해서 구현을 했었습니다.
그러니까 문제가 뭐였냐면,
이 반응형에서, 선생님께서 알려주신대로,
height값 들을 auto로 하고, 만드니,
project-inner 부터(색깔 있는 보더를 그려주니 알게 되었습니다.) 높이값이 안나와 굳이 구현을 하려면,
높이값을 auto가 아닌 수동으로 잡아줘야 했고,
btn도 위치가 이상해지고 알 수 없는 빈 공간도 막 생기고,
뭐가 문제인지 모르겠더라구요.
선생님 처럼, position 값으로 움직이는게 아니라,
margin-left 값으로 움직이게 한 후 모바일반응형으로 높이를 height를 주면 문제가 없는데 말이죠.
그 이유를 혹시 알 수 있을까해서 여쭤봅니다.
제 스스로 내리는 판단하에서는 이렇게 움직이나 저렇게 움직이나 웹상에서는 문제가 없는데,
제가 했던 방식으로는 반응형으로 할때 구조가 이상해지니, 분명 더 명확한 방법이 있을 것 같은데, 현재 완전히 구현하려면 선생님의 방식으로 가는것 밖에는 없더라구요.
제 질문의 요지를 이해하셨는지 잘 모르겠습니다만,
이해가 가셨다면, 답변을 부탁드리겠습니다.
자꾸 귀찮게 해드리는것 같아 죄송하지만, 답을 알면 속이 시원할 것 같습니다. 감사합니다.
답변을 작성해보세요.
1
코딩웍스(Coding Works)
지식공유자2020.12.13
메일 주신거 확인해봤는데요.
모바일 버전 프로젝트 섹션에서 탭 메뉴 누르는 버튼이 이미지와 겹치는 아래와 같이 나오는 문제 때문에 그러시는 것 같아요.
이 부분을 아래 처럼 원래 위치로 하시려고 하시는 것으로 생각됩니다.
이 부분은 아래 이미지처럼 responsive.css에서 .detail > div에 width가 110펙셀이어서 모바일에 따라 마지막 div가 아래로 줄이 떨어지는 현상 때문에 밀린 것으로 보입니다. 그래서 아래처럼 너비를 좀 줄여주세요. 기본은 width: 110px 인데 100픽셀 정로 줄여주시면 첫번째 이미지처럼 마지막 div가 아래로 떨어지지 않을거에요. 그리고 .detail에 text-align: center 주셔서 자식 div들을 중앙 정렬 시켜주시구요.
1
코딩웍스(Coding Works)
지식공유자2020.12.11
질문글만 봐서는 이해하기가 쉽지 않네요.
일단 파일을 봐야 할 것 같아요.
작업중인 파일 압축해서 이메일로 보내주세요.
cebuandy71@gmail.com
답변 2