css 왕초보 탈출하기 06 clear 속성, 테크닉

css 왕초보 탈출하기 06 clear 속성, 테크닉

레이아웃 뭐야, 왜이래, 왜 아래있는게 올라와? 거긴 float안줬는데 바ㅓ바ㅣㅓ니ㅏ어미ㅏㅇ

 

약간의 복습

123/456을 의도하고 작성하였으나, float 속성의 특징으로 1234/56이 된 화면

이 화면의 문제는 무엇인가?

ul과 li는 기본적으로 block레벨이다. 블록속성에 대해서 모르겠다면 아래 참고.

※ 어떤 분이 제보 주신결과 li는 block레벨 요소이긴 하나, display:list-item 이라는 속성이라고 합니다. 자세한 내용은 아래 내용을 참고해주세요.

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style

list-style

 

CSS 왕초보 탈출하기 02 - block 속성 (1/2)

 

block 속성이라면, 기본적으로 100%의 너비를 가지며 한줄을 모두 차지하는 특성을 가지고 있다.

 

하지만 위 예제의 경우, 123이 float속성의 영향을 받았으며 가로로 정렬 되었다. (여기까진 의도되었다.)

다만, 갑자기 123 옆에 4가 붙더니, 아래에 5 그 아래에 6이 되는게 문제다.

왜 4는 3옆으로 위치하는가?

 

float : left 적용을 받은 123의 상태는 지금. 어떨까?

 

width(너비): 지정된 너비가 없다면, 컨텐츠만큼의 너비를 가짐(여기서는 텍스트의 양이된다.)

 

display: block 속성이나, float의 적용으로, 좌우측으로 남는 공간이 있다면, 다음 컨텐츠가 옆으로 자리한다.

 

따라서, 123에게 float left를 주었고,  좌측으로 가로 정렬 되었다.

다만 123이 float(부유된)상태이기 때문에, 다음 컨텐츠인 4가 자리하게 되었으며, 4는 100%의 너비를 가지는 block속성이기 때문에 해당 줄을 모두 차지하였다.

 

123

4

5

6

위의 배치에서

 

123이 붕 떳기 때문에, 123옆에 4가 올수 있었으며, 그 아래에 5, 6이 자리하는 것이다.

 

 

때문에 float 속성 적용, 여기서 끝낼겁니다~~ 하는 신호가 필요한데, clear 속성인것이다.

 

float으로 여기부터 뜹니다~~ 신호를 주었다면,

 

celar속성은 여기까지만요~~ 하는 신호인것이다.

 

 

 

 

방법

clear속성을 float에 영향을 안받았으면 싶은 요소에 걸어주면 해결이 되긴 하겠으나, 번거롭다.

 

그렇다면,

float을 사용하는 요소들을 div로 감싸고,

해당 div가 종료되는 시점(/div)에

클리어를 걸어주면 편리하지 않을까?

float요소를 묶는 div1이 있다. div1::after 속성으로 float을 clear 할 것이다. (아래 설명 참조)

 

여기서 ::after 이라는 가상선택자를 이용하는 테크닉을 사용할 수 있다.

 

::after란, 해당 div 다음으로 위치하는 가상 선택자이다.

 

div가 고양이일 경우 ::after는 무엇일까? 꼬리에 해당한다.

div에 맨 마지막, 구성요소.

 

우리가 위에서고민했던 지점을 다시 생각해보자.

해당 div가 종료되는 시점(/div)에 클리어를 걸어주면 편리하지 않을까

 

 

그렇게 ::after요소에 clear속성을 먹여주면,

float된 요소들의 부모가 끝나는 시점에 clear해주겠다는 의미이므로

우리가 원하던 개행처리 및, 플룻 요소들의 붕 떠있는 높이가 반영 될 것이다.

 

div::after
{
	content:''; 
    display:block;
    clear:both;
}
	//div::after은 div가 끝나고 뭔가 더 붙일겁니다~~라고 해석 할 수 있다. 글자 그대로, div 이후라는 뜻으로 받아들일 수 있다.
    //after속성을 사용하기 위해서는 최소한 '';을 사용해준다. 만약 글자일경우 해당 글자가 div다음으로 위치하게 된다. 	
    //display:block 속성으로 한줄을 모두 차지하는, 보이는 상태로 만들어준다.
    //clear속성으로 div 내부에 있는 float된 요소들의 높이가 div높이로 받아들여지며 안정화(?), float되어 높이값이 없던 
    //요소들의 높이값이 잡히게 된다.
    

 

 

---

다음시간 

가상요소 after와 float에 대해서 배워보자