CSS Visual Formatting은 문서의 각 요소를 처리하고 변환하여 CSS Box Model을 준수하는 하나 이상의 상자를 생성하는 알고리즘에 해당하는 모델입니다.
생성된 상자의 레이아웃은 다음과 같은 여러 속성에 따라 다릅니다. -
- 크기
- 유형 - 원자 인라인 수준, 블록, 인라인 또는 인라인 블록
- 포지셔닝 - 절대, 부동 또는 일반
- 문서의 자식 및 이웃 요소와의 관계
- 외부 정보 - 뷰포트 및 이미지의 너비 - 높이 등
처리된 요소의 CSS 상자 생성 -
- 차단 수준
- 이러한 요소는 자체 위아래로 줄 바꿈을 강제하고 해당 콘텐츠에 필요하지 않더라도 사용 가능한 전체 너비를 차지합니다.
- 예:구분(), 제목(
~
) 등
- 인라인 레벨
- 이러한 요소는 위아래로 줄 바꿈을 강제하지 않으며 콘텐츠에 필요한 너비만 차지합니다.
- 예:스팬(), 강력한 요소()
예
블록 레벨 상자 생성의 예를 살펴보겠습니다 -
<!DOCTYPE html> <html> <head> <title>HTML Heading</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #headingPreview h2{ background-color: #DC3545; } </style> </head> <body> <form> <fieldset> <legend>HTML Heading</legend> <input type="text" id="textSelect" placeholder="Type Heading Here..."> <div id="radioBut"> <label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked > <label>H2</label><input class="radio" type="radio" name="heading" value="h2"> <label>H3</label><input class="radio" type="radio" name="heading" value="h3"> <label>H4</label><input class="radio" type="radio" name="heading" value="h4"> <label>H5</label><input class="radio" type="radio" name="heading" value="h5"> <label>H6</label><input class="radio" type="radio" name="heading" value="h6"> </div> <div>Heading Preview: <span id="headingPreview">Output will show up here</span></div> <input type="button" onclick="changeHeading()" value="Preview"> </fieldset></form> <script> var textSelect = document.getElementById("textSelect"); var headingPreview = document.getElementById("headingPreview"); function changeHeading() { if(textSelect.value === '') headingPreview.innerHTML = 'Write a Heading'; else{ for(var i=0; i<6; i++){ var radInp = document.getElementsByClassName('radio')[i]; if(radInp.checked === true && textSelect.value !== ''){ headingPreview.innerHTML = '<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>'; headingPreview.innerHTML += '<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>'; } } } } </script></body></html>출력
이것은 다음과 같은 출력을 생성합니다 -
'미리보기'를 클릭한 후 텍스트 필드가 비어 있는 버튼 -
'미리보기'를 클릭한 후 텍스트 필드가 비어 있지 않은 버튼 및 'h2' 라디오 버튼 선택 -
예
인라인 레벨 상자 생성의 예를 살펴보겠습니다 -
<!DOCTYPE html> <html> <head> <title>em element</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } em{ background-color: #FF8A00; } </style> </head> <body> <form> <fieldset> <legend>em-element</legend> <label for="textSelect">Formatter: </label> <input id="textSelect" type="text" placeholder="John Doe"> <input type="button" onclick="convertItalic()" value="Check"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var textSelect = document.getElementById("textSelect"); function convertItalic() { for(i=0; i<2; i++){ var italicObject = document.createElement("EM"); var italicText = document.createTextNode(textSelect.value); italicObject.appendChild(italicText); divDisplay.appendChild(italicObject); } } </script> </body> </html>출력
이것은 다음과 같은 출력을 생성합니다 -
'확인'을 클릭하기 전에 버튼 -
'확인'을 클릭한 후 버튼 -
- 인라인 레벨