| 제목 | 프론트 개발 관련 질문입니다. | ||
|---|---|---|---|
| 글쓴이 | 브레인토스트 | 작성시각 | 2016/07/13 22:51:26 |
|
|
|||
|
지분율이 점점 올라가는데요 ...ㅎ 음 일단 워드프레스에 한 템플릿 테마를 가지고 프론트 개발을 하고 있는 중인데 제가 프론트 개발을 정말 잘 못해서 ... 걱정도 많네요.. 아무튼 음 웹은 반응형입니다. 근데 문제가 그냥 템플릿에 포함되는 기능으로 하려고 템플릿을 골라줘서 구매하시고 저한테 개발하라고 넘기셨는데 디자인 수정요청이 애초에 얘기된 시안과 너무 달라져서 제공되는 기능과 레이아웃 등을 포기하고 제가 직접 국소부위를 수정해야 합니다. 일단은 문제가 어떤 이미지 엘리먼트들이 10여개가 있는데요. 모두 동일한 크기를 가지고 있으며
■ ■ ■ ■ ■ ■ ■ 이러한 형태로 되어있습니다. 이녀석들을 항상 바디의 중앙 정렬인 상태에서 엘리먼트들 간의 간격도 일정하게 유지해야하고 데스크탑 수준의 크기나 타블렛의 가로모드 정도의 디스플레이 크기에서는 엘리먼트 크기에 맞춰서 3열이나 5열 7열 등의 형태로 세로로 쭉 정렬이 되어야 합니다. ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
이러한 모양으로요.
핸드폰 환경에서는 ■ ■ ■ 이렇게 1열로 중앙 정렬이 되어야합니다. 일단 그럴듯해보이게는 했으나 애매한 디스플레이 사이즈에서나 타블렛 가로모드 같은 크기에서는 이녀석이 저 엘리먼트를 감싸는 div의 중앙 정렬 상태가 되지 않습니다. 만약에 저런식으로 5열이나 3열 등으로 감싸고있는 div태그의 중앙에 정렬이 되면서 좌우의 marge가 동일한 상태를 유지하려면 @media로 일일히 모든 규격별로해서 margin사이즈를 조정해줘야 하는건가요 ??? 다른 좋은 방법이 있으면 알려주세요. 하드코딩은 너무 힘드네요 ..ㅠ |
|||
| 다음글 | 동영상 서버 호스팅 ?? 질문 (2) | ||
| 이전글 | 클라우드 설정중에 apm 구축 중 xampp 질문입니다... (2) | ||
|
김치겸
/
2016/07/14 08:48:37 /
추천
1
|
|
kaido
/
2016/07/14 08:56:42 /
추천
1
모바일과 pc 사이즈는 @media 쿼리 하는것 맞습니다.
하나의 블록 안에 감싸고 있는 랩에서 왼쪽으로 정렬했다.
이 의미를 푸시면 해결 하실 겁니다. 모바일의 경우는 전체를 감싸는 블럭의 사이즈를 줄여버리면 밑으로 떨어지게 되어있습니다.
|
|
브레인토스트
/
2016/07/14 13:09:54 /
추천
0
두분다 감사합니다 ㅎㅎ 적용해보도록 하겠습니다. |
|
브레인토스트
/
2016/07/14 13:58:10 /
추천
0
넘나감사합니다 ㅠ 김치겸님 카이도님도 감사합니다 ㅎ 해결했습니다.
|
|
브레인토스트
/
2016/07/14 13:58:28 /
추천
0
저는 text-align이라길래 텍스트에만 정렬이 해당되는줄 알았네요 ..ㅎ
|
|
하하예에
/
2016/07/15 08:16:33 /
추천
1
<style type="text/css">
.container{
max-width: 1000px;
margin: 0 auto;
}
.container>.body{
width: 100%;
display: table;
}
.container>.body>div {
display: table-cell;
text-align: center;
border: 1px solid red;
}
@media ( max-width: 600px ) {
.container>.body>div{
display: block;
}
}
</style>
<div class="container" >
<div class="body">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
이렇게 하시면 하위 div가 몇개가 되든 가로값을 계산 안하셔도 됩니다. |
|
브레인토스트
/
2016/07/15 09:05:42 /
추천
0
이것도 좋은 정보네요 감사합니다 ㅎ
|
상위 div에 text-align:center;를 하고
하위 이미지의 display:inline-block;로 하면 됩니다ㅋ