전체 결과물
화면을 줄였을 때
마우스 올려놨을 때 글자가 노란색으로 변경 되며 클릭하면 카페 소개글로 넘어감
작성된 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #fff;
}
a {
text-decoration: none;
}
nav a:link, a:visited {
color: #fff;
}
nav a:active {
color: yellow;
}
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;
}
/* 모바일-767px 이하 */
#container {
width: 100%;
margin: 0 auto;
}
header {
width: 100%;
height: 300px;
background: url(images/header.jpg) center no-repeat;
background-size: cover;
margin: 0;
}
nav {
height: 50px;
background: #000;
}
#main-nav {
list-style: none;
margin: 0;
padding: 10px;
}
#main-nav li {
display: inline-block;
color: #fff;
font-family: "맑은 고딕", "고딕", "돋움";
font-size: 0.8em;
margin: 5px 15px;
}
section {
position: relative;
width: 100%;
padding: 15px 5% 10px 5%;
}
#container section:nth-child(odd) {
background: #eee;
}
.page-title {
position: absolute;
top: 20px;
left: 0;
padding: 30px 50px;
}
.page-title h1 {
margin-bottom: 30px;
}
.content {
margin: 80px auto 10px;
box-sizing: border-box;
width: 90%;
padding: 20px;
}
.content ol {
margin-top: 20px;
}
.photo {
display: none;
}
footer {
position: relative;
width: 100%;
height: 100px;
background: #000;
}
footer p {
font-size: 1.5em;
line-height: 100px;
color: white;
text-align: center;
}
/* 태블릿 - 768px 이상 */
@media screen and (min-width:760px) {
header {
height: 400px;
}
#intro, #map {
box-sizing: border-box;
width: 50%;
height: 400px;
float: left;
margin: 0;
border: 1px dotted #ccc;
}
#choice {
clear: left;
}
}
/* PC - 992px 이상 */
@media screen and (min-width:992px) {
#container {
width: 995px;
margin: 0 auto;
border: 1px solid #ccc;
}
header {
height: 500px;
}
#intro, #map, #choice {
box-sizing: border-box;
width: 100%;
position: relative;
height: 420px;
padding: 15px 2% 10px 5%;
clear: both;
}
.content {
margin: 80px auto 10px;
width: 90%;
padding: 20px;
}
.photo {
width: 42%;
display: block;
}
.photo > img {
width: 100%;
max-width: 320px;
height: auto;
margin-bottom: 30px;
}
.text {
width: 42%;
}
#intro .photo, #map .photo {
float: left;
margin-right: 5%;
}
#intro .text, #map .text {
float: left;
}
#choice .photo {
float: right;
margin-right: 5%;
}
#choice .text {
float: left;
}
footer {
clear: both;
}
}
</style>
</head>
<body>
<div id="container">
<header>
<nav>
<ul id="main-nav">
<li><a href="#intro">카페 소개</a></li>
<li><a href="#choice">이 달의 추천</a></li>
<li><a href="#map">오시는 길</a></li>
</ul>
</nav>
</header>
<section id="intro">
<div class=".page-title">
<h1>카페 소개</h1>
</div>
<div class="content">
<div class="photo">
<img src="images/coffee.jpg" alt="">
</div>
<div>
<p>영업 시간 : 오전 9시 ~ 밤 10시</p>
<p>휴무 : 매주 수요일 (<i><small>수요일이 공휴일인 경우 수요일 영업, 다음날 휴무</small></i>)</p>
</div>
</div>
</section>
<section id="map">
<div class=".page-title">
<h1>오시는 길</h1>
</div>
<div class="content">
<div class="photo">
<img src="images/map.jpg" alt="사계 포구엣 서쪽 방향으로 000미터 진행">
</div>
<div class="text">
<p>서귀포시 안덕면 사계리 0000-000</p>
<p>제주 올레 10코스 산방산 근처</p>
</div>
</div>
</section>
<section id="choice">
<div class=".page-title">
<h1>이 달의 추천</h1>
</div>
<div class="content">
<div class="photo">
<img src="images/ice.jpg" alt="아이스 커피" style="border:1px solid white; border-radius:50%;">
</div>
<div>
<h2>핸드드립 아이스커피</h2>
<ol>
<li>1인 기준으로 서버에 각얼음 5조각(한조각의 20cc)넣고 추출을 시작한다.</li>
<li>평상시 보다 원두의 양은 2배 정도(20g)와 추출액은 얼음 포함해서 200cc까지 내린다.</li>
<li>아이스 잔에 얼음 6-7개 섞어서 시원하게 마신다.</li>
</ol>
</div>
</div>
</section>
<footer>
<p>My times with Coffee</p>
</footer>
</div>
</body>
</html>구글 폰트 입력해서 해보기
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
* {
margin: 0;
padding: 0;
}
body {
background: #fff;
font-family: 'Nanum Pen Script', cursive;
}1. import 복사한거 style 안에 그대로 복붙하기
2. css는 body 안에 넣어주기
폰트 적용 후
'Coding > HTML' 카테고리의 다른 글
| 13. CSS3와 애니메이션 : 트랜지션 /애니메이션 (0) | 2022.05.23 |
|---|---|
| CSS3 선택자 : 가상 클래스와 가상 요소 (0) | 2022.05.16 |
| HTML5와 멀티미디어 : 웹과 멀티미디어 / 오디오 & 비디오 재생하기 (0) | 2022.05.09 |
| [html] 간단한 실습 : 홈페이지 만들어보기 (0) | 2022.04.25 |
| [HTML]07. 배경 색과 배경 이미지 / 그라데이션 효과로 배경 꾸미기 (0) | 2022.04.11 |
