21. 이미지관련스타일
.NET프로그래밍/CSS 2.0 2009. 7. 29. 10:02 |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>이미지관련스타일</title>
</head>
<body>
<img src="./images/a.jpg" alt="" style="float:left;" />
안녕하세요.<br /> 반갑습니다.
<span style="clear:both;">또 만나요.</span> 언제요?
</body>
</html>
<!--
- 이미지 옆에 오는 텍스트는 스타일을 적용하지 않으면 한 줄만 보이는 게 기본 원리임. 웹브라우저를 줄여도 밀려 내려가면서 한 줄만 보임.
- <table>태그 대신 <div>/<span>태그로 웹사이트 레이아웃 잡을 때 float와 clear를 많이 쓴다.
- float : 이미지 "배치"할 '위치'(float으로 이미지가 배치되면 이미지 옆에 글씨 여러줄 올 수 있음.) - left(많이 쓴다.) / right / none : 변화없음(이미지 옆에 글씨 한줄만 옴)
- clear : float 해제(이미지 아래로 글씨 끌고(밀려) 내려간다.) - 방향 : both(많이 쓴다.) / left / right
-->
< 실행결과 >
'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글
| 23. 레이어의 다양한 속성 (0) | 2009.07.29 |
|---|---|
| 22. div태그로 레이아웃 설정하기 (0) | 2009.07.29 |
| 20. 리스트(목록)관련스타일 (0) | 2009.07.29 |
| 18. 스크롤바관련스타일 (0) | 2009.07.28 |
| 17. 링크관련스타일 (0) | 2009.07.28 |