30Days of HTML CSS

[30Days of HTML CSS] Day 04 | Position Property Lab

코딩하세현 2023. 11. 20. 21:16
728x90

<!DOCTYPE html>
<html>
	<head>
		<title>Position Property Lab</title>
		<style>
			/* Write your CSS here */
			#container {
			width: 300px;
			height: 300px;
			}

			.box{
			width: 50px;
			height: 50px;
			}

			#static-box{
			background-color: blue;
			}

			#relative-box {
			background-color: green;
			position: relative;
			top: 20px;
			left: 20px;
			}

			#absolute-box {
			background-color: red;
			position: absolute;
			top: 220px;
			left: 20px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<!-- Create and style your divs here -->
				<div id="static-box" class="box" >
				</div>
				<div id="relative-box" class="box">
				</div>
				<div id="absolute-box" class="box">
				</div>
		</div>
	</body>
</html>

 

https://recordoftheday.tistory.com/entry/CSS-Position%EC%9C%84%EC%B9%98-%ED%8A%B9%EC%84%B1

 

[CSS] Position Property(위치 속성)

위치 특성 위치 특성은 문서 내에서 요소의 위치를 설정하는 것이다. 중요한 점은 이 특성이 설정한 위치에 따라서 4개의 다른 특성인 top, right, bottom, left이 결정된다는 것이다. 위치 특성으로 사

recordoftheday.tistory.com

 

https://codedamn.com/challenge/30-days-of-html-css

 

30 Days of HTML CSS - Codedamn

Level up your coding skills with a daily coding challenge. Compete and share your progress every day and become a better developer.

codedamn.com

 

 

728x90