<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>๋ธ๋ก๊ณผ ์ธ๋ผ์ธ ์์ (์ค์)</title>
</head>
<style>
button {
/*border: 1px solid black;*/
border: none;
border-radius: 5px;
margin: 10px 5px;
padding: 3px 28px;
font-size: 17px;
/* font-weight: bold */
cursor: pointer;
box-shadow: 3px 3px 4px lightgray;
}
button:hover{
opacity: 0.8;
}
#login{
background-color: #ffd6de;
}
#register{
background-color: #c2eeff;
}
a {
width: 1000px;
height: 500px; /* ์ธ๋ผ์ธ์ ์๋ฌด๋ฆฌ ๋ฃ์ด์ค๋ ๋ฐ๋๋๊ฑฐ xxx */
}
div{
background-color: #c8e5ff;
width: 100px;
height: 100px; /* ๋ธ๋ก์์ญ์ ๊ฐ๋ฅ oo */
}
section{ /* ํ๊ทธ์์ ์๋ฌด๊ฑฐ๋ ์ ํ์๊ฑฐ๋, ๊ฐ๋ก์ธ๋ก ๊ธธ์ด๊ฐ ์์ด์ผ ๊ฐ๋ฅ*/
background-color: #e3c8ff;
width: 100px;
height: 50px;
border: 2px solid black; /* border์ ํฌ๊ธฐ๋ ์๊ฐํด์ ๊ณ์ฐํด์ผํจ */
box-sizing: border-box; /* border๊น์ง ํฌํจํด์ ๊ณ์ฐํด์ค */
}
#s1 {
/* margin : ๋ํ๊ณ ๋ค๋ฅธ ์์ ์ฌ์ด์ ๊ฐ๊ฒฉ์ ๋ง๋ค์ด๋ผ */
/*
margin : ์ ๋ถ
margin : ์์๋ ์์
margin : ์ ์ค๋ฅธ์ชฝ ์๋ ์ผ์กฑ (์๊ณ๋ฐฉํฅ)
ํน์, ํ๋ํ๋ ๋ฐ๋ก ๋ค ์ ๋๋ค
margin-left, margin-right ๋ฑ
*/
}
#s1{
/* padding : ๋ด ์์ ์๋ ์์ํ๊ณ ๊ฐ๊ฒฉ ์ข ๋์๋ผ
margin๊ณผ ์ฌ์ฉ๋ฒ์ ๋๊ฐ๋ค.
*/
padding: 10px 5px;
}
#s2{
background-color: lavender;
margin: 10px 50px; /* ์์๋ ์์ */
}
#s3{
background-color: #d4ffca;
}
a{
padding: 10px 15px; /* ์์๋๋ ์์๊น */
}
</style>
<body>
<p>Pํ๊ทธ์</p> <!-- ํ์ค ์ ๋ถ ์ฐจ์งํจ -->
<section id="s1">SECTION1</section> <!-- ํ์ค ์ ๋ถ ์ฐจ์งํจ -->
<section id="s2">SECTION2</section> <!-- ํ์ค ์ ๋ถ ์ฐจ์งํจ -->
<section id="s3">SECTION3</section> <!-- ํ์ค ์ ๋ถ ์ฐจ์งํจ -->
<br> ============================================ <br>
<button id="login">๋ก๊ทธ์ธ</button>
<button id="register">ํ์๊ฐ์
</button>
<div>DIV0</div>
<a href="#">Aํ๊ทธ</a>
<input type="text" value="์ธํ"> <!-- ๊ฒฐ๊ณผ๊ฐ ํ์ค๋ก ๋์ค๋ฉด ์ธ๋ผ์ธ -->
<div>DIV1</div>
<div>DIV2</div> <!-- ๊ฒฐ๊ณผ๊ฐ ํ์ค์ ๋ค ์ฐจ์งํ๋๊ฑด ๋ธ๋ก -->
<section></section>
</body>
</html>
