[Front-end] #7.5 tablet layout / 반응형 web

#6.5-1 에 한번에 쓰려고 했는데 생각보다 스마트폰 레이아웃 구현에서 새로 알게된 내용이 많아서 글이 너무 길어져서 태블릿 클론으로 분리하고, 프로젝트 하나인 반응형 웹까지 같이 담았다.

1. tablet layout

1-1. 태블릿 클론 1

소스코드

1. header > nav가 width가 줄어들어도 btn6, 7이 밑으로 밀리지 않고 그냥 오른쪽으로 사라지게.

/* 최소 너비를 줘서 해결. */
body {
    min-width: 1000px;
}

나는 처음에 nav li 사이즈를 12.5%로 줄여서 모든 버튼이 width가 줄어도 화면에 나타나도록 구현했었는데, 화면 크기가 작은 탭으로 접속한다면 버튼이 너무 답답할 수 있다는 문제가 있다.

2. 왼쪽 nav의 height가 조정이 안됨.

1. nav 말고 main 에 배경색을 주자.

main {
    background-color: #A36AAA;;
}

<main>
    <section class="lnb">
        <nav>
            <ul>
                <li><a href="">Btn1</a></li>
		(중간은 생략 .,..)
                <li><a href="">Btn7</a></li>
             </ul>
         </nav>
     </section>

3. 왼쪽 nav 크기를 태블릿 크기에 상관 없이 고정하는 방법.

내용이 들어가는 부분을 100% 로 준 뒤, nav 크기 만큼 margin-right를 주자. 내용에는 padding-right 를 nav 크기보다 약간 크게 주자.

.lnb { /* 왼쪽 nav */
    width: 200px;
}
.content { /* 내용이 들어가는 부분 */
    width: 100%;
    margin-right: -200px;
}
.content article { /* 내용 안의 글 하나하나 */
    padding-right: -220px;
}

1-2. 태블릿 클론 2 - 고정바

소스코드

고정바는 position: fixed; 를 이용해서 만들었다. 왼쪽, 오른쪽 영역을 top, bottom을 모두 묶어주니 위의 2번처럼 nav 높이만큼만 background-color가 적용되는 문제가 발생하지 않았다.

1. 가운데 영역이 스크롤 시 뚫고 나와버림...

가운데 영역(main) 을 position: absolute; 를 이용해서 묶어서 발생하는 문제였다. margin을 해결하는 방법으로 해결할 수 있었다.

main {
    margin: 50px 15% 60px 15%; /* 내가 상 우 하 좌 높이, 너비 값으로 사용한 값 */
}

2. body에만 min-width를 주면 header에는 min-width가 적용이 안되고 블럭으로 내려가버리는 이유

혼자서는 도저히 찾을수가 없어서 질문했는데, header를 fixed top:0 left:0 right:0 로 고정했기 때문에 부모의 min-width는 무시된다고 한다!! 그래서 header에 직접 min-width를 줘야하는 것!

2. 반응형 웹

여러 종류의 기기에 맞춘 화면을 보여주는 반응형 웹.

소스코드 html, css

화면 너비에 따라 다른 기기로 간주하고, 각 화면에 맞추어 대응해야하는 태그들을 아래에 대응한다.

@media screen and (min-wdth: 960px)
@media screen and (max-width: 959px) and (min-wdth: 760px)
@media screen and (max-wdth: 759px)

/* computer screen */
@media screen and (min-width: 960px) {
    body {
        width: 1000px;
        margin: 10px auto;
    }
    .nav-menu .list-menuNav .link-nav {
        padding: 20px 70px;
    }
}

/* tablet */
@media screen and (min-width: 767px) and (max-wdth: 959px) {
    body {
        width: 100%;
    }
    main {
        font-size: 1.5em;
    }
    .nav-menu .list-menuNav .link-nav {
        padding: 20px;
    }
}

/* smart phone */
@media screen and (max-width: 766px) {
    body {
        width: 100%;
    }
    main {
        font-size: 1em;
    }
    .nav-menu .list-menuNav .link-nav {
        padding: 20px 10px;
    }
}

3. 느낀점

• 세로 중앙 정렬을 할 때, line-height와 padding 중 어느게 더 적합한 방법인지 궁금하다. -> 글자에는 line-height를 적용하는게 더 좋다.

• 요즘은 태블릿 기기도 width: 100% 로 주는 점을 제외하면, 컴퓨터와 같은 페이지를 보여주는 경우가 많은 것 같다. 태블릿만을 위한 페이지 대응은 거의 필요가 없지 않을까? 하는 생각을 했다. 사용해보면서 사용성이 제일 떨어졌던건, 모바일에서 커다란 데스크탑 화면이 뜨는 것보다 데스크탑에서 모바일 UI가 뜰 때 였다. 데스크탑 사이즈의 페이지를 잘 대응하는게 제일 중요한 것 같다.

• 반응형 웹을 위의 방법처럼 처리하는 점은, 기기에 따른 대응보다는 웹 페이지에서 멀티태스킹을 위해 화면 분할을 해서 쓸 때 더 유용할 것 같다. 화면이 복잡해지면 단순히 줄이는 것만으로는 편리한 사용성을 기대할 수 없을듯... 기업들에서 m.주소 mobile.주소 로 아예 모바일 기기용 url을 따로 만드는 이유가 있는 것 같다.