메뉴 건너뛰기

검색창 닫기

HEUKMYO

web publishing

140702_display,float,overflow

2014.07.02 10:13 read.169 

<!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" lang="ko" xml:lang="ko">
	<head>
		<meta name="generator" content="editplus" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0;padding:0}
			.b1{float:left;width:300px;height:100px;background:yellow}
			.b2{float:right;width:300px;height:100px;background:green}
			.b3{clear:both;height:100px;background:blue}
			#wrap:after{content:"";width:100%;*zoom:1;display:block;clear:both;}			
			p{width:200px;height:100px;background:yellow;float:right}
			#wrap p:first-child{background:aqua;float:left}
			#wrap{background:pink;overflow:hidden}
		</style>
	</head>
	<body>
		<div id="wrap">
			<p class="b1">내용1</p>
			<p class="b2">내용1</p>
		</div>
		<p class="b3">내용3</p>
	</body>
</html>

display

<!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" lang="ko" xml:lang="ko">
	<head>
		<meta name="generator" content="editplus" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0;padding:0}
			h1,a,p{background:aqua;border:1px solid #fff}
			h1{display:inline}
			h1+a{display:block}
			h1+a+a{display:inline-block;width:300px}/*줄바꿈 속성은 없으나 너비값은 갖음*/
			h1+a+a+p{display:inline-block;*display:inline;width:200px;*zoom:1;}
/*display:inline- ie7버전에서는 인라인으로 보여줌 *zoom:1;을 너비값도 적용됨*/
			p:last-child{display:none}/*문서판독기에서는 내용을 읽어오지 않음*/
		</style>
	</head>
	<body>
		<h1>display</h1>
		<a href="#">네이버</a>
		<a href="#">웹표준</a>
		<p>내용1</p>
		<p>내용2</p>
	</body>
</html>


overflolw

<!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" lang="ko" xml:lang="ko">
	<head>
		<meta name="generator" content="editplus" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			*{margin:0;padding:0}
			ul,li{list-style:none}
			p{float:left;margin:10px;padding:5px;width:200px;height:150px;background:yellow}
			.p1{overflow:hidden} /*숨겨줌*/
			.p3{overflow:auto} /**/
			.p2{overflow:scroll} /*양쪽으로 스크롤 생김*/
			.p4{overflow-y:scroll} /*y축에 스크롤생성 */
			.p5{overflow-x:scroll} /*x 축에 스크롤생성 */
			.p5 span{display:block;width:1000px}
		</style>
	</head>
	<body>
		<p class="p1">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		<p class="p2">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		<p class="p3">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		<p class="p4">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		<p class="p5"><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span></p>
	</body>
</html>


float

float은 내용만큼만 줄어듬


float 해지하는 방법

1.다음박스에 clear:both를 넣어준다.

2.가상요소를 생성해서 블록속성(clear은 블록속성에서만 적용)을 바꿔서Clear 적용 flaot을 해지한다.

  ie8이상에서만 적용


  ie7이하에서 볼수 있는 방법

      1. width값을 준다.

       #wrap:after{content:"";width:100%display:block;clear:both;}
      2. after를 적용한 곳에 *zoom:1; - *zoom:1는 ie7버전에서만 적용, zoom은 표준 속성이 아님, 화면을 확대해줌 

  #wrap:after{content:"";width:100%;*zoom:1;display:block;clear:both;}


3. flaot을 감싸는 박스에 overflow:hidden을 넣어준다.

inline-block은 ie 7에서는 잘 나타나지 않음

블럭요소에보다는 인라인 요소에 많이 사용됨


<head>
<style type="text/css">
   *{margin:0;padding:0}
   #wrap{background:pink}
   .b1{float:left;width:300px;height:100px;background:yellow}
   .b2{float:right;width:300px;height:100px;background:green}
   .b3{clear:both;height:100px;background:blue}
   #wrap:after{content:"";width:100%;*zoom:1;display:block;clear:both;}  
 </style>
 </head>


http://www.html-ipsum.com/

추가메뉴 목록
위로