romworld

CSS - 시멘틱요소를 이용한 내가 만든 웹페이지 본문

WEB/HTML & CSS

CSS - 시멘틱요소를 이용한 내가 만든 웹페이지

inderrom 2023. 1. 5. 01:43

<main.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rom shop here!</title>
<style>
html,body{
  background-color : #8AB78A;
  width: 100%;
  height :100%;
}

header, nav, aside, section, footer{
   border : 1px solid grey;
   margin : 1px;
   padding : 3px;
   box-sizing: border-box;
/*    border-radius: 10px;  */
}
header{
  font-size : 2.5em;
  font-family : monospace;
   color : green;
  width : 97%;
  height : 250px;
  background-image: url('../homework_images/housecat.JPG');
  background-position: bottom;
  background-size : 260px;
  margin-left : 1.5%;
 
 
}
footer{
  width : 97%;
  height : 100px;
  background-image: url('../images/housecat.JPG');
  background-position: bottom;
  background-size : 260px;
  margin-left : 1.5%;
  clear : both;
}
nav{
  width : 97%;
  height : 60px;
  background : #8AB78A;
  margin-left : 1.5%;
  border-left: none;
  border-right: none;
  
}
aside{
  border-top : 30px;
  width : calc(21% - 1.1%);
  height : 100%;
  background-image: url('../images/housecat.JPG');
  background-position: center;
  background-size : 260px;
  float : left;
 color : green;



}
aside#left{  /* aside에서 공통으로 쓰는건 위처럼 블록에 주고 아이디를 따로 줘서 개별로 속성줌 */
  margin-left : 1.5%;
  list-style-type: none;
   font-size : 2.1em;
  
}

aside li{
  margin-top: 80px;
  margin-bottom : -80px;
  list-style-type: none;
  /* text-align: center; */
  margin-right: 35px;
  
}
#left li{
/* color : green; */
  text-transform:  uppercase;
/*   border : 1px solid black; */
  text-align: center;
  font-style: italic;
  font-family : monospace;
  background-color : #82F9B7;
}

#category{
  font-size : 1.5em;
}

#cart{
  font-size : 1.5em;
  margin-bottom : -60px;
}
#shopingcart{
 text-decoration: underline;
}

#divcart{
 border : 1px solid grey;
 width : 100%;
 height : 250px;
 text-align: center;
 background-color : #82F9B7;
  font-family : monospace;
  font-size : 1.2em;

}
#divlogin{
 border : 1px solid grey;
 width : 100%;
 height : 250px;
 text-align: center;
 background-color : #82F9B7;
  font-family : monospace;
}

section{
  width : calc(58% - 1%);
  height : 100%;
  background : #8AB78A;
  float : left;  
  border-top: 10px;
}
h3{
 font-size : 1.5em;
}

h3, h2, p{
  text-align: center;
}
p{
   margin-top : -13px;
}


footer p{
    margin-top : 2.0%;
    color : green;
    font-family: monospace;
    font-size : 1.2em;
 }
 
nav ul{
    list-style-type:  none;
}
nav li{
 font-family : monospace;
 font-size : 1.2em;
  width : 15%;
  float : left;
  
  margin-left : 3.5%;
  letter-spacing: 5px;
  text-transform:  uppercase;
  text-align: center;
}
li a:link{
  color : green;
  text-decoration:  none;
}
li a:visited{
  color : green;
}
li a:hover{
   background :   #82F9B7;
   text-decoration: underline;
}
li a:active{
    font-size : 1.2em;
    color : green;
}
h2 a {
 color : #60BD89;
 text-decoration: none;
}
h2 a:hover{
   background :   #82F9B7;
   text-decoration: underline;
}
iframe {
   width: 99%;
   height: 100%;
  
}
</style>
</head>
<body>

<header>
  <h2><a href="../homework_website/main.html">ROM SHOP</a></h2>
</header>

<nav>
  <ul>
   <li><a href="../homework_website/main.html">home</a></li>
   <li><a href="">about us</a></li>
   <li><a href="">news</a></li>
   <li><a href="">my account</a></li>
   <li><a href="">contacts</a></li>
  </ul>
</nav>


<aside id="left">
 
  <ul>
   <li id="category">category</li>
   <li><a href="../homework_website/computer.html" target="ifr" >computer</a></li>
   <li><a href="../homework_website/clothing.html" target="ifr">clothing</a></li>
   <li><a href="../homework_website/music.html" target="ifr">music</a></li>
   <li><a href="../homework_website/movie.html" target="ifr">movie</a></li>
   <li><a href="../homework_website/camping.html" target="ifr">spo/leisure</a></li>
   <li><a href="../homework_website/interior.html" target="ifr">interior</a></li>
   <li><a href="../homework_website/food.html" target="ifr">food</a></li>
  </ul>
  
  
</aside>


<section id="main">
    <iframe src="music.html" name="ifr">
    </iframe>

</section>


<aside id="right">
 	<div id ="divcart">
 	<ul>
 	  <li id="cart">Shopping Cart</li>
 	  <li>no items in the shopping cart</li><br>
 	  <li id="shopingcart"><a href="../homework_website/shopcart.html" target="_blank">View Shopping Cart</a></li>
 	</ul>
 	<br><br><br>
 	</div>
 	
 	<div id="divlogin">
 	<h3>Log In</h3>
 	<form name="ff">
	  
	  <label>&nbsp;ID&nbsp;</label>
	  <input type="text" name="id"><br>
	  
	  <label>PASS</label>
	  <input type="password" name="pass"><br><br>
	  
	  &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="login"> <!-- botton은 아무 기능 없기 때문에 꼭 value를 써줘야한다.  -->
	  <input type="reset" value="reset"><br>
  	<pre>
   &nbsp; <a href="../homework_website/register.html" target="_blank">sign up</a> <a href="">find pass</a>
   </pre>
   </form>
   
   
 	</div>
 	</aside>


<footer>
 <P>@inderrom<br>
 Tel : 010-9515-0000
 </P>
</footer>
</body>
</html>

초반에 만들었던 거라 나머지 기능들은 나만 가지고 있기로 ..

 

'WEB > HTML & CSS' 카테고리의 다른 글

HTML - 입력요소  (0) 2023.01.05
CSS - 레이아웃  (0) 2023.01.05
태그  (0) 2022.10.25
WEB2 - CSS  (2) 2022.07.31
WEB1-HTML(4)  (0) 2022.07.30
'WEB/HTML & CSS' Related Articles more
Comments