728x90
출처 : 반크_독도
참고예제]
<!DCOTYPE html>
<html lang="kor">
<head>
<style>
#one
{
background-color: cyan;
width:200px;
height:50px;
}
#two
{
position:static;
left:30px;
background-color: yellow;
width:200px;
height:50px;
}
#three
{
left:30px;
background-color: lightgreen;
width:200px;
height:50px;
}
#four
{
position:relative;
left:30px;
background-color: yellow;
width:200px;
height:50px;
}
#five
{
position:absolute;
top:30px;
left:100px;
background-color: purple;
width:200px;
height:50px;
}
#six
{
position:fixed;
top:0px;
right:0px;
background-color: green;
width:200px;
height:50px;
}
</style>
</head>
<body>
<p id="one"> block #1</p>
<div id="two"> block #2<br />
position:static;<br />
</div>
<p id="three"> block #3</p>
<div id="four"> block #4<br />
position:relative;<br />
</div>
<p id="three"> block #5</p>
<div id="five"> block #6<br />
position:absolute;<br />
</div>
<p id="three"> block #7</p>
<div id="six"> block #8<br />
position:absolute;<br />
</div>
</body>
</html>
참고예제 결과]
대한민국의 아름다운 영토, 독도의 가을
반응형
'프로그램 > HTML5 & JavaScript 1000제' 카테고리의 다른 글
| Javascript 28제] 기초총정리(iseq) 02 (0) | 2023.08.28 |
|---|---|
| Javascript 27제] 기초총정리(iseq) 01 (0) | 2023.08.21 |
| HTML5 25제] HTML & CSS for Beginner Chapter 07. MINI PROJECT 07 크리스마스 이벤트 페이지 만들기 (0) | 2021.11.12 |
| HTML5 24제] HTML & CSS for Beginner Chapter 07. 배경 색상 지정하기 (0) | 2021.11.05 |
| HTML5 23제] HTML & CSS for Beginner Cpapter 06. 회사 소개 페이지 만들기 (0) | 2021.11.05 |
댓글