<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="prefixfree.js"></script>
</head>
<body>
<div id="outside">
<p id="outside-title">
♥Happy Birthday♥
</p>
<img id="outside-pic" src="snowman.png">
<p>
<button onclick="open_card()">Click to open</button>
</p>
</div>
<div id="inside">
<p id="inside-title">
~Happy Birthday~
</p>
<img id="inside-pic" src="rainbow.png">
<p id="message">
HAPPY NEW YEAR!
</p>
<p>
<button onclick="close_card()">Click to close</button>
</p>
</div>
</body>
</html>
#outside {
z-index: 1;
position: absolute;
background-color: lightgray;
width: 100%;
height: 100%;
text-align: center;
transition: 1s;
transform-origin: 0;
}
.open-card {
transform: rotateY(90deg);
}
#outside-title {
color: black;
<span style="font-family: tahoma;">Tahoma</span>
font-size: 12pt;
text-align: center;
}
#outside-pic {
width: 150px;
height: 150px;
}
#outside-help {
color: black;
font-family: Courier;
font-size: 12pt;
text-align: center;
padding: 20px;
}
#inside {
z-index: 0;
position: absolute;
background-color: lightpink;
width: 100%;
height: 100%;
text-align: center;
}
#inside-title {
color: black;
font-family: <span style="font-family: tahoma;">Tahoma</span>
font-size: 12pt;
text-align: center;
}
#inside-pic {
width: 150px;
height: 150px;
}
#message {
color: black;
font-family: <span style="font-family: tahoma;">Tahoma</span>
font-size: 12pt;
text-align: center;
}
button {
background: silver;
}div 태그 안에 style(스타일), width(가로 크기), height(세로 크기), border(테두리 굵기), background-color(배경 색상), float(정렬), margin(여백) 과 같은 css 속성을 지정할 수 있다.
<div id="header">헤더</div> <div id="container"> <div id="contents">컨텐츠</div> <div id="sidebar">사이드바</div> </div> <div id="footer">푸터</div>위의 html div 태그들을 css 코드를 통하여 아래처럼 레이아웃을 설정해줄 수 있다.
body { margin: 0; padding: 10px; background-color: #FFF; } #container { width: 380px; } #header { background-color: #FF4A4D; height: 50px; } #contents { float: left; background-color: #FFC64A; width: 290px; height: 214px; /* 임의 지정 */ } #sidebar { float: right; background-color: #85C69D; width: 90px; height: 214px; /* 임의 지정 */ } #footer { clear: both; background-color: #3B83B1; height: 40px; }여기서 또 하나, div 태그는 줄바꿈이 일어나 아래로 차례로 내려가고, span 태그는 옆으로 배열이 된다.
