프로그래밍/CSS
24 반응형 웹페이지를 만들어보자 - 2
윤지(●'◡'●)
2021. 5. 15. 23:55
반응형
반응형 웹페이지를 만들어보자 - 2
만들어 볼 예시는 아래 동영상의 페이지이다.
[구성]
[HTML]
<head>
<title>카페소개</title>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<div id="container">
<header>
<nav>
<ul>
<li><a href="#intro">카페소개</a></li>
<li><a href="#map">오시는 길</a></li>
<li><a href="#choice">이달의 추천</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 class="text">
<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="지도">
</div>
<div class="text">
<p>서귀포시 안덕면 사계리 000-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="아이스커피">
</div>
<div class="text">
<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>[CSS]
/*웹폰트*/
@font-face {
font-family: 'Cafe24Oneprettynight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/*폰트적용*/
body{font-family: 'Cafe24Oneprettynight';}
#container{ /*젤 큰틀*/
width: 100%; /*가로 꽉차게*/
margin: 0 auto; /*가운데 정렬*/
}
nav{ /*메뉴*/
height: 50px; /*높이50px*/
background-color: black; /*배경색 검정*/
}
nav>ul{ /*자식 선택자: nav 바로 밑 ul에 스타일 적용*/
list-style: none; /*목록태그 앞 동그라미 없애기*/
margin: 0;
padding: 3px;
}
nav>ul>li{ /*자식선택자: nav 바로 밑 ul 바로밑 li에 스타일 적용*/
display: inline-block; /*목록태그가 세로가 아닌 가로로 정렬 되게 적용*/
margin: 15px 20px; /*상하: 15px 좌우:20px*/
}
a{ text-decoration: none;} /*링크 밑줄 없애기*/
a:link, a:visited{color: white;} /*방문하지않은 링크, 이미 방문한 링크 글씨 흰색*/
a:active{color: gold;} /*클릭하면*/
a:hover{color:gold} /*마우스를 올리면*/
header{ /*메뉴와 메인사진 부분*/
width: 100%;
height: 300px;
background: url(../images/header.jpg) no-repeat center;
/*배경 이미지 설정, 반복X 센터로 확대*/
background-size: cover; /*이미지 확대*/
margin: 0;
}
.photo{display: none}
/*설명란 이미지는 pc에서만 보이기 때문에 핸드폰에선 숨기기
hidden은 자리차지를 하기 때문에 자리차지를 하지않는 none으로 설정*/
section{ /*카페소개/오시는길/이달의추천 영역 설정*/
position: relative;
width: 100%;
padding: 15px 5%;
}
.page-title{ /*제목*/
position: absolute;
top: 20px;
left: 0px;
padding: 30px 50px;
}
.page-title > h1{ /*자식 선택자: id가 page-title인 요소 바로 아래 h1에 스타일 적용*/
margin-bottom: 30px;
}
.content{ /*설명란*/
margin: 80px auto 10px;
width: 90%;
padding: 20px;
box-sizing: border-box; /*width,height값에 padding과 border를 포함*/
}
#container section:nth-child(odd){
/*class명이 container인 요소 밑 모든 section중 홀수 요소에 스타일 적용*/
background-color: gold;
}
footer{
position: relative;
width: 100%;
height: 100px;
background-color: black;
}
footer>p{ /*자식선택자 : footer 바로 밑 p에 스타일 적용*/
text-align: center; /*글자 가운데 정렬*/
color: white;
line-height: 100px; /*줄간격: 100px*/
}
/*태블릿*/
@media screen and (min-width: 768px) { /*만약 최소사이즈가 768보다 크다면*/
header{height: 400px;}
#intro,#map{
/*1(메인사진)/2(카페소개&오시는길)/1(이달의추천메뉴) 이므로
#intro,#map의 가로를 50%로 설정*/
box-sizing: border-box;
width: 50%;
float: left; /*float로 intro옆에 map이 따라오도록 함*/
margin: 0;
height: 300px;
}
#choice{ /*choice는 따라 올라오면 안되므로 clear로 float 해제*/
clear: both;
}
}
/*pc*/
@media screen and (min-width: 1024px) {/*만약 최소사이즈가 1024px보다 크다면*/
#container{
width: 1000px;
margin: 0 auto;
}
header{height: 450px;}
#intro,#map, #choice{ /*1/1/1/1로 구성되므로 가로 100%로 설정*/
box-sizing: border-box;
position: relative;
width: 100%;
height: 400px;
padding: 15px 5%;
}
.photo{ /*pc 버전에선 사진이 다시 떠야하기 때문에 block으로 설정*/
display: block;
width: 40%;
margin-top: 20px;
}
.content{
margin: 80px auto 10px;
width: 90%;
padding: 20px;
}
.photo>img{/*자식 선택자: id가 photo인 요소 바로 밑 img태그에 스타일 적용*/
width: 100%;
max-width: 320px; /*최대 가로: 320px*/
height: auto;
margin-bottom: 30px;
}
#intro .photo, #map .photo{
float: left; /*카페소개와 오시는길 이미지는 왼쪽 정렬*/
margin-right:5% ;
}
.text{width: 45%;}
#intro .text, #map .text{float: right;} /*카페소개와 오시는길 설명글은 왼쪽 정렬*/
#choice .photo{ /*이달의 메뉴 이미지는 오른쪽 정렬*/
float: right;
margin-left:5% ;
}
#choice .text{float: left;} /*이달의 메뉴 설명글은 오른쪽 정렬*/
#choice .photo img { /*이달의 메뉴의 사진은 둥글게 변경*/
border: 1px solid white;
border-radius: 50%;
}
#footer{clear: both;} /*footer는 딸려올라오면 안되므로 clear로 float 해제*/
}
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
반응형