margin auto 설정 및 미디어쿼리

Question

오늘도 질문 여러개 들고왔습니다 ㅠㅠ ~~

 

1. main  /  header 부분

    1-1메뉴바가 왜인지 모르게 왼쪽으로 쏠려있습니다.  float도 left, right 조절해보고 padding문제인가해서 패딩도 줘봤는데 중심에서 각 li 가 동일 비율로 자리 잡질 않습니다.

    1-2 narrow에서 믿어 쿼리가 작동은 하는 것 같은데 min-width를 200px 가까이 줬음에도 폰에서 조금 잘려나옵니다. 왜일까요?

 

    1.-2-1. 뷰포트가 700px쯤 되면 narrow.css가 작동은 하는데   program의 칸이 확 넓어 집니다. 이 비율 문제도 해결 가능할까요

    2-1 . parallax 코드에 저번 답변을 바탕으로 수정하였는데 여전히 문제 있는부분이 있는지 작동이 잘 안됩니다 .  현재 스크롤을 내릴때 메뉴바까지는 따라오는데 메뉴클릭에 대한 이펙트가 없습니다.

또, jsfiddle에서 되는데  제 사이트에 안되는건 무슨문제인걸까요? (http://mustoryart.com/?sub=about)

 해결되면 헤더메뉴네비의 하위 메뉴를 눌렀을때도 해당위치로 보내고싶은데 그것은 어떤 소스를 사용해야하나요?https://jsfiddle.net/junn_l/Ldrxgqrv/2/

 

3. sub.css 문제 .

    sub 의 body에 margin:auto를 준 적이 없는데 뷰포트가 1000px 이상일때  자꾸 자동계산된 마진이생깁니다 ㅠㅠ   어바웃, 프로그램, 뮤지엄 페이지에서 상단에 이미지를 뷰포트 꽉차게 넣고싶은데  1000px 부터는 자꾸 마진이 끼네요
 3-1. http://mustoryart.com/?sub=about! 을 보시면 body내에 상단에 이미지를 overflow hidden 으로 넣고

inner menu인 about us, 원장소개 부분을 이미지 위 하단부분에 겹치고 싶습니다.

html상으로 두 선택자는 형제관계이니 둘다 position:relative 를 줬는데 둘이 합쳐지질 않습니다 ㅠㅠ  

 

대부분 미디어 쿼리 문제입니다 ㅠㅠ 폰화면에서 보이는것이 가장중요한데 이게 잘 안되네요 ㅠㅠ

Answer 1

세부적인 작업 계획을 가지고 작업을 하고 있는 것은 맞지요?

웹사이트를 전체적으로 어떻게 작업할 계획인지 모르는 상황에서 위의 종합적인 질문들을 정리해서 답변을 달기가 쉽지 않아요.

우선 웹사이트 가로폭을 정확히 잡고 전체적인 레이아웃 밸런스를 잡는 작업을 먼저 하자구요. 최대폭을 1980px까지 잡았던데  그렇게까지 잡을 필요가 있는 것인지 의문입니다. 여하튼 주요 구성요소를 포함하여 전체 레이아웃이 원하는 크기로 위치가 정확히 잡히고 해상도에 따라 원하는 대로 반응하는 처리를 마무리한 다음 각 페이지 세부 작업을 하길 바랍니다.

네비게이터를 갖는 ul 태그의 li 레이블 항목이 가운데 정렬 되기를 바란다면 li 요소에게 display 속성 값을 inline-block으로 설정하고 ul 요소에게 text-align 속성을 center로 설정해야 하지 않을까요? 세로 중앙 정렬에 대한 문제가 있다면 메뉴 레이블이 한줄이라는 조건하에 line-height 값을 네비게이터 높이와 똑같은 값으로 설정하면 됩니다.

낮은 해상도에서 특정 메뉴 레이블의 폭이 커지는 것은 li의 width 값을 100%로 설정했기에 그렇습니다. 그리고 li에게 min, max-width를 설정할 이유가 있을까요? 위에서 설명한 대로 처리하고 네이게이터 배경색을 ul 요소에게 적용하세요. 그리고 ul 요소에게 좁은 폭일 경우 메뉴 레이블이 밀려내려오지 않도록 min-width를 설정해야 합니다.

어느 것 하나 제대로 잡혀있지 않은 상황에서 디테일한 작업을 나가기는 어렵습니다. 앞서 이야기한대로 일단 전체 레이아웃을 확실히 잡고 각 페이지별 세부 작업을 하는게 맞는 순서입니다. 또 그렇게 해야 질문이 있을 때 답변을 받기가 훨씬 수월해져요.