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> ID </label>
<input type="text" name="id"><br>
<label>PASS</label>
<input type="password" name="pass"><br><br>
<input type="button" value="login"> <!-- botton은 아무 기능 없기 때문에 꼭 value를 써줘야한다. -->
<input type="reset" value="reset"><br>
<pre>
<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>초반에 만들었던 거라 나머지 기능들은 나만 가지고 있기로 ..