728x90
๋ฐ์ํ
<!Doctype html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
right: 50px;
top : 50px;
position: absolute;
background: red;
}
</style>
<body>
<h2>My First JavaScript Animation</h2>
<div id="container">
<div id="animate"></div>
</div>
</body>
</html>
<!Doctype html>
<html>
<style>
#container {
width: 400px;
height: 400px;
/*position: relative;*/
background: yellow;
}
#animate {
width: 50px;
height: 50px;
right: 50px;
top : 50px;
position: absolute;
background: red;
}
</style>
<body>
<h2>My First JavaScript Animation</h2>
<div id="container">
<div id="animate"></div>
</div>
</body>
</html>์ถ์ฒ: https://www.w3schools.com/
์ถ๊ฐ๋ก ์ฐธ๊ณ ํ๋ฉด ์ข์ ๊ธ: https://rgy0409.tistory.com/2951
โป ์ฃผ์ํ ์ . absolute ์์ฑ์ inline์ด ์๋ div์ ๊ฐ์ ๋ธ๋ญ element์ ์ง์ ํด์ผ ์๋ํจ. ๋ฒํผ์ absolute ์ง์ ํด๋ ์๋จนํ.
absolute์์ฑ์์ ์ค์์ ๋ ฌํ๊ธฐ(CSS)
1. ์์ง๊ณผ ์ํ์ ๋ํด ์ค์์ ๋ ฌ
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
2. ์์ง์ ๋ํด ์ค์์ ๋ ฌ
top: 50%;
transform: translate(-50%);
3. ์ํ์ ๋ํด ์ค์์ ๋ ฌ
left: 50%;
transform: translate(-50%);
728x90
๋ฐ์ํ
