div에 float 속성으로 가로정렬 후 가상요소로 해제하는 방법
div는 블록요소 이므로 만들면 세로로 쌓이게 됩니다. 이 요소들을 가로로 정렬하기 위해서 float 속성을 사용합니다. float: left; 혹은 right를 작성하면 가로로 배열됩니다. 문제는 이 속성을 기준으로 뒤에 생성될 모든 div가 싹 다 가로정렬 하려는 성질을 갖게 됩니다. 그래서 float을 이제 그만두라는 뜻에서 해제를 진행하게 되는데, 오늘은 가상요소라는 것을 만들어서 해제하는 방법에 대해 배웠습니다.
저는 직업학교에서 배우는 예제들을 다 한번씩 직접 마크업 (코딩) 해보고 그 결과를 바로 확인하니 어떻게 작용하는지 알 것 같습니다. 여러분들께서도 이 부분을 직접 작성해 보시고 어떤 변화가 생기는지 경험을 통해서 깨달으신다면 더욱 기억에 오래 남게 될 것 같습니다. 우선 스타일 부분입니다. 이렇게 작성되었습니다. div를 세 개 만들었는데 두개는 가로로 배치되어있고 이들 위에 하나의 독립된 div가 생성되어 있습니다. 이제 하나의 독립된 div 영역을 밑에 가로로 배치된 두개의 div를 감싸게 될 것입니다.
body 부분입니다. 이렇게 간단하게 마크업 되어 있습니다.
위의 코딩에 대한 결과 화면입니다. 빨간색 div 두개에 float: left; 속성이 있기 때문에 이들을 해제해주지 않으면 앞으로 올 div도 모두 가로로 배치되려 할 것입니다.
가상요소는 이렇게 구성됩니다. id 값 혹은 class 값을 부여한 div 요소에 :after 속성을 부여합니다. 그리고 안쪽에 구성되는 내용은 비워둡니다. 가상으로 만들어짐과 동시에 콘텐츠 내용은 없는 상태죠. 그리고 이 가상요소를 블록요소로 만들고, 이것을 clear:both; 해주시면 해제가 되는 원리 입니다. 다시 정리해 보도록 하겠습니다.
id값 혹은 class 값:after { → 가상 요소
content: ""; → 콘텐츠 내용
display: block; → 해당 요소를 블록요소로 만듦
clear: both; → float 해제
}
그러면 결과를 살펴보겠습니다.
이렇게 출력이 됩니다. 그러면 이후에 생성되는 블록 요소들은 더 이상 저 초록색 박스의 오른쪽으로 가는것이 아닌, 아래로 정상적으로 쌓이게 될 것입니다. 끝.
"친절한효자손 취미생활" 을 검색!
