|
CSS에서 이미지나 텍스트의 위치를 지정할 때에는 align 속성을 사용하였지만, float라는 속성도 동일한 역할을 한다. float를 이용한 위치 지정 방법에 대해 알아보자. |
1. 스타일 시트(CSS)의 이미지나 텍스트의 위치 지정 (right)
|
[Source] |
[Description] |
|
<html>
<head>
<style type="text/css" >
<!--
img {
float : right;
}
body, img {
margin : 40px;
}
-->
</style>
</head>
<body>
<img src="http://www.webmadang.net/main/logo2.gif">
float를 이용한 이미지와 텍스트의 위치지정
</body>
</html> |
-> 이미지 오른쪽 정렬
-> 본문의 텍스트와 이미지 여백(왼쪽, 오른쪽, 상단, 아래, 이미지와 텍스트와의 여백)을 각각 40px
|
|
[Result] |
|
|
2. 스타일 시트(CSS)의 이미지나 텍스트의 위치 지정 (left)
|
[Source] |
[Description] |
|
<html>
<head>
<style type="text/css" >
<!--
img {
float : left;
}
body, img {
margin : 0px;
}
-->
</style>
</head>
<body>
<img src="http://www.webmadang.net/main/logo2.gif">
float를 이용한 이미지와 텍스트의 위치지정
</body>
</html> |
-> 이미지를 왼쪽으로 정렬
-> 본문의 텍스트와 이미지 여백(왼쪽, 오른쪽, 상단, 아래, 이미지와 텍스트와의 여백)을 각각 0px
|
|
[Result] |
|
|
☞ 잠깐만여! 강좌는 푹~ 퍼가지 마시고 링크만 걸어주세요~
작성자 : 웹제작 토탈 커뮤니티 (http://www.webmadang.net) 컴쟁이 | 
컴쟁이