지금까지 만든것을 응용해 샘플페이지를 만들어본다.
<!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>샘플사이트</title>
<link rel="stylesheet" href="./css/web.css">
</head>
<body>
<head>
<div class="hmenu">
<div id="title">sample Menu</div>
<div class="blank"></div>
<div class="mainmunu">
<div id="menu1" class="menu">
<a href="#">메인메뉴</a>
<div id="mainsmall">
<a href="#">1번메뉴</a>
<br>
<a href="#">2번메뉴</a>
<br>
<a href="#">3번메뉴</a>
<br>
</div>
</div>
<div id="2menu" class="menu">
<a href="#">레시피</a>
</div>
<div id="3menu" class="menu">
<a href="#">사진올리기</a>
</div>
<div id="4menu" class="menu">
<a href="#">아무거나</a>
</div>
<div id="menu5" class="menu">
<a href="#">고객센터..?</a>
<div id="mainsmall1">
<a href="#">1번메뉴</a>
<br>
<a href="#">2번메뉴</a>
<br>
<a href="#">3번메뉴</a>
<br>
</div>
</div>
</div>
<div class="blank"></div>
</div>
</head>
<aside>
<div class="cut"></div>
<div class="contants" id="picture">
<img src="./img/pizza-4407511_1280.jpg">
</div>
<div class="contants" id="summary">
<center>
요리이름: 피자
<hr width="200px">
이 요리는 아주 맛있는<br>
피자<br>
피자 좋아해요? 열심히 만들었음<br>
피자피자 피자는 맛있어<br>
약간 담백한 글이 들어가면 좋겠네~<br>
</center>
</div>
<div class="contants" id="recipe">
<div id="recipebook">
<center>
<br>
안녕 나는 피자라고해
<hr>
밀가루................. 한포대
<br>
이스트 .................약간
<br>
피망 ................. 조금
<br>
고기 ................. 많이
<br>
야채도 ................. 많이
<br>
치즈 .................. 엄청많이
<hr>
밀가루를 일단 반죽을 열심히 해서<br>
이스트를 넣소 냉장고에 30분 재운뒤 <br>
쫙쫙펴서 야채 촥촥 고기 촥촥<br>
치즈 무조건 많이~~~
<br>배경에 종이 질감을 넣으면 좋겠따
<br>그러면좋겠따
<br>쓸말이 없네~~~
<br>배경에 종이 질감을 넣으면 좋겠따
<br>그러면좋겠따
<br>쓸말이 없네~~~
</center>
</div>
</div>
<div class="contants" id="re-conten">
<center>
피자는 엄청 맛있는 요리입니다 만들기 귀찮으니 사먹는게 최고입니다 <br>
피자는 엄청 맛있는 요리입니다 만들기 귀찮으니 <br>
피자는 엄청 맛있는 요리입니다 만들기 귀찮으니 사먹는게 최고 <br>
맛있는 요리입니다 만들기 귀찮으니 사먹는게 최고입니다 <br>
피자는 엄청 맛있는 요리입니다 만들기 귀찮으니 사먹 <br>
피자는 엄청 맛있는 요리입니다 만들기 귀찮으니 사먹는게 최고입니다 <br>
피자는 엄청 맛있는 요리입니다 만들기 귀찮으니 사먹는게 최고입니다 <br>
피자는 엄청 맛있는 요리입니다 사먹는게 최고입니다 <br>
</div>
<div class="contants" id="picture2">
<img src="./img/pizza-3525673_1280.jpg">
</div>
<div class="contants" id="profile">
<center id="profile1">profile</center>
<center><hr></center>
<div class="foot1">
<div class="foot1-1">
<img src="./img/cat-5183427_640.jpg" id ="profilpic" alt="">
</div>
<div class="foot1-2">
고등어냥
<hr>
<br>
미각에 특히 뛰어난 고양이
<br>
사냥을 아주 잘 한다
<br>
고양이 발로 귀엽게 요리하면 먹을수밖에 없다
<br>
so cute
</div>
</div>
<div class="foot2">
양력
<ul>
<li>츄르스프</li>
<li>가다랑어 포 대상</li>
<li>멸치로 만든 고양이 이유식 </li>
</ul>
</div>
</div>
</aside>
<div class="footer">
<br>
<center><hr></center>
copyright by test 페이지임!!
</div>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang&display=swap');
/*웹폰트 가져옴*/
body{
width: 800px;
margin: 0 auto;
}
.hmenu{
font-family: 'Dancing Script';
font-size: 50px;
background-color: whitesmoke;
margin: 0 auto;
padding: 0;
height: 100px;
text-align: center;
position: fixed;
--position: absolute;
width: 800px;
z-index: 50;
}
/*메뉴를 고정해서 스크롤해도 보이도록 하였다*/
.mainmunu{
align-content: center;
}
/*텍스트를 가운데 정렬*/
.mainmunu [id] {
text-decoration: none;
font-size: 15px;
float: left;
margin-top: 10px;
width: 15%;
font-family: 'Gowun Batang';
font-weight: 550;
}
/*글자스타일지정*/
.blank{
float: left;
width:10%;
height: 100%;
}
/*여백만들기*/
.hmenu a{
text-align: center;
text-decoration: none;
color:black;
position: relative;
}
/*a태그 스타일 설정, 포지션 고정*/
#mainsmall{
background-color: whitesmoke;
width: 100%;
opacity: 0;
position: abposition;
height: 0;
}
#menu1:hover #mainsmall{
opacity: 1;
transition-duration: 0.5s;
height: 100%;
margin: 0;
}
/*마우스를 대면 세부메뉴가 나옴*/
.mainmunu :hover:not(#mainsmall1,#mainsmall){
color:midnightblue;
font-weight: bolder;
}
/*마우스를 대면 그 메뉴를 잘 보이도록함*/
#mainsmall1{
background-color: whitesmoke;
width: 100%;
opacity: 0;
position: abposition;
height: 0;
}
/*세부메뉴를 숨김*/
#menu5:hover #mainsmall1{
opacity: 1;
transition-duration: 0.5s;
height: 100%;
margin: 0;
}
/*마우스를 대면 세부메뉴 나타암*/
#menu5:hover{
color:midnightblue;
font-weight: bolder;
}
/*마우스대면 바뀜*/
.cut{
height: 140px;
background-color: whitesmoke;
}
/*pixed 메뉴때문에 가려진 부분을 보이도록하기 위해 페이지에 공백을 만듦*/
.contants{
font-family: 'Gowun Batang';
font-size: 15px;
background-color: whitesmoke;
}
/*글자지정*/
img{
width: 100%;
}
#picture{
height:400px;
overflow: hidden;
}
#summary{
padding: 5%;
height: 150px;
}
#recipe{
height: 500px;
background-image: url('../img/tiles-shapes-2617112_1280.jpg');
background-repeat: no-repeat;
position: relative;
z-index: 10;
}
/*z-index를 지정해서 메뉴위로 올라가지 못하도록함*/
#recipebook{
position: relative;
left:30%;
top:5%;
background-image: url('../img/hd-wallpaper-1074131_1280.jpg');
width: 300px;
height: 90%;
border: 1px solid gray;
}
#picture2{
overflow: hidden;
height: 350px;
}
hr{
margin: 2%;
width: 60%;
}
#profile{
height: 500px;
}
#re-conten{
padding-top: 20px;
height: 220px;
--background-image: url('../img/tiles-shapes-2617112_1280.jpg');
}
#profile{
width: 100%;
height: 650px;
}
.foot1{
width: 100%;
height: 60%;
}
.foot1-1{
margin: 20px;
margin-left: 150px;
height: 90%;
width: 30%;
float: left;
overflow: hidden;
}
.foot1-2{
height: 50%;
padding: 50px;
text-align: left;
width: 30%;
float: left;
}
#profilpic{
position: relative;
float: left;
height: 90%;
width: 500px;
left: -150px;
}
.foot2{
margin: 30px;
margin-left: 150px;
}
#profile1{
margin: 10px;
font-size: 25px;
margin-top: 0px;
}
.footer{
background-color: whitesmoke;
height: 90px;
width: 100%;
text-align: center;
margin: 0%;
}
hello world