inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

반응형 웹사이트 포트폴리오(Architecture Agency)

메인페이지 레이아웃 모바일 변환 #07(Project Section)

제가 질문이 좀 많습니다. 죄송합니다.

229

Youngjae Choi

작성한 질문수 20

1

완강하고 완전히 저의 것으로 만들기 위해 혼자서 여러번 처음부터 끝까지 하다가 딱 여기서 project 반응형으로 수정할때, 막혀 고생했던것들 관련하여 질문올립니다.

뭐냐면, 

우선 웹상에서 선생님께서 버튼을 누르면 tabs가 움직일때, margin-left 로 조정해서 하셨지만,

저는 project-inner에 position: relative; 를 주고
tabs에 position: absolute;를 준뒤,
움직임은 left값으로 조정해서 구현을 했었습니다.

그러니까 문제가 뭐였냐면,
이 반응형에서, 선생님께서 알려주신대로,
height값 들을 auto로 하고, 만드니,

project-inner 부터(색깔 있는 보더를 그려주니 알게 되었습니다.) 높이값이 안나와 굳이 구현을 하려면, 
높이값을 auto가 아닌 수동으로 잡아줘야 했고,
btn도 위치가 이상해지고 알 수 없는 빈 공간도 막 생기고,
뭐가 문제인지 모르겠더라구요.

선생님 처럼, position 값으로 움직이는게 아니라,
margin-left 값으로 움직이게 한 후 모바일반응형으로 높이를 height를 주면 문제가 없는데 말이죠.

그 이유를 혹시 알 수 있을까해서 여쭤봅니다.

제 스스로 내리는 판단하에서는 이렇게 움직이나 저렇게 움직이나 웹상에서는 문제가 없는데,

제가 했던 방식으로는 반응형으로 할때 구조가 이상해지니, 분명 더 명확한 방법이 있을 것 같은데, 현재 완전히 구현하려면 선생님의 방식으로 가는것 밖에는 없더라구요.

제 질문의 요지를 이해하셨는지 잘 모르겠습니다만,
이해가 가셨다면, 답변을 부탁드리겠습니다.
자꾸 귀찮게 해드리는것 같아 죄송하지만, 답을 알면 속이 시원할 것 같습니다. 감사합니다. 

웹 디자인 jquery HTML/CSS 반응형-웹

답변 2

1

코딩웍스(Coding Works)

메일 주신거 확인해봤는데요.

모바일 버전 프로젝트 섹션에서 탭 메뉴 누르는 버튼이 이미지와 겹치는 아래와 같이 나오는 문제 때문에 그러시는 것 같아요.

이 부분을 아래 처럼 원래 위치로 하시려고 하시는 것으로 생각됩니다.

이 부분은 아래 이미지처럼 responsive.css에서 .detail > div에 width가 110펙셀이어서 모바일에 따라 마지막 div가 아래로 줄이 떨어지는 현상 때문에 밀린 것으로 보입니다. 그래서 아래처럼 너비를 좀 줄여주세요. 기본은 width: 110px 인데 100픽셀 정로 줄여주시면 첫번째 이미지처럼 마지막 div가 아래로 떨어지지 않을거에요. 그리고 .detail에 text-align: center  주셔서 자식 div들을 중앙 정렬 시켜주시구요.

1

코딩웍스(Coding Works)

질문글만 봐서는 이해하기가 쉽지 않네요.

일단 파일을 봐야 할 것 같아요.

작업중인 파일 압축해서 이메일로 보내주세요.

cebuandy71@gmail.com

full reload 질문

1

180

3

섹션4에 있는 4번째 강의 질문(스크롤링)

1

149

2

안녕하세요. 질문있어서 조심스레 글을 올려봅니다.

1

197

1

브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ

1

317

3

css full reload 문제가 발생하여 질문드립니다!

1

315

3

파일 내 index.html에 대한 오류

1

264

1

모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ

1

207

1

모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다

0

218

2

모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!

1

201

2

모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.

1

255

3

크로스브라우징-크롬

1

280

2

섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..

0

256

1

line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다

1

217

1

슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다

1

274

1

이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?

1

257

1

모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역

1

508

2

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4

2

233

1

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3

2

309

1

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2

2

261

1

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태

2

423

1

포지션 속성 중복과 관련해서

1

215

1

section about에 관련.. 궁금해요

1

256

1

섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련

1

194

2

개발자도구

2

483

6