CSS 시각적 서식(Visual Formatting)은 문서 내 각 요소를 처리하고 변환하여, CSS 박스 모델(CSS Box Model)에 부합하는 하나 이상의 박스를 생성하는 알고리즘에 해당하는 모델입니다.
CSS 박스 생성 유형
처리된 요소는 다음 두 가지 방식으로 박스가 생성됩니다.
1. 블록 레벨(Block Level) 요소
- 요소의 위와 아래에서 줄바꿈이 강제로 발생하며, 콘텐츠가 전체 너비를 필요로 하지 않더라도 사용 가능한 전체 너비를 차지합니다.
- 예시: <div>, 제목 태그(<h1> ~ <h6>) 등
2. 인라인 레벨(Inline Level) 요소
- 요소의 위아래로 줄바꿈이 발생하지 않으며, 콘텐츠에 필요한 만큼의 너비만 차지합니다.
- 예시: <span>, <strong> 등
블록 레벨 박스 생성 예제
다음은 HTML 제목 태그(h1~h6)를 활용해 블록 레벨 박스 생성을 확인하는 예제입니다.
<!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;
}
</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>실행 결과
텍스트 입력란이 비어 있는 상태에서 [Preview] 버튼을 클릭한 경우:
텍스트를 입력하고 H2 라디오 버튼을 선택한 후 [Preview] 버튼을 클릭한 경우:
제목 태그가 한 줄 전체를 차지하며 위아래로 줄바꿈이 발생하는 것을 통해, 블록 레벨 요소의 특성을 확인할 수 있습니다.
인라인 레벨 박스 생성 예제
다음은 <em> 요소를 활용해 인라인 레벨 박스 생성을 확인하는 예제입니다.
<!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;
}
</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>실행 결과
[Check] 버튼을 클릭하기 전:
[Check] 버튼을 클릭한 후:
<em> 요소는 줄바꿈 없이 텍스트 흐름 안에서 필요한 너비만 차지하는 것을 확인할 수 있습니다. 이처럼 블록 레벨과 인라인 레벨 요소의 박스 생성 방식을 이해하면 CSS 레이아웃 설계가 훨씬 수월해집니다.