본문 바로가기
CS Study/CSS

4. 배치

Ryannn 2022. 4. 8. 12:25

1. display 프로퍼티 활용하기 - inline, inline-block, block

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>display 프로퍼티</title>
	<style>
		div{
			border : 2px solid yellowgreen;
			background: aliceblue;
			color : blue;
		}
		span{
			border : 2px dotted red;
			background : yellow;
			color : blue;
		}
	</style>
</head>
<body>
	<h1>인라인, 인라인 블록, 블록</h1>
	<hr>
	나는 <div style="display:none">div(none)</div>입니다.<br><br>
	나는 <div style="display: inline">div(inline)</div>입니다.<br><br>
	나는 <div style="display :block">div(inline-block)</div>입니다.<br><br>
	나는 <div>div<span style="display : block">span(block)</span>입니다.</div><br><br>


</body>
</html>

2. position - relative

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>relative 배치</title>
	<style>
		div{
			color : white;
			background : red;
			display : inline-block;
			height : 50px;
			width : 50px;
			border : 1px solid lightgrey;
			text-align : center;
		}
		div.top:hover{
			position : relative;
			left : 20px;
			top : 20px;
			background : green;
		}
		div.bottom:hover{
			position : relative;
			right : 20px;
			bottom : 20px;
			background : green
		}
	</style>
</head>
<body>
	<h1>상대 배치, relative</h1>
	<h2>h와 k 글자에 마우스를 올려보세요</h2>
	<hr>
	<div>T</div>
	<div class = "top">h</div>
	<div>a</div>
	<div>n</div>
	<div class = "bottom">k</div>
	<div>s</div>

</body>
</html>

3. position - absolute

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>절대 배치</title>
	<style>
		div{
			display : inline-block;
			position : absolute;
			border : 1px solid lightgrey;
		}
		div p{
			position : absolute;
			background : lightgrey;
		}
	</style>
</head>
<body>
	<h1>Merry Christmas!</h1>
	<hr>
	<h3>예수님이 탄생하셨습니다</h3>
	<div>
		<img src = "christmastree.png" width = "200px" height ="200">
		<p style ="top : 30px ;left : 50px">M</p>
		<p style = "left :100px;top:0px">E</p>
		<p style="left:100px;top:80px">R</p>
		<p style="left:150px;top:110px">R</p>
		<p style="left:30px;top:130px">Y</p>
	</div>

</body>
</html>

4. position - fixed

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>고정 배치</title>
	<style>
		p{
			background : red;
			color : white;
			position : fixed;
			bottom : 10px;
			right : 10px;
			width : 100px;
			height : 50px;
			padding : 5px;
		}
	</style>
</head>
<body>
	<h1>Merry Christmas!</h1>
	<hr>
	<img src = "christmastree.png" width ="300px" height = "300px">
	<p>예수님이 탄생하셨습니다</p>

</body>
</html>

5. position - float

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>고정 배치</title>
	<style>
		p{
			background : red;
			color : white;
			position : fixed;
			bottom : 10px;
			right : 10px;
			width : 100px;
			height : 50px;
			padding : 5px;
		}
	</style>
</head>
<body>
	<h1>Merry Christmas!</h1>
	<hr>
	<img src = "christmastree.png" width ="300px" height = "300px">
	<p>예수님이 탄생하셨습니다</p>

</body>
</html>

6. z-index 프로퍼티

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>고정 배치</title>
	<style>
		p{
			background : red;
			color : white;
			position : fixed;
			bottom : 10px;
			right : 10px;
			width : 100px;
			height : 50px;
			padding : 5px;
		}
	</style>
</head>
<body>
	<h1>Merry Christmas!</h1>
	<hr>
	<img src = "christmastree.png" width ="300px" height = "300px">
	<p>예수님이 탄생하셨습니다</p>

</body>
</html>

7. visibility 프로퍼티

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>visibility 프로퍼티</title>
	<style>
		span{
			visibility: hidden;
		}
	</style>
</head>
<body>
	<h1>다음 빈 곳에 숨은 단어?</h1>
	<hr>
	<ul>
		<li>I(<span>love</span>) you.</li>
		<li>CSS is Cascading(<span>Style</span>) Sheet.</li>
		<li>응답하라(<span>1988</span>)</li>
	</ul>

</body>
</html>

8. overflow 프로퍼티

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>overflow 프로퍼티 활용</title>
	<style>
		p{
			border : 1px dotted black;
			width : 15em;
			height : 2em;
		}
		#hidden{
			overflow : hidden;
		}
		#visible{
			overflow : visible;
		}
		#scroll{
			overflow : scroll;
		}
	</style>
</head>
<body>
	<h1>overflow 프로퍼티</h1>
	<hr>
	<p id = "hidden">overflow에 hidden값을 적용하면 콘텐트가 잘려서 출력됩니다</p><br>
	<p id = "visible">overflow에 visible값을 적용하면 콘텐트가 박스를 넘어가서도 출력됩니다</p><br>
	<p id = "scroll">overflow에 scroll값을 적용하면 콘텐트가 스크롤에 따라 출력됩니다</p>
</body>
</html>

9. display 활용 - 1

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>5</title>
	<style>
		div{
			display : inline;
			
			border : 2px solid yellowgreen
		}
	</style>
</head>
<body>
	<h3>3개의 div 활용</h3>
	<hr>
	<div>캔버스에 이미지를 그리기 위해서는 이미지를 담을 때 객체가 먼저 필요하다.</div>
	<div>image 객체의 src 프로퍼티를 이용하여 비트맵을 로드한다.</div>
	<div>이미지 로딩이 끝나면 그 때 비로소 이미지의 너비와 높이가 제대로 알려진다</div>

</body>
</html>

10. display 활용 - 2

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>소연재</title>
	<style>
		div{
			width : 100%;
			background : violet;
			color : blue;
			position: fixed;
			bottom : 0px;
			left : 0px;
		}
	</style>
</head>
<body>
	<h2>소연재</h2>
	<hr>
	저는 체조선수 손연재입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치 찌개와 막국수 무척 좋아합니다.
	<div>손연재 공연은 24일입니다</div>

</body>
</html>
저작자표시

'CS Study > CSS' 카테고리의 다른 글

5. 리스트 / 표 / 폼 꾸미기  (0) 2022.04.08
3. 박스 모델  (0) 2022.04.07
2. 색 / 텍스트 꾸미기  (0) 2022.04.07
1. 셀렉터  (0) 2022.04.07

'CS Study/CSS' Related Articles

티스토리툴바