HTML 관계를 고려한 배치(float)

HTML

by 기련이 2020. 5. 18. 17:53

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>관계를 고려한 배치</title>
<style type="text/css">
img{
	float: right;
	margin: 0px 0px 10px 10px;
}
</style>
</head>
<body>
 <p>float 속성은 웹 문서의 레이아웃을 
설계하는 과정에서 많이 사용하는 속성입니다.</p>
<p>
<img src="Penguins.jpg" alt="image" width="140" height="140">
float 속성은 특정 요소를 떠 있게 해줍니다. 
여기서 '떠 있다'라는 말의 의미는 특정 요소가 
기본 레이아웃에서 벗어나 웹 문서의 왼쪽이나 
오른쪽에 이동하는 것을 말합니다. 
float 속성은 복잡한 형태의 레이아웃을 
구성하는 데 필요한 핵심 속성으로, 특정 요소가 
주변 요소와 자연스럽게 어울리도록 해줍니다. 
주의할 점은 float 속성을 사용할 때 요소의
위치가 고정되면 안 되기 때문에 position 속성의 
absolute를 사용하면 안 됩니다.
</p>
</body>
</html>

float
요소 간의 관계를 고려하여 각 요소를 배치
속성 값
1. left : 요소를 왼쪽에 배치
2. right : 요소를 오른쪽에 배치
3. none : float 속성을 덕용하지 않음.
4. inherit : 부모 요소의 속성을 그대로 적용.

'HTML' 카테고리의 다른 글

HTML z-index(요소의 중첩 처리) (0)	2020.05.18
HTML overflow (0)	2020.05.18
float 제거 (0)	2020.05.18
HTML 정적 위치(static) (0)	2020.05.18
HTML 그림자 (추후에 정리할 예정..) (0)	2020.05.15