레이아웃 구성
모바일 화면부터 시작해 태블릿과 PC화면 순서대로 구성해야 편리하다. 이런 방식을 모바일 퍼스트(mobile first)이다.
<html>
<title>
</title>
<style>
/*
모든 상황에서 똑같이 사용할 스타일
*/
* {
/* 문서 전체 스타일 */
padding: 0;
margin: 0;
}
body {
background: seashell;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.3em;
}
p {
font-size: 1.3em;
line-height: 2.5;
}
li {
font-size: 1em;
line-height: 2;
}
/* 모바일 767 이하 */
#container {
width: 100%
}
header {
width: 100%;
height: 300px;
margin: 0;
}
nav {
height: 50px;
background: black;
}
#mani-nav {
list-style: none;
margin: 0;
padding: 10px;
}
#mani-nav li {
display: inline-block;
color: white;
font-size: 0.8em;
margin: 5px 15px;
}
section {
position:relative;
width: 100%;
padding: 15px 2% 10px 5%;
}
.page-title {
position: absolute;
top: 20px;
left: 0px;
padding: 30px 50px;
}
.content {
margin: 80px auto 10px;
width: 90%;
padding: 20px;
}
.footer {
position: relative;
width: 100%;
height: 100px;
background: black;
}
/* 768 이상 태블릿 */
@media screen and (min-width: 768px) {
header {
width: 100%;
height: 400px;
margin: 0;
}
nav {
height: 50px;
background: black;
}
}
/* 992이상 PC */
@media screen and (min-width: 992px) {
nav {
height: 50px;
background: gray;
}
}
</style>
<body>
<div id="container">
<header>
<nav>
<ul id="mani-nav">
<li><a hre="#intro">Cafe</a></li>
<li><a hre="#choice">Choice</a></li>
<li><a hre="#map">Map</a></li>
</ul>
</nav>
</header>
<section id="intro">
<div class="page-title">
<h1> 카페소개 </h1>
</div>
<section id="content">
<div class="photo">
<img src="logo.svg">
</div>
<div class="text">
<p>영업시간 : 오전 9시 ~ 밤 11시</p>
</div>
</section>
</section>
<section id="map">
<div class="page-title">
<h1>오시는 길</h1>
</div>
<section id="content">
<div class="photo">
<img src="logo.svg">
</div>
<div class="text">
<p>서귀포</p>
</div>
</section>
</section>
<section id="choice">
<div class="page-title">
<h1>이 달의 추천</h1>
</div>
<section id="content">
<div class="photo">
<img src="logo.svg">
</div>
<div class="text">
<p>서귀포</p>
</div>
</section>
</section>
</div>
</body>
</html>
unit test, tdd, bdd, laravel, django, android native, vuejs, react, embedded linux, typescript