모바일 웹페이지 실습

본문 바로가기

Notice

Recent Posts

Recent Comments

Link

책

Tags more

Archives

Today

Total

관리 메뉴

codingfarm

모바일 웹페이지 실습 본문

web/HTML5

모바일 웹페이지 실습

scarecrow1992 2020. 11. 11. 22:09

우측 상단의 $\equiv$ 버튼을 누르면 숨겨진 버튼이 나온다.

header_background.png

header_left_button.png

header_right_button.png

<!DOCTYPE html>
<html>
<head>
    <title>Chapter 6</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimun-scale=1.0, user-scalable=no" />
    <!-- 초기화 -->
    <style>
        * { margin: 0; padding: 0; }
        body { font-family: 'Helvetica', sans-serif; }
        li { list-style: none; }
        a { text-decoration: none; }
    </style>
    <!-- 헤더 -->
    <style>
        #main_header {
            /* 배경 지정 */
            height: 45px;
            background: url('header_background.png');
            
            /* 자손 위치 지정 */
            position: relative;
            text-align: center;
            line-height: 45px;
        }
        #main_header > h1 {
            color: white;
        }
        #main_header > a, #main_header > label {
            display: block;
            height: 32px;
            position: absolute;
        }
        #main_header > a.left {
            width: 62px;
            left: 5px; top: 7px;
        }
        #main_header > label.right {
            width: 32px;
            right: 5px; top: 7px;
        }
    </style>
    <!-- 스프라이트 이미지 -->
    <style>
        #main_header > a.left {
            background: url('sprites.png');
            background-position: 0px 0px;
            text-indent: -99999px ;
        }
        #main_header > label.right {
            background: url('sprites.png');
            background-position: -62px 0px;
            text-indent: -99999px;
        }
    </style>
    <!-- 토글 목록 -->
    <style>
        /* 토글 구현 */
        #toggle { display: none; }
        #toggle + #wrap > #toggle_gnb_wrap { display: none; }
        #toggle:checked + #wrap > #toggle_gnb_wrap { display: block; }

        /* 레이아웃 색상 */
        #toggle_gnb_wrap {
            background: #363636;
            padding: 15px;
        }
        #toggle_gnb {
            background: #FFFFFF;
            padding: 5px;
        }

        /* 토글 목록 */
        #toggle_gnb > ul { overflow: hidden; }
        #toggle_gnb > ul > li {
            width: 80px; float: left;
        }
    </style>
    <!-- 네비게이션(1) -->
    <style>
        #top_gnb {
            overflow: hidden;
            border-bottom: 1px solid black;
            background: #B42111;
        }
        #top_gnb > div > a {
            /* 수평 정렬 */
            float: left; width: 25%;

            /* 크기 및 색상, 정렬 */
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: white;
        }
    </style>
    <!-- 네비게이션(2) -->
    <style>
        #bottom_gnb {
            display: table;
            width: 100%;
            border-bottom: 1px solid black;
        }
        #bottom_gnb > div {
            display: table-cell;
            position: relative;
        }
        #bottom_gnb > div > a {
            display: block;
            height: 35px;
            line-height: 35px;
            text-align: center;
        }
        #bottom_gnb > div > a::before {
            display: block;
            position: absolute;
            top: 9px; left: -1px;
            width: 1px; height: 15px;
            border-left: 1px solid black;
            content: '';
        }
    </style>
    <!-- 본문 -->
    <style>
        #section_header { padding: 20px; }
        #section_article { padding: 10px; }
    </style>
    <!-- 푸터 -->
    <style>
        #main_footer {
            padding: 10px;
            border-top: 3px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <input id="toggle" type="checkbox" />
    <div id="wrap">
        <header id="main_header">
            <a class="left" href="#">Main</a>
            <h1>Mobile</h1>
            <label class="right" for="toggle" onclick="">Toggle</label>
        </header>
        <div id="toggle_gnb_wrap">
            <div id="toggle_gnb">
                <ul>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                </ul>
            </div>
        </div>
        <nav id="top_gnb">
            <div><a href="#">버튼</a></div>
            <div><a href="#">버튼</a></div>
            <div><a href="#">버튼</a></div>
            <div><a href="#">버튼</a></div>
        </nav>
        <nav id="bottom_gnb">
            <div><a href="#">버튼</a></div>
            <div><a href="#">버튼</a></div>
            <div><a href="#">버튼</a></div>
            <div><a href="#">버튼</a></div>
            <div><a href="#">버튼</a></div>
        </nav>
        <section id="main_section">
            <header id="section_header">
                <h1>Lorem ipsum</h1>
                <time>2012-12-09 - Birthday</time>
            </header>
            <article id="section_article">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
                <br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
                <br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
            </article>
        </section>
        <footer id="main_footer">
            <h3>HTML5 + CSS3 Basic</h3>
            <address>Website Layout Basic</address>
        </footer>
    </div>
</body>
</html>

레이아웃

toggle_gnb 레이아웃은 main_header의 right버튼을 누르는것으로 토글 가능하다.

