| 실행 소스 |
|
<?xml version="1.0" encoding="EUC-KR" ?> <!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> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" /> <title>DIV 1</title> <style type="text/css"> .f { float: left; /* 왼쪽으로 둥둥 떠있음 */ }
#box { /* position: absolute; - 절대 위치 지정 (공중에 뜬다) */ /* position: relative; - 상대 위치 지정 (앞의 태그를 기준으로 위치) */ position: fixed; /* - 해당좌표에 고정! 스크롤도 안먹음 */ border: thick dashed red; left: 50px; top: 50px; width: 700px; }
</style> </head> <body> <div> 이 구역을 침범하지마!! 씨스타 <img src="./sistar.jpg" alt="씨스타" width="200" />
</div> <div id="box"> 몽골마 <!-- 상대경로 : 앞에 '/'가 없는 상태로 나오는 경로 현재 경로를 기준으로 상대적으로 경로를 파악함 . : 현재경로, .. : 상위 --> <img src="./horse.jpg" alt="몽골마" width="200" /> 태연이<br /> <!-- 절대경로 : 앞에 '/'가 있는 경로 --> <img src="taeyeon.jpg" class="f" alt="완쌤태연" width="200" /> 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 <img src="taeyeon.jpg" style="clear: left" class="f" alt="완쌤태연" width="200" /> <!-- 줄바꿈 --> <img src="taeyeon.jpg" class="f" alt="완쌤태연" width="200" /> <img src="taeyeon.jpg" class="f" alt="완쌤태연" width="200" /> <img src="taeyeon.jpg" class="f" alt="완쌤태연" width="200" /> <img src="taeyeon.jpg" class="f" alt="완쌤태연" width="200" /> <img src="taeyeon.jpg" class="f" alt="완쌤태연" width="200" />
</div> <div> 나는 밑에 있고 싶어~~!!! </div> </body> </html>
|
실행 결과 |
|
이 구역을 침범하지마!! 씨스타
 몽골마
 태연이 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 나는 밑에 있고 싶어~~!!! |
'Dev. 웹 > CSS' 카테고리의 다른 글
| [CSS] Text - 글자에 지정되는 css 서식 (0) | 2014.10.31 |
|---|---|
| 표준 지원 색상 ( 17가지 기준 색상 포함 - 한글명 표기) (0) | 2014.10.27 |
| [HTML/CSS 예제] 순서없는 리스트 메뉴에 마우스 오버시 색 변경 (0) | 2012.09.12 |
| [CSS 예제] 마우스 위치에 따른 글자 효과주기 (0) | 2012.09.12 |
| [CSS 예제] border, padding, margin, font.. (0) | 2012.09.12 |