float3 float 적용 시 발생하는 부모의 높이 문제 해결 방법 1. 오류 부분 2. 원인 부모 요소에 height:auto이거나 높이가 없는경우, 자식 요소의 높이를 인식하지 못하고 감싸지 못해 위의 오류가 발생했다. 3. 해결 방법 [부모요소와 자식요소 모두 다 float를 주는 방법] 1 2 3 [부모요소에 overflow:hidden을 주는 방법] 1 2 3 [after 가상 선택자를 이용하는 방법] ★가장 많이 사용됨★ 1 2 3 부모class (혹은 id) :after { content : ""; display : block; clear : both; } 가상 선택자를 이용한 방법은 실무에서 가장 많이 사용하는 방법으로 .clearfixed:after{content: ""; display: block; clear: both;} 라고 만들어 두고 필요한 곳에.. 2022. 8. 16. clear 알아보기 1. clear ? float 속성으로 정렬된 이미지나 텍스트를 취소해 그 전에 상태로 되돌리고 싶을 때 사용한다. 2. clear 속성 clear : left 왼쪽 배치 취소 clear : right 오른쪽 배치 취소 clear : none clear값을 설정하지 않음 clear : both 왼쪽, 오른쪽 취소 ( 가장 많이 사용함!! ) 2022. 8. 16. float 알아보기 1. float ? 이미지나 텍스트를 정렬할때 사용하는 CSS속성이다. 2. float의 속성값 float : left 왼쪽 배치 float : right 오른쪽 배치 float : inherit 부모값에 상속 float : none 기본값 * position:absolute가 사용된 경우 float 속성 무시된다. 3. float 적용 예시 [float 속성이 없는 경우] 요소는 대표적인 블록(block) 요소로 float 속성이 없어 아래로 쭉 나열된다. 1 2 3 [float: left가 적용된 경우] 에 float: left 가 모두 적용되어 있어 왼쪽에 쭉 나열된다. 1 2 3 [float: left와 float:right가 같이 적용된 경우] 1,2번박스는 왼쪽에서 쭉 나열되고 3번박스는 창의.. 2022. 8. 14. 이전 1 다음