main_header + toggle_gnb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<head>
    <!-- 헤더 -->
    <style>
        #main_header {
            /* 배경 지정 */
            height: 45px;
            background: url('header_background.png');
            
            /* 자손 위치 지정 */
            position: relative;
            text-align: center;
            line-height: 45px;
        }
        #main_header > h1 {
            color: white;
        }
        #main_header > a, #main_header > label {
            display: block;
            height: 32px;
            position: absolute;
        }
        #main_header > a.left {
            width: 62px;
            left: 5px; top: 7px;
        }
        #main_header > label.right {
            width: 32px;
            right: 5px; top: 7px;
        }
    </style>
    <!-- 스프라이트 이미지 -->
    <style>
        #main_header > a.left {
            background: url('sprites.png');
            background-position: 0px 0px;
            text-indent: -99999px ;
        }
        #main_header > label.right {
            background: url('sprites.png');
            background-position: -62px 0px;
            text-indent: -99999px;
        }
    </style>
    <!-- 토글 목록 -->
    <style>
        /* 토글 구현 */
        #toggle { display: none; }
        #toggle + #wrap > #toggle_gnb_wrap { display: none; }
        #toggle:checked + #wrap > #toggle_gnb_wrap { display: block; }
 
        /* 레이아웃 색상 */
        #toggle_gnb_wrap {
            background: #363636;
            padding: 15px;
        }
        #toggle_gnb {
            background: #FFFFFF;
            padding: 5px;
        }
 
        /* 토글 목록 */
        #toggle_gnb > ul { overflow: hidden; }
        #toggle_gnb > ul > li {
            width: 80px; float: left;
        }
    </style>
</head>
 
<body>
    <input id="toggle" type="checkbox" />
    <div id="wrap">
        <header id="main_header">
            <a class="left" href="#">Main</a>
            <h1>Mobile</h1>
            <label class="right" for="toggle" onclick="">Toggle</label>
        </header>
        <div id="toggle_gnb_wrap">
            <div id="toggle_gnb">
                <ul>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                    <li><a href="#">버튼</a></li>
                </ul>
            </div>
        </div>
</body>
Colored by Color Scripter

cs

 

22, 26번째 줄에서 height를 7px로 width를 각각 62px, 32px로 지정했다.
33, 38번째 줄에서 똑같은 이미지를 설정했다. sprites 이미지의 형태는 아래와 같다.

좌측상단과 우측상단에 쓰일 버튼이 한 이미지에 들어있으므로 background-position에 값을 넣어서 이미지를 이동시키는 방식으로 표현한다.
text-indent에 극단적인 값을 넣어서 웹페이지에서 텍스트를 안보이게 만든다.

75에서 right 클래스를 70의 toggle input에 라벨링하여 해당 블럭을 누를때마다 체크박스가 반응하게끔 하였다.
47~49에서 toggle이 일어날때마다 toggle_gnb_wrap이 표시되고 가려지게끔 설정했다.

top_gnb + bottom_gnb

이곳의 레이아웃은 화면의 폭을 기준으로 정확히 1/4씩 등분되어있다.
구현하는 방법은 크게 2가지로 나뉜다.

1. overflow속성과 float 속성을 이용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!-- 네비게이션(1) -->
<style>
    #top_gnb {
        overflow: hidden;
        border-bottom: 1px solid black;
        background: #B42111;
    }
    #top_gnb > div > a {
        /* 수평 정렬 */
        float: left; width: 25%;
 
        /* 크기 및 색상, 정렬 */
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: white;
    }
</style>
Colored by Color Scripter

cs

overflow에 hidden을 주고 floa에 left를 줘서 목록을 수평정렬 한다.
width에 25%을 주면 화면을 기준으로 레이아웃이 4등분 된다.
꾸미기 위한 나머지 작업을 한다.

2. display 속성에 table 키워드를 적용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- 네비게이션(2) -->
<style>
    #bottom_gnb {
        display: table;
        width: 100%;
        border-bottom: 1px solid black;
    }
    #bottom_gnb > div {
        display: table-cell;
        position: relative;
    }
    #bottom_gnb > div > a {
        display: block;
        height: 35px;
        line-height: 35px;
        text-align: center;
    }
    #bottom_gnb > div > a::before {
        display: block;
        position: absolute;
        top: 9px; left: -1px;
        width: 1px; height: 15px;
        border-left: 1px solid black;
        content: '';
    }
</style>
Colored by Color Scripter

cs

#bottom_gnb에서 display를 table로 설정한다. (table 태그와 같은 레이아웃을 가짐)
#bottom_gnb > div 에서 display를 table-cell로 설정한다. (td 태그와 같은 레이아웃을 가짐)

여기까지 하면 레이아웃이 성공적으로 분리됨을 볼 수 있다.

::before 선택자로 스타일을 추가한다.
각 버튼 사이에 수직선을 추가하기 위함인데 before 선택자를 통해 첫번째 레이아웃의 왼쪽에만 수직선이 없도록 하였다.

section과 footer

설명 생략

저작자표시

'web > HTML5' 카테고리의 다른 글

고정바 (0)	2020.11.15
주요 태그 정리 (0)	2020.11.11
meta 태그 (0)	2020.11.11
스마트폰 웹페이지 (0)	2020.11.11
semantic (0)	2020.10.01

'web/HTML5' Related Articles

more

Comments

티스토리툴바