기초) float/clear 속성 정리 및 활용

2020. 4. 22. 20:25

div {float:}

기능 :

기본적인 block level 요소들을

좌측이나 우측으로 정렬.

설명 :

블럭 레벨 요소들은

글자가 속해 있는 줄, 칸의

공간을 모두 쓴다.

예)

<style>
   li{ border: 2px solid red;}
</style>

차지하는 공간 크기를

보다 확실히 보기 위해

테두리를 그려 보자면,

<style> li{ border: 2px solid red;} </style>

이게 바로 블럭 레벨 요소.

float은 글자의 박스 크기를

글자 수만큼 줄여주는 기능이 있고

사용법은 다음과 같다.

1️⃣float:left;

li{ float:left; border: 2px solid red;}

화면 왼쪽을 중심으로

옆으로 붙는다

2️⃣float:right;

li{ float:right; border: 2px solid red;}

화면 우측을 중심으로 붙지만

카테고리의 순서가

바뀐다는 문제가 생긴다.

*해결 방법*

리스트들을 우측으로 보내면서

동시에 카테고리 순서를

유지하기 위해서는,

<style>
   ul { float:right;}
   li { float:left; border: 2px solid red;}
</style>
</head>

<body>
     <ul>
       <li>홈&gt;</li>
       <li>회사소개&gt;</li>
       <li>상품소개&gt;</li>
       <li>다운로드&gt;</li>
     </ul>
</body>

위처럼

부모 태그인 ul을

오른쪽, {float:right;} 보내고

li들은 {float:left}로 설정하면

해결!

3️⃣float:none;

플롯 적용 값 초기화

*주의사항*

float 속성을 사용하면

플롯을 설정한 영역

바로 다음 영역까지

영향을 끼치는데

아래 예제를 한번 보자.

샘플 코드)

<style>
     li { float:left; }
</style>


<body>

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>
<div>text</div>
<div>text2</div>

</body>

플롯 속성을 li에 넣었는데

결과를 보면

li 바로 다음에 있는

div 요소인 text 글자가

같이 붙어 올라와 있다.

즉,

기본적인 플롯의 적용 범위는

해당 요소의 바로 다음요소까지.

위 문제를 해결하기 위해서

반드시 함께 사용하는 속성이

있는데, 바로

{clear}

속성이다.

{clear}

clear 속성에는 두 가지

값이 있는데 우선 첫 번째로,

1️⃣clear:both;

샘플 코드)

<style>
     li { float:left; }
     div { clear:both; }
</style>


<body>

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>
<div>text</div>
<div>text2</div>

</body>

플롯을 대입한 요소의

바로 다음 요소인 div에

clear:both를 넣어 주었더니

위와 같이 해결되었다!

플롯을 준 다음 요소에는

꼭 {clear:both;}를

넣어주자!

2️⃣:after {content:"";}

활용 예로

float이 적용된 요소 부모 요소의

세로값이 0이 되었을때

가상의인라인 레벨 요소를

만들고 이 요소를

블럭 레벨 요소로 변경 후

clear:both를 넣어줌으로서

사라진 세로 값을 찾아줄 수 있다.

에프터 컨텐트,

컨텐트는

inline level element 중

하나인 가상의 <span>

이라고 생각해도 좋다.

샘플 코드

.a1 { background:pink;}
.a1 div { float:left; border: 1px solid red;}
.clear:after {content:""; display:block; clear:both;} 

</style>

</head>

<body>
  
   <div class="a1 clear">
      <div>sample</div>
      <div>sample2</div>
   </div>

단계별로 직접 해보면 이해가 쉽다.

:after {content:"";}

하나의 공식으로 외워두자!

728x90

'프로그래밍 > CSS' 카테고리의 다른 글

기초) background 속성 및 투명도 RGBa 정리 (0)	2020.04.24
기초) text style / background 속성 정리 (0)	2020.04.23
기초) position 속성 및 활용법 정리 (0)	2020.04.22
기초) box model 개념 및 사이즈 측정법 (0)	2020.04.21
기초) 여백(padding/margin)과 선(border) 정리 (0)	2020.04.21

타쿠대디