float을 통해 요소를 나열했는데 한쪽으로만 쭉 나열되면 곤란하다.
중간에 끊어줘서 나열해줘야 하는데
그럴 땐 clear 키워드를 사용한다.
사용할 요소를 지정하여 clear: left; 사용하면 다음줄로 넘어간다.
left말고 다른 속성도 직접 써보고 참조해보자
<html>
<head>
<meta charset="UTF-8">
<title>Float Clear</title>
<link rel="icon" href="img/btn.png">
<style>
div{
width: 50px;
height: 25px;
border: 3px solid yellowgreen;
margin: 5px;
float: left;
}
/*clear로 다음줄로 밀기*/
div.first{
/*클래스는 중복을 피하기 위해*/
/*왠만하면 [요소].[클래스 이름] 이와 같이 사용하자.*/
border: 3px solid red;
clear: left;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div class="first"></div>
<div></div>
<div></div>
<div class="first"></div>
<div></div>
<div></div>
</body>
</html>
4번째와 7번째에 first라는 이름을 부여하고 clear를 사용하였다.
'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글
| [CSS]03-10.z-index, opacity (화면 순서, 투명도 조절) (0) | 2018.10.18 |
|---|---|
| [CSS]03-09.position(static, relative, absolute, fixed) 요소의 위치 속성 (0) | 2018.10.17 |
| [CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인 (0) | 2018.10.17 |
| [CSS]03-06.배운 내용 활용해서 사이트의 메뉴 바 만들기 (0) | 2018.10.17 |
| [CSS]03-05.float, link 정렬, 링크 속성, 이미지 밑줄 삭제 (0) | 2018.10.17 |