본문 바로가기

Python_WEB/HTML

HTML5 - 190616 Basic Study 41(Float 해제 방법)

반응형

1. Float 해제 방법

float를 해제하지 않으면 다음 박스들에 속성이 제대로 지정되지 않음.

박스를 감싸는 박스에 부여된 배경, 테두리 여백 등이 하나도 나오지 않음.

레이아웃을 제대로 표현하는데 float 해제는 반드시 필요함.

부모 요소에 height를 주면 float 해제 효과가 있으나 본문 내용에 height를 주면 유지보수가

힘들어지니 container 본문 부분에서는 꼭 필요한 경우가 아니면 height를 주지 않음.

 

2. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 레이아웃 공식정리하기</title>
<link href="css/ex01.css" rel="stylesheet">
</head>

<body>
<h1>CSS 레이아웃 공식정리하기</h1>
<!-- ul>li*3>a[href=#]{박스$} -->
<ul id="mama">
  <li><a href="#">박스1</a>
  	<ol>
    	<li>서브메뉴1</li>
    </ol>
  </li>
  <li><a href="#">박스2</a>
   	<ol>
    	<li>서브메뉴2</li>
    </ol>
  </li>
  <li><a href="#">박스3</a>
   	<ol>
    	<li>서브메뉴3</li>
    </ol>
  </li>
</ul>
<h1 id="next">CSS 레이아웃 공식정리하기</h1>
</body>
</html>

 

3. CSS Code

@charset "utf-8";
/* CSS Document */

/* CSS 초기화 선수작업 */
*{
	margin:0;
	padding:0;
}
ul,li,ol{
	list-style:none;
}
a{
	text-decoration:none;
	color:black;
}

/* 부모 */
#mama{
	border:1px solid red;	
}
/* 자식 */
#mama li{
	border:1px solid blue;
	}

/* 서브메뉴 활성화 */
#mama>li{
	position:relative;
}
#mama ol{
	width:100%;
	height:50px;
	background:pink;
	position:absolute;
	display:none;
	left:0;
	top:40px;
}
#mama>li:hover>ol{
	display:block;
}

/* 박스가로로 배치하기 */
/* 1) float 처리한다 */
/* 2) display:inline-block */
/* 3) display:inline 박스속성이 글자로 변환된다 */
/* 4) position:absoulute */
/* 5) display:flex 속성을 사용한다 */

#mama li{
	float:left;
	padding:10px;
}

/* float 해제 방법 */

/* 1) float해제 -> 줄이 바뀐다 */
/* 부모요소와는 무관하다 */
#next{
	/* clear:both; */
}

/* 2) 부모박스에 다시 float처리하고 width 값을 준다. */
/* 박스에 float 처리하면 width가 원래 100%인데 내용물 크기에 따라
width가 변동된다. */
#mama{
/* 	float:left;
	width:100%; */
}

/* 3) overflow:hidden; 사용 */
/* 서브메뉴를 사용할 경우 서브메뉴가 안보인다 */
/* 서브메뉴가 있는경우 사용하면 안된다 */
#mama{
	/* overflow:hidden; */
	}

/* 4) 부모의 높이를 준다 */
#mama{
	/* height:60px; */
}

/* 5) 가상 요소 after를 주어 해제한다(추천방법) */
#mama:after{
	content:'';
	display:block;
	clear:both;
}

 

4. HTML / CSS 파일

ex01.html
0.00MB
ex01.css
0.00MB

 

5. 미리보기

< CSS 레이아웃 정리 >

 

6. GitHub

https://github.com/ankiwoong/HTML

반응형