[CSS] 실전 웹 페이지 제작
여기서는 웹 페이지의 기본적인 레이아웃을 구성하는 방법을 단계별로 안내합니다. `index.html` 파일을 직접 만들어가며 각 섹션(Header, Navigation, Content, Footer)을 완성하게 됩니다.
Posted 
By
23 min read
[CSS] 실전 웹 페이지 제작
Foodlog 웹 페이지 만들기 실습
이 저장소는 HTML과 CSS를 사용하여 “Foodlog”라는 간단한 음식 블로그 형태의 웹 페이지를 만드는 실습 교안입니다. 단계별 지침에 따라 파일 구조를 설정하고, 코드를 작성하며 하나의 완성된 웹 페이지를 만들어 보세요.
학습 목표
- HTML로 웹 페이지의 기본 구조를 설계할 수 있습니다.
- CSS를 사용하여 웹 페이지의 디자인과 레이아웃을 구성할 수 있습니다.
- CSS Reset의 필요성을 이해하고 적용할 수 있습니다.
- 웹 페이지의 일반적인 폴더 구조(assets)를 이해하고 활용할 수 있습니다.
#01. 프로젝트 준비 및 기본 레이아웃 구성
웹 페이지 제작의 첫 단계는 프로젝트 폴더와 기본 파일들을 생성하는 것입니다. 이 단계에서는 전체 페이지의 기본 틀을 잡고, 모든 브라우저에서 일관된 스타일을 보여주기 위한 준비 작업을 진행합니다.
1. 폴더 및 파일 구조 생성하기
먼저, 프로젝트를 진행할 폴더를 생성하고 그 안에 다음과 같이 index.html 파일과 assets 폴더를 만듭니다. assets 폴더는 웹 페이지에 필요한 리소스(CSS, 이미지, JavaScript 등)를 체계적으로 관리하기 위한 공간입니다.
1
2
3
4
5
/19-Demo-Foodlog
|-- /assets
| |-- /css
| |-- /img
|-- index.html
assets/css: CSS 스타일시트 파일을 저장합니다.assets/img: 웹 페이지에 사용될 이미지 파일을 저장합니다.index.html: 웹 페이지의 내용을 담을 기본 HTML 파일입니다.
💡 JS 폴더에 대하여 보통
assets폴더 안에는 JavaScript 파일을 위한js폴더도 함께 만듭니다. 하지만 이 실습은 HTML과 CSS에 집중하므로js폴더는 다루지 않습니다.
2. CSS Reset 적용하기
브라우저마다 기본적으로 적용하는 스타일이 다르기 때문에, 우리가 작성한 CSS가 모든 브라우저에서 동일하게 보이도록 기본 스타일을 초기화하는 과정이 필요합니다. 이를 CSS Reset이라고 합니다.
여기서는 Eric Meyer’s Reset CSS를 사용합니다. 아래 코드를 복사하여 assets/css/ 폴더 안에 reset.css라는 이름의 파일을 만들고 붙여넣으세요.
아래 코드는 https://meyerweb.com/eric/tools/css/reset/ 에서 가져왔습니다.
실습: assets/css/reset.css 작성
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
/**
* http://meyerweb.com/eric/tools/css/reset/
* v2.0 | 20110126
* License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
/* 아이콘 폰트가 적용안되는 문제가 있기 때문에 제거함 */
/* font: inherit; */
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
3. 공통 스타일 및 페이지별 스타일 파일 생성
모든 페이지에 공통으로 적용될 스타일과 특정 페이지에만 적용될 스타일을 분리하여 관리하면 유지보수가 편리해집니다. assets/css/ 폴더에 common.css와 index.css 두 개의 빈 파일을 추가로 생성합니다.
common.css: 헤더, 푸터 등 여러 페이지에서 공통으로 사용될 스타일을 정의합니다.index.css: 메인 페이지 전용 스타일을 정의합니다.
이제 common.css 파일에 모든 페이지의 기본이 될 스타일을 작성합니다.
실습: assets/css/common.css 작성
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
/** 모든 페이지에서 사용될 공통적인 내용을 정의 */
/*-------------------------------------------------
* 공통
*-------------------------------------------------*/
* {
font-family: "Noto Sans KR";
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
/* header, main, footer 영역 안에서 내용의 넓이를 제한하는 박스 */
.content-container {
max-width: 1200px;
margin: auto;
/** 작업하는 동안의 임시 적용 */
background-color: #0002;
font-size: 24px;
padding: 25px;
}
/*-------------------------------------------------
* 상단 영역
*-------------------------------------------------*/
.header {
/** 작업하는 동안의 임시 적용 */
background-color: #f063;
}
/*-------------------------------------------------
* 내용 영역
*-------------------------------------------------*/
.main {
/** 작업하는 동안의 임시 적용 */
background-color: #f603;
}
/*-------------------------------------------------
* 하단 영역
*-------------------------------------------------*/
.footer {
/** 작업하는 동안의 임시 적용 */
background-color: #06f3;
}
4. 기본 HTML 구조 작성
이제 index.html 파일에 웹 페이지의 기본 구조를 작성합니다. <head> 태그 안에는 우리가 만든 CSS 파일들을 연결하고, 웹 폰트(Noto Sans KR)와 아이콘 폰트(Font Awesome)를 불러오는 코드를 추가합니다. <body> 태그 안에는 페이지의 전체적인 레이아웃(header, main, footer)을 구성합니다.
여기서 <head></head> 태그의 맨 마지막 라인에서 연결하는 index.css 파일은 아직 작성하지 않았지만, 나중에 메인 페이지 전용 스타일을 추가할 때 사용할 예정이므로 미리 연결해 둡니다.
실습: index.html 작성
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
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FoodBlog</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<link rel="stylesheet" href="assets/css/reset.css" />
<link rel="stylesheet" href="assets/css/common.css" />
<link rel="stylesheet" href="assets/css/index.css" />
</head>
<body>
<div class="container">
<!-- 상단영역 -->
<header class="header">
<div class="content-container">
header
</div>
</header>
<!-- 메인영역 -->
<div class="main">
<div class="content-container">
main
</div>
</div>
<!-- 하단영역 -->
<footer class="footer">
<div class="content-container">
footer
</div>
</footer>
</div>
</body>
</html>
여기까지 완료했다면, index.html 파일을 브라우저에서 열어보세요. 화면에 “header”, “main”, “footer” 텍스트와 함께 각 영역에 임시로 적용된 배경색이 나타나면 성공입니다.
#02. Header와 Footer 영역 꾸미기
이제 페이지의 상단(Header)과 하단(Footer) 영역을 디자인합니다. Header에는 사이트 로고와 메뉴 버튼을, Footer에는 사이트 정보, 관련 글, 태그 등을 배치합니다.
1. Header와 Footer HTML 구조 수정
index.html 파일의 <header>와 <footer> 영역을 아래와 같이 수정합니다. Header에는 아이콘 버튼과 로고를, Footer에는 세 개의 정보 영역을 추가합니다.
실습: index.html 수정
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
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FoodBlog</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<link rel="stylesheet" href="assets/css/reset.css" />
<link rel="stylesheet" href="assets/css/common.css" />
<link rel="stylesheet" href="assets/css/index.css" />
</head>
<body>
<div class="container">
<!-- 상단영역 -->
<header class="header">
<div class="content-container">
<!-- 좌측 햄버거 버튼 -->
<a href="#" class="icon-button left">
<i class="fa-solid fa-bars"></i>
</a>
<!-- 중앙 로고 -->
<h1 class="logo">My Food</h1>
<!-- 우측 메일 버튼 -->
<a href="#" class="icon-button right">
<i class="fa-solid fa-envelope"></i>
</a>
</div>
</header>
<!-- 메인영역 -->
<div class="main">
<div class="content-container">
main
</div>
</div>
<!-- 하단영역 -->
<footer class="footer">
<div class="content-container">
<div class="footer-item">
<h3>FOOTER</h3>
<p>
Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
porta lectus vitae, ultricies congue gravida diam non fringilla.
Powered by megastudy-id-academy
</p>
</div>
<div class="footer-item">
<h3>BLOG POSTS</h3>
<ul class="blog-posts">
<li>
<a href="#">
<img src="assets/img/workshop.jpg" />
<div class="text-box">
<h4 class="blog-post-title">Lorem</h4>
<p class="blog-post-content">Sed mattis nunc Sed mattis nunc Sed mattis nunc</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="assets/img/gondol.jpg" />
<div class="text-box">
<h4 class="blog-post-title">Lorem</h4>
<p class="blog-post-content">Sed mattis nunc Sed mattis nunc Sed mattis nunc</p>
</div>
</a>
</li>
</ul>
</div>
<div class="footer-item">
<h3>POPULAR TAGS</h3>
<ul class="tags">
<li class="black">Travel</li>
<li>New York</li>
<li>Dinner</li>
<li>Salmon</li>
<li>France</li>
<li>Drinks</li>
<li>Ideas</li>
<li>Flavors</li>
<li>Cuisine</li>
<li>Chicken</li>
<li>Dressing</li>
<li>Fried</li>
<li>Fish</li>
<li>Duck</li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>
⚠️ 이미지 파일 준비 Footer에 사용된
workshop.jpg와gondol.jpg이미지는 제공된step2-header,footer/assets/img폴더에서 복사하여 여러분의assets/img폴더에 넣어주세요.
2. Header와 Footer CSS 스타일 적용
이제 common.css 파일을 수정하여 Header와 Footer의 디자인을 완성합니다. Header는 화면 상단에 고정시키고, Footer는 3단 레이아웃으로 구성합니다. 이전 단계에서 임시로 넣었던 배경색은 제거하거나 주석 처리합니다.
실습: assets/css/common.css 수정
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
/** 모든 페이지에서 사용될 공통적인 내용을 정의 */
/*-------------------------------------------------
* 공통
*-------------------------------------------------*/
* {
font-family: "Noto Sans KR";
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
/* header, main, footer 영역 안에서 내용의 넓이를 제한하는 박스 */
.content-container {
max-width: 1200px;
margin: auto;
/* 임시 스타일 제거 */
}
/*-------------------------------------------------
* 상단 영역
*-------------------------------------------------*/
.header {
box-shadow: 0 1px 3px #0003; /* 그림자 */
position: fixed; /* 상단 고정 */
left: 0;
top: 0;
width: 100%;
z-index: 9000;
background-color: #fff; /* 배경색 흰색 처리 */
.content-container {
display: flex;
justify-content: space-between;
.icon-button {
font-size: 24px;
font-weight: 900;
padding: 16px;
}
.icon-button:hover {
background-color: #dddddd;
color: #ffffff;
}
.logo {
font-size: 26px;
font-weight: 600;
display: flex;
align-items: center;
}
}
}
/*-------------------------------------------------
* 내용 영역
*-------------------------------------------------*/
.main {
/* 상단바에 가려지는 만큼 여백 확보 */
padding-top: 57px;
}
/*-------------------------------------------------
* 하단 영역
*-------------------------------------------------*/
.footer {
border-top: 1px solid #dddddd; /* 상단 테두리 */
.content-container {
display: flex;
.footer-item {
flex: 1; /* 동일한 비율로 공간 분할 */
padding: 15px;
h3 {
font-size: 24px;
font-weight: 700px;
margin: 22px 0;
text-transform: uppercase;
}
&:nth-child(1) p {
font-size: 15px;
line-height: 150%;
font-weight: 300;
}
&:nth-child(2) a {
display: flex;
margin: 20px 0;
padding: 0 10px;
img {
width: 65px;
height: 65px;
object-fit: cover;
margin-right: 10px;
}
.blog-post-title {
font-weight: bold;
margin-bottom: 5px;
font-size: 15px;
}
.blog-post-content {
line-height: 1.2;
}
}
&:nth-child(3) .tags li {
display: inline-block;
background-color: #616161;
color: #ffffff;
padding: 5px 10px;
margin-bottom: 8px;
font-size: 13px;
&.black {
background-color: #000000;
}
}
}
}
}
#03. Main 콘텐츠 영역 구성하기
마지막으로 페이지의 핵심 콘텐츠인 Main 영역을 채웁니다. 음식 사진 갤러리, 페이지 번호, 쉐프 소개 섹션을 추가하여 페이지를 완성합니다.
1. Main 영역 HTML 구조 추가
index.html의 <div class="main"> 내부를 아래와 같이 수정합니다. 음식 갤러리, 페이지 번호, 쉐프 소개에 대한 HTML 구조를 추가합니다.
실습: index.html 최종 수정
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FoodBlog</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<link rel="stylesheet" href="assets/css/reset.css" />
<link rel="stylesheet" href="assets/css/common.css" />
<link rel="stylesheet" href="assets/css/index.css" />
</head>
<body>
<div class="container">
<!-- 상단영역 -->
<header class="header">
<div class="content-container">
<!-- 좌측 햄버거 버튼 -->
<a href="#" class="icon-button left">
<i class="fa-solid fa-bars"></i>
</a>
<!-- 중앙 로고 -->
<h1 class="logo">My Food</h1>
<!-- 우측 메일 버튼 -->
<a href="#" class="icon-button right">
<i class="fa-solid fa-envelope"></i>
</a>
</div>
</header>
<!-- 메인영역 -->
<div class="main">
<div class="content-container">
<!-- 음식 목록 -->
<ul class="food-gallery">
<li class="food-item">
<a href="#">
<div class="img-wrapper"><img src="assets/img/sandwich.jpg" /></div>
<div class="food-content">
<h2>The Perfect Sandwich, A Real NYC Classic</h2>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum</p>
</div>
</a>
</li>
<li class="food-item">
<a href="#">
<div class="img-wrapper"><img src="assets/img/steak.jpg" /></div>
<div class="food-content">
<h2>Let Me Tell You About This Steak</h2>
<p>Once again, some random text to lorem lorem lorem lorem ipsum text
praesent tincidunt ipsum lipsum.</p>
</div>
</a>
</li>
<li class="food-item">
<a href="#">
<div class="img-wrapper"><img src="assets/img/cherries.jpg" /></div>
<div class="food-content">
<h2>Cherries, interrupted</h2>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</a>
</li>
<li class="food-item">
<a href="#">
<div class="img-wrapper"><img src="assets/img/wine.jpg" /></div>
<div class="food-content">
<h2>Once Again, Robust Wine and Vegetable Pasta</h2>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</a>
</li>
<li class="food-item">
<a href="#">
<div class="img-wrapper"><img src="assets/img/popsicle.jpg" /></div>
<div class="food-content">
<h2>All I Need Is a Popsicle</h2>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</a>
</li>
<li class="food-item">
<a href="#">
<div class="img-wrapper"><img src="assets/img/salmon.jpg" /></div>
<div class="food-content">
<h2>Salmon For Your Skin</h2>
<p>Once again, some random text to lorem lorem lorem lorem ipsum text
praesent tincidunt ipsum lipsum.</p>
</div>
</a>
</li>
<li class="food-item">
<a href="#">
<div class="img-wrapper"><img src="assets/img/sandwich.jpg" /></div>
<div class="food-content">
<h2>The Perfect Sandwich, A Real Classic</h2>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</a>
</li>
<li class="food-item">
<a href="#">
<div class="img-wrapper"><img src="assets/img/croissant.jpg" /></div>
<div class="food-content">
<h2>Le French</h2>
<p>Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</a>
</li>
</ul>
<!-- 페이지 번호 -->
<ul class="pagenation">
<li><a href="#">◀</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">▶</a></li>
</ul>
<!-- 구분선 -->
<hr class="divider" />
<!-- 쉐프소개 -->
<div class="profile-container">
<h2>About Me, The Food Man</h2>
<img src="assets/img/chef.jpg" />
<h3>I am Who I Am!</h3>
<h4>With Passion For Real, Good Food</h4>
<p>
Just me, myself and I, exploring the universe of unknownment.
I have a heart of love and an interest of lorem ipsum and mauris neque quam blog.
I want to share my world with you. Praesent tincidunt sed tellus ut rutrum.
Sed vitae justo condimentum, porta lectus vitae,
ultricies congue gravida diam non fringilla.
Praesent tincidunt sed tellus ut rutrum.
Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
</p>
</div>
</div>
</div>
<!-- 하단영역 -->
<footer class="footer">
<div class="content-container">
<div class="footer-item">
<h3>FOOTER</h3>
<p>
Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
porta lectus vitae, ultricies congue gravida diam non fringilla.
Powered by megastudy-id-academy
</p>
</div>
<div class="footer-item">
<h3>BLOG POSTS</h3>
<ul class="blog-posts">
<li>
<a href="#">
<img src="assets/img/workshop.jpg" />
<div class="text-box">
<h4 class="blog-post-title">Lorem</h4>
<p class="blog-post-content">Sed mattis nunc Sed mattis nunc Sed mattis nunc</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="assets/img/gondol.jpg" />
<div class="text-box">
<h4 class="blog-post-title">Lorem</h4>
<p class="blog-post-content">Sed mattis nunc Sed mattis nunc Sed mattis nunc</p>
</div>
</a>
</li>
</ul>
</div>
<div class="footer-item">
<h3>POPULAR TAGS</h3>
<ul class="tags">
<li class="black">Travel</li>
<li>New York</li>
<li>Dinner</li>
<li>Salmon</li>
<li>France</li>
<li>Drinks</li>
<li>Ideas</li>
<li>Flavors</li>
<li>Cuisine</li>
<li>Chicken</li>
<li>Dressing</li>
<li>Fried</li>
<li>Fish</li>
<li>Duck</li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>
⚠️ 이미지 파일 준비 Main 영역에 사용된 이미지들(
sandwich.jpg,steak.jpg,cherries.jpg,wine.jpg,popsicle.jpg,salmon.jpg,croissant.jpg,chef.jpg)을step3-main/assets/img폴더에서 복사하여 여러분의assets/img폴더에 넣어주세요.
2. Main 영역 CSS 스타일 적용
이제 메인 페이지 전용 스타일시트인 index.css에 음식 갤러리와 프로필 영역의 스타일을 정의합니다.
실습: assets/css/index.css 작성
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
/** 메인 페이지 전용 스타일 */
/*-------------------------------------------------
* 음식 갤러리 영역
*-------------------------------------------------*/
.food-gallery {
display: flex;
flex-wrap: wrap;
.food-item {
flex: 0 1 25%;
padding: 20px 10px;
a {
display: block;
/* 이미지를 감싸는 박스 */
.img-wrapper {
width: 100%;
/* 이미지가 이 박스를 벗어날 경우 잘라냄 */
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease-in-out;
}
}
&:hover {
.img-wrapper img {
transform: scale(1.1, 1.1);
}
}
.food-content {
padding: 15px 10px;
text-align: center;
h2 {
font-size: 18px;
margin-bottom: 10px;
line-height: 130%;
}
p {
font-size: 14px;
font-weight: 300;
line-height: 120%;
}
}
}
}
}
/*-------------------------------------------------
* 페이지 번호
*-------------------------------------------------*/
.pagenation {
display: flex;
justify-content: center;
li {
width: 32px;
height: 32px;
a {
width: 100%;
height: 100%;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: rgba(0, 0, 0, 0.2);
}
}
&.active {
background-color: #000000;
a {
color: #fff;
}
}
}
}
/*-------------------------------------------------
* 중앙 구분선
*-------------------------------------------------*/
.divider {
margin: 60px 0;
width: auto;
border-top: 1px solid #ddd;
border-bottom: 0;
}
/*-------------------------------------------------
* 쉐프 소개
*-------------------------------------------------*/
.profile-container {
text-align: center;
h2 {
font-size: 32px;
margin-bottom: 32px;
font-weight: 400;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 26px;
}
h3 {
font-size: 26px;
margin-bottom: 16px;
font-weight: 400;
}
h4 {
font-size: 18px;
margin-bottom: 16px;
font-weight: 400;
}
p {
font-size: 16px;
font-weight: 300;
line-height: 150%;
margin-bottom: 30px;
padding: 0 25px;
}
}
This post is licensed under CC BY 4.0 by the author.