웹페이지 레이아웃 실습

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			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

Tags more

Archives

Today

Total

관리 메뉴

codingfarm

웹페이지 레이아웃 실습 본문

web/CSS3

웹페이지 레이아웃 실습

scarecrow1992 2020. 10. 4. 10:51

위와 같은 형태의 웹페이지를 만드려 한다.

우선 레이아웃을 대략적으로 만들어보자.

위 레이아웃과 같은 형태의 웹페이지를 만든다

기본적인 구조는 아래와 같다

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

<!doctype html>
<html>
    <body>
        <!--1행-->
        <header>
            <nav></nav>
            <nav></nav>
        </header>
 
        <!--2행-->
        <div id="content">
            <section></section>
            <aside></aside>
        </div>
 
        <!--3행-->
        <footer></footer>
    </body> 
</html>

cs

header

일단 header부터 작성해보겠다.

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
92
93
94
95
96
97
98
99
100

<head>
    <!-- 초기화 -->
    <link href="http://fonts.googleapis.com/css?family=Henny+Penny" rel="stylesheet" type="text/css" />
    <!-- 초기화 -->
    <style>
        * { margin: 0; padding: 0; }
        body { font-family: 'Times New Roman', serif; }
        li { list-style: none; }
        a { text-decoration: none; }
        img { border: 0; }
    </style>
    <!-- 헤더 -->
    <style>
        #main_header {
            /* 중앙 정렬*/
            width: 960px; margin: 0 auto;
 
            /* 절대 좌표 */
            height: 160px;
            position: relative;
        }
        #main_header > #title {
            position: absolute;
            left: 20px; top: 30px;
        }
        #main_header > #main_gnb {
            position: absolute;
            right: 0; top: 0;
        }
        #main_header > #main_lnb {
            position: absolute;
            right: 0; bottom: 10px;
        }
    </style>
    <!-- 타이틀 -->
    <style>
        #title {
            font-family: 'Henny Penny', cursive; 
        }
    </style>
    <!-- 메뉴(1) -->
    <style>
        #main_gnb > ul { overflow: hidden; }
        #main_gnb > ul > li { float: left; }
        #main_gnb > ul > li > a {
            display: block;
            padding: 2px 10px;
            border: 1px solid black;
        }
        #main_gnb > ul > li > a:hover {
            background: black;
            color: white;
        }
        #main_gnb > ul > li:first-child > a { border-radius: 10px 0 0 10px; }
        #main_gnb > ul > li:last-child > a  { border-radius: 0 10px 10px 0; }
    </style>
    <!-- 메뉴(2) -->
    <style>
        #main_lnb > ul { overflow: hidden; }
        #main_lnb > ul > li { float: left; }
        #main_lnb > ul > li > a {
            display: block;
            padding: 10px 20px;
            border: 1px solid black;
        }
        #main_lnb > ul > li > a:hover {
            background: black;
            color: white;
        }
        #main_lnb > ul > li:first-child > a { border-radius: 10px 0 0 10px; }
        #main_lnb > ul > li:last-child > a  { border-radius: 0 10px 10px 0; }
    </style>
</head>
 
<body>
    <header id="main_header">
        <div id="title">
            <h1>Rint Development</h1>
            <h2>HTML5 + CSS3 Basic</h2>
        </div>
        <nav id="main_gnb">
            <ul>
                <li><a href="#">Web</a></li>
                <li><a href="#">Mobile</a></li>
                <li><a href="#">Game</a></li>
                <li><a href="#">Simulation</a></li>
                <li><a href="#">Data</a></li>
            </ul>
        </nav>
        <nav id="main_lnb">
            <ul>
                <li><a href="#">HTML5</a></li>
                <li><a href="#">CSS3</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">Node.js</a></li>
            </ul>
        </nav>
    </header>
</body>
Colored by Color Scripter

cs

main_header에는 하위 태그들을 모두 포함할 수 있을 정도의 너비와 높이를 적용했다.

그리고 하위태그들이 절대좌표를 사용했으므로 상대좌표를 사용한다.

title과 main_gnb, main_lnb에 절대좌표를 적용하여 기획했던곳에 위치시켰다.

main_gnb와 main_lnb의 하위에 있는 각 li 태그들의 float속성에 left를 적용하여 일렬로 정렬되게끔했다.

li의 float속성에 left를 적용했으므로 상위 태그인 ul의 overflow에는 hidden을 적용했다.

그리고 스위치 위에 마우스가 올라갔을때 버튼의 색을 다르게 만들기 위해서 a 태그의 hover클래스 내부에 배경색과 글자색을 설정하였다.

content

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192

<head>
    <style>
        #content {
            /* 중앙 정렬 */
            width: 960px; margin: 0 auto;
 
            /* 수평 레이아웃 구성 */
            overflow: hidden;
        }
        #content > #main_section {
            width: 750px;
            float: left;
        }
        #content > #main_aside {
            width: 200px;
            float: right;
        }
    </style>
    <!-- 본문 -->
    <style>
        #main_section > article.main_article {
            margin-bottom: 10px;
            padding: 20px;
            border: 1px solid black;
        }
    </style>
    <!-- 사이드 -->
    <style>
        /* 첫 번째 탭 */
        input:nth-of-type(1) { display: none; }
        input:nth-of-type(1) ~ div:nth-of-type(1) { display: none; }
        input:nth-of-type(1):checked ~ div:nth-of-type(1) { display: block; }
 
        /* 두 번째 탭 */
        input:nth-of-type(2) { display: none; }
        input:nth-of-type(2) ~ div:nth-of-type(2) { display: none; }
        input:nth-of-type(2):checked ~ div:nth-of-type(2) { display: block; }
 
        /* 탭 모양 구성 */
        section.buttons { overflow: hidden; }
        section.buttons > label { 
            /* 수평 정렬 */
            display: block; float: left;
 
            /* 크기 및 글자 위치 지정*/
            width: 100px; height: 30px;
            line-height: 30px;
            text-align: center;
 
            /* 테두리 지정 */
            box-sizing: border-box;
            border: 1px solid black;
 
            /* 색상 지정*/
            background: black;
            color: white;
        }
        input:nth-of-type(1):checked ~ section.buttons >  label:nth-of-type(1) {
            background: white;
            color: black;
        }
        input:nth-of-type(2):checked ~ section.buttons >  label:nth-of-type(2) {
            background: white;
            color: black;
        }
    </style>
    <!-- 목록 -->
    <style>
        .item {
            overflow: hidden;
            padding: 10px;
            border: 1px solid black;
            border-top: none;
        }
        .thumbnail {
            float: left;
        }
        .description {
            float: left;
            margin-left: 10px;
        }
        .description > strong {
            display: block;
            width: 120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
 
 
 
<body>
    <div id="content">
        <section id="main_section">
            <article class="main_article">
                <h1>Main Article</h1>
                <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>
            <article class="main_article">
                <h1>Main Article</h1>
                <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>
            <article class="main_article">
                <h1>Main Article</h1>
                <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>
        <aside id="main_aside">
            <input id="first" type="radio" name="tab" checked="checked" />
            <input id="second" type="radio" name="tab" />
            <section class="buttons">
                <label for="first">First</label>
                <label for="second">Second</label>
            </section>
            <div class="tab_item">
                <ul>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>HTML5 Canvas</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>HTML5 Audio</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>HTML5 Video</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>HTML5 Semantic Web</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                </ul>
            </div>
            <div class="tab_item">
                <ul>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>CSS3 Transition</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>CSS3 Animation</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>CSS3 Border</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>CSS3 Box</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                </ul>
            </div>
        </aside>
    </div>
</body>
 
Colored by Color Scripter

cs

좌측의 main_section과 우측의 main_aside 2개 레이아웃으로 나뉜다.

각각의 float속성에 left와 right를 적용하여 content레이아웃에서 양쪽으로 붙도록 하였다

좌측 main_section 레이아웃은 눈여겨 볼만한게 없다.

box 속성을 이용하여 각 main_article간의 레이아웃을 만든것을 볼 수 잇다.

margin-bottom에 px값을 주어서 상하로 간격을 띄우게 만들었으며

padding 속성으로 내용물들과 경계선사이에 틈을 만들었다.

여기서 주목할 부분은 우측의 main_aside 레이아웃이다.

상단에 first와 second 별도의 버튼이 있으며 활성화시 흰색으로, 비활성화시 검은색으로 바뀐다.

114,115 : 버튼이 아니라 문자열을 클릭해도 반응하게끔 하기 위해 label 기능으로 버튼과 문자열을 묶어주었다.

30~37 : 실제 버튼이 보이지 않게끔 input 태그의 display 속성을 none으로 설정하였다. 이때 평소상태과 checked상태 2가지 모두 다 none으로 설정해주어야 한다. 또한 실제 내용이 포함된 div태그 또한 input의 상태에 따라 display상태를 none과 block 로 표시되게끔 하였다.

41~65 : 선택 및 미선택 상태에 따라 다른 효과를 주도록 하고 자체레이아웃을 지정하였다.

87 : 글의 내용이 레이아웃을 벗어나면 줄여서 표시되게끔 설정하였다,