강좌에 올려볼까 생각을 해 보았으나..

이 부분에 대해 너무 야매로 만든 구석이 있어 의견을 나누고자 질문 드려 봅니다

 

배너의 경우 logo와는 달리 이미지 제어하는 부분이 어렵더군요

이에 제가 생각하기로 부트스트랩의 container-fluid를 사용하여 수정해 보고자 했습니다.

 

container-fluid를 사용하면 고정 사이즈의 이미지를 올리는데 좌우 전체 화면을 사용하는데 있어

1차 목표치 결과물이 나왔습니다.

 

헌데 문제는 이미지 가운데 정렬!!!

부트스트랩의 기능을 사용하여 가운데 정렬이 쉽게 될줄 알았는데

저의 부족인지 몰라도 가운데 정렬이 되지 않았습니다 이에 

 

img {position:absolute;top:0;left:50%;margin-left:-840px}

 

이러한 방법을 사용하여 이미지에 대해 자동이 아닌, 수동 작업으로 정렬을 맞춰 주었습니다.

 

그리고... 이후 제 생각은 다음과 같았습니다.

한번 이미지 정렬을 맞춰줬으면, 부트스트랩이니까 자동으로 사이즈 변환 및 정렬이 되겠지...

 

결과는 그렇지 않더군요

사이트 해상도 호환 테스트 사이트, 미패드1, 아이언2, 노트4s에서 테스트를 각각 해본 결과

이미지가 제각각 다 틀리게 나오더군요

 

하나하나 일일히 수정을 해본 결과 다음과 같은 결과치에 도달하게 되었습니다.

1680 x 600 사이즈의 배너 이미지를 사용한 경우

 

@media (max-width:1024px)
{
    .header-slider-bg {padding:100px 0;position:relative;overflow:hidden;height:400px;}
    .header-slider-bg > img {position:absolute;top:0;left:50%;margin-left:-490px}
}

/* 세로 방향 타블렛부터 가로 방향 타블렛과 데스크탑까지 미패드 세로 적용됨*/
@media (min-width: 768px) and (max-width: 979px){
    .header-slider-bg {padding:100px 0;position:relative;overflow:hidden;height:300px;}
    .header-slider-bg > img {position:absolute;top:0;left:50%;margin-left:-370px}
}

/* 가로 방향 전화기부터 세로 방향 타블렛까지 */
@media (max-width:767px) {
    .header-slider-bg {padding:70px 0;position:relative;overflow:hidden;height:260px;}
    .header-slider-bg > img {position:absolute;top:0;left:50%;margin-left:-305px}
}

/* 가로 방향 전화기 이하 */
@media (max-device-width: 480px) {
    .header-slider-bg {padding:40px 0;position:relative;overflow:hidden;height:150px;}
    .header-slider-bg > img {position:absolute;top:0;left:50%;margin-left:-165px}
    .header-slider-bg h1 {font-size:18px;margin-bottom:10px}
    .header-slider-bg h2 {font-size:12px}
}

 

이와같은 방법을 통해 아주 미세한 부분을 제외하고서는 그나마 유사한 결과물이 나왔습니다.

헌데 구글링을 통해 얻은 지식으로 다음과 같은 세가지 방법을 얻을 수 있었습니다.

 

http://www.erzsamatory.net/86

1) 위 블로그에서 언급한 자바스크립트로 좌우 크기를 검색하여 이에 자동으로 리사이징함 

결과 : 저의 경우 css의 @media를 전부 없애고 

.header-slider-bg {z-index:1;padding:110px 0;position:relative;overflow:hidden;height:600px;}
.header-slider-bg:after {position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;}

 

해당 두 줄만 남기고 테스트 해 보았습니다.

 

이미지가 사라지더군요.

문제에 대해 디버깅은 해보지 않았습니다. 

약간의 문제만 보였다면 손을 대봤을 텐데.. 느낌상 손을 많이봐야 할것 같다는 생각에 일찍 포기했습니다.

 

 http://maczniak.github.io/bootstrap/scaffolding.html

2) 해당 사이트에서 제공하는 반응형 @media 사용방법

1. /* 큰 데스크탑 */
2. @media (min-width: 1200px) { ... }
3.  
4. /* 세로 방향 타블렛부터 가로 방향 타블렛과 데스크탑까지 */
5. @media (min-width: 768px) and (max-width: 979px) { ... }
6.  
7. /* 가로 방향 전화기부터 세로 방향 타블렛까지 */
8. @media (max-width: 767px) { ... }
9.  
10. /* 가로 방향 전화기 이하 */
11. @media (max-width: 480px) { ... }

 

3)  동일한 사이트에서 제공하는 반응형 도움 클래스 사용방법

 responsive.less 안의 설정값 사용

 

 

결국 저는 2번째 방법을 사용하고자 했으나, 탭과 핸드폰의 가로모드에서 각각 결과가 기존 이윰에서

설정된 @media로는 결과가 이상하게 나와 나름 수정한다는게 야매가 된것 같네요

 

img {position:absolute;top:0;left:50%;margin-left:-840px}

위 값에서 보면 1680의 1/2만큼 margin-left하면 되는 경우는 pc의 1980 한단계 위, 아래 해상도 말고는 

틀어지더군요

 

그 외의 경우는 하나하나 px를 맞춰줘야 했습니다 ㅠㅠ

 

혹시 자바스크랩트로 리사이징 자동화나 아니면 더 좋은 방법을 사용하신분이 있으신지 알고싶네요

이 글로 올바른 방법이 나온다면 스터디 게시판으로 정리하여 옮겨지면 좋을것 같습니다 ^^