프로그래밍/CSS
23 반응형 웹페이지를 만들어보자 - 1
윤지(●'◡'●)
2021. 5. 15. 23:15
반응형
반응형 웹페이지를 만들어보자
만들어 볼 예시는 바로 아래 동영상의 페이지이다
[구성]
[HTML]
<head>
<title>솔로의 식탁</title>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<div id="container">
<header>
<h1>솔로의 식탁</h1>
</header>
<div id="menus">
<div id="menu1">
<h2>밥/죽</h2>
</div>
<div id="menu2">
<h2>국/찌개</h2>
</div>
<div id="menu3">
<h2>반찬</h2>
</div>
<div id="menu4">
<h2>일품요리</h2>
</div>
<div id="menu5">
<h2>음료/칵테일</h2>
</div>
</div>
<footer>
<p>솔로의 식탁</p>
</footer>
</div>
</body>
</html>
[CSS]
@font-face { /*웹폰트*/
font-family: 'GmarketSansBold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#container{ /*가장 큰 틀*/
width: 100%; /*가로 어떤 기기로 접속하든 꽉차게 설정*/
font-family: 'GmarketSansBold'; /*폰트 설정*/
}
header{ /*상호명 부분*/
width: 100%;
}
header > h1 { /*자식 선택자: header 바로 밑 h1에 스타일 적용*/
font-size: 3em; /*16px * 3배 = 48px*/
text-align: center; /*가운데 정렬*/
}
#menus{ /*메뉴 사진 부분*/
width: 100%;
}
#menus > div { /*자식 선택자 : menus 바로 밑 div에 스타일 적용*/
position: relative; /*글자에 absolute 주려고 relative 설정*/
height: 400px;
border: 1px solid black; /*테두리: 1px 직선 검정색*/
margin-bottom: 15px; /*아래쪽 margin 15px*/
}
#menu1,#menu2,#menu3,#menu4,#menu5 {
width: 100%; /*핸드폰에선 사진 하나씩 세로로 일렬이니까 모든 메뉴 가로 꽉차게*/
}
#menus h2{ /*하위선택자: menus 밑 모든 h2에 스타일 적용*/
position: absolute;
padding: 5px;
font-size: 2em;
right:3%;
bottom: 10px;
color: white;
text-shadow: 3px 3px 5px black;
}
/*배경에 이미지 깔기*/
#menu1{
background: url(../image/dish1.jpg) no-repeat center;/*반복 없음, center 기준으로 확대*/
background-size: cover; /*중요! 자주쓰임*/
/*cover: 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소*/
}
#menu2{
background: url(../image/dish2.jpg) no-repeat center;
background-size: cover;
}
#menu3{
background: url(../image/dish3.jpg) no-repeat center;
background-size: cover;
}
#menu4{
background: url(../image/dish4.jpg) no-repeat center;
background-size: cover;
}
#menu5{
background: url(../image/dish5.jpg) no-repeat center;
background-size: cover;
}
/*footer*/
footer{
width: 100%;
background-color: black;
height: 100px;
}
footer > p{/*자식 선택자: footer 바로 밑 p에만 스타일 적용*/
font-size: 1.5em;
color: white;
text-align: center; /*가운데 정렬*/
line-height: 100px; /*줄간격*/
}
@media screen and (min-width: 768px) { /*만약 최소 사이즈가 768보다 크다면 아래 스타일 적용*/
#menus{
display: flex; /*수평 구성을 위해 플렉서블 레이아웃 사용*/
flex-wrap: wrap; /*여유공간 없으면 다음줄로 넘김*/
justify-content: space-between; /*요소 사이에 여유공간을 두고 배치*/
}
#menu1,#menu2,#menu3,#menu4 { /*2/2/1 배치이니 총 가로중 49%씩 차지하도록 설정*/
width: 49%;
}
#menu5{ /*마지막 이미지는 혼자 꽉채우니까 100%로 설정*/
width: 100%;
}
}
@media screen and (min-width: 1000px) { /*만약 최소 사이즈가 1000px보다 크다면 아래스타일 적용*/
#menus{
display: flex; /*수평 구성을 위해 플렉서블 레이아웃 사용*/
flex-wrap: wrap; /*여유공간 없으면 다음줄로 넘김*/
justify-content: space-between; /*요소 사이에 여유공간을 두고 배치*/
}
#menu1,#menu2,#menu3,#menu4, #menu5{ /*3/2 배치에 2에 한 사진은 윗줄과 사이즈가 동일*/
width: 32%; /*한줄에 세개가 들어갈 수 있도록 32%로 설정*/
}
#menu5{
flex: 2 2 0;
/*flex : grow값 shrink값 basis값*/
/*0을 주면 알아서 맞추란 소리*/
margin-left: 1.8%; /*menu4 사진과의 사이 간격을 위해 마진을 줌*/
}
}열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
반응형