CSS layout 구조 문제

css의 속성을 이용하여 간단한 레이아웃을 해봤습니다.

float 속성은 블럭 속성으로 float과 clear:both 등으로 구조를 배치할수 있었습니다.

하지만 float 속성을 주게 되면 부모가 자식의 넓이와 폭을 잃어버리게 됩니다.

예를 들면 float으로 구역을 만들고 이미지를 올리고 그 다음 구역에 글을 작성하더라도

이부분이 섞여 버린다는 것이 문제입니다.

대략 이런 layout을 원했는데 ~~~

실제론 아래와 같은 문제가 발생하게 됩니다.

다른 구역이 따라서 올라가 버리는 문제가 발생하는 거죠.

체조 요정 손연재

이번에는 중앙 메인의 다른 글이 적혔있습니다.

그렇다고 layout <div>구역마다 높이(height)를 다 지정할순 없습니다.

위의 방법을 해결하기 위해서도 몇가지 방법이 존재하지만

</div>

이번에는 중앙 메인의 다른 글이 적혔있습니다

</div>

하나는 floatd을 포함하는 부모 속성에 display:inline-block 속성을 줘서

자식이 속성을 값을 인식 시켜주는 방법이 있습니다.

display:inline-block 속성 자리에 overflow:hidden; 속성을 줘서

높이를 강제 인식시킬수도 있습니다.

#head{border:1px solid red; display:inline-block;}

img{float:left;}

#main{border:1px solid blue;}

또다른 방법은 :after 속성을 주는 것입니다.

선택자 :after는 선택자 뒤의 값에 해당되는 속성 값을 주는 것입니다.

가상의 content가 블럭요소로 있다고 인식 시키는 것이죠.

#head{border:1px solid red; }

img{float:left;}

#main{border:1px solid blue;}

#head:after{display:block; content:" "; clear:both; }

:after 속성이 있다면 반대로 :before 속성도 있습니다.

선택자 : before 는 반대로 선택자 앞의 값에 해당되는 속성 값을 주는 방법입니다.

codus