#1 ์น ํ์ด์ง
๋ค์ ๋์ฌ ๋ชจ๋ ์ฝ๋๋ฅผ ํ๋์ ํ์ผ์ ํฉ์ณ ๋ฃ์๋ค.
๋ฐฑ๋ฌธ์ด ๋ถ์ฌ์ผ๊ฒฌ. ์ฌ๋ฌ ๊ฐ์ div๋ฅผ ๋์ดํ๊ณ ๊ฐ๊ฐ์ displayใwidthใheight ์คํ์ผ ์์ฑ์ ๋์ ์ผ๋ก ๋ณ๊ฒฝํ ์ ์๋ ํ๋ก๊ทธ๋จ์ ๋ง๋ค์๋ค. ์ฅ๋๊ฐ์ฒ๋ผ ๋ง์๋๋ก ๋ค๋ฃจ์ด๋ณด๋ฉด์ ๊ฐ์ ์ตํ์.
#2 ์๊ณ ๋ฆฌ์ฆ
#3 ์ฝ๋
#3-1 HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display ์์ฑ ๊ฐ block, inline, inline-block์ ์ฐจ์ด</title>
<link rel="stylesheet" href="./inline-block.css">
</head>
<body>
<div id="display_panels">
<div id="abcd">abcd</div>
<div id="efgh">efgh</div>
<div id="ijkl">ijkl</div>
<div id="mnop">mnop</div>
<div id="qrst">qrst</div>
<div id="uvwx">uvwx</div>
<div id="yz">yz</div>
</div>
<hr>
<div id="control_panels"></div>
<script src="./inline-block.js"></script>
</body>
</html>
#3-2 CSS
#display_panels * {
/* css iniciation */
padding: 0;
margin: 0;
box-sizing: border-box;
}
#display_panels {height: 200px;}
#abcd {background-color: aquamarine;}
#efgh {background-color: burlywood;}
#ijkl {background-color: blueviolet}
#mnop {background-color: bisque}
#qrst {background-color:coral}
#uvwx {background-color:greenyellow}
#yz {background-color:dodgerblue}
hr {
margin: 40px 0 20px 0;
}
#control_panels .name {display: inline-block; width: 44px;}
#control_panels .check_symbol {color: transparent;}
#control_panels .check_symbol.block {color: black;}
#control_panels .width_value {display: inline-block; width: 54px;}
#control_panels .height_value {display: inline-block; width: 44px;}
#control_panels * > * {height: 24px; margin: 2px 0 2px 0;}
#abcd_control .name {background-color: aquamarine;}
#efgh_control .name {background-color: burlywood;}
#ijkl_control .name {background-color: blueviolet}
#mnop_control .name {background-color: bisque}
#qrst_control .name {background-color:coral}
#uvwx_control .name {background-color:greenyellow}
#yz_control .name {background-color:dodgerblue}
#3-3 JavaScript
function sizeIniciate(elementsId) {
let selector = document.getElementById(elementsId)
selector.style.width = selector.offsetWidth + 'px';
selector.style.height = selector.offsetHeight + 'px';
}
function changeDisplay(elementsId, displayType) {
let selectorForDisplayPanel = document.getElementById(elementsId);
selectorForDisplayPanel.style.display = displayType;
/* ์ฒดํฌ ๊ธฐํธ ์ฒ๋ฆฌ */
let selectorForControlPanel = document.getElementById(`${elementsId}_control`);
let checkSymbols = selectorForControlPanel.querySelectorAll('button > span.check_symbol');
for(let i = 0; i < checkSymbols.length; i++) {
checkSymbols[i].style.color = 'transparent';
}
let selectedCheckSymbol = selectorForControlPanel.querySelector(`button > span.${displayType}`);
selectedCheckSymbol.style.color = 'black'
/* inline์ผ ๋ ์ทจ์์ ์ฒ๋ฆฌ */
let widthValueElement = selectorForControlPanel.querySelector('.width_value');
let heightValueElement = selectorForControlPanel.querySelector('.height_value');
if(displayType == 'inline') {
widthValueElement.style.textDecoration = 'line-through';
heightValueElement.style.textDecoration = 'line-through';
} else {
widthValueElement.style.textDecoration = 'none';
heightValueElement.style.textDecoration = 'none';
}
}
function changeSize(elementsId, sizeType, increment) {
let selectorForDisplayPanel = document.getElementById(elementsId);
let previousValue = parseInt(selectorForDisplayPanel.style[sizeType]);
let updatedValue = Number(previousValue) + Number(increment)
if(updatedValue < 0) {
selectorForDisplayPanel.style[sizeType] = '0px';
} else {
selectorForDisplayPanel.style[sizeType] = updatedValue + 'px';
}
let selectorForControlPanel = document.getElementById(`${elementsId}_control`);
let sizeValueElement = selectorForControlPanel.querySelector(`.${sizeType}_value`);
sizeValueElement.textContent = selectorForDisplayPanel.style[sizeType];
}
let divElements = [
document.getElementById('abcd'),
document.getElementById('efgh'),
document.getElementById('ijkl'),
document.getElementById('mnop'),
document.getElementById('qrst'),
document.getElementById('uvwx'),
document.getElementById('yz')
];
for (let i = 0; i < divElements.length; i++) {
let s = '';
s += `<div id="${divElements[i].id}_control">\n`; // ''๊ฐ ์๋๋ผ ``์ ์ฌ์ฉํ๋ค. ์ด ๋์ ๋ค๋ฅด๋ค.
s += ` <span class="name">${divElements[i].id}</span>\n`;
s += ` <button onclick="changeDisplay('${divElements[i].id}', 'block')">block <span class="check_symbol block">โ</span></button>\n`;
s += ` <button onclick="changeDisplay('${divElements[i].id}', 'inline')">inline <span class="check_symbol inline">โ</span></button>\n`;
s += ` <button onclick="changeDisplay('${divElements[i].id}', 'inline-block')">inline-block <span class="check_symbol inline-block">โ</span></button>\n`;
s += ` <span>|</span>\n`;
s += ` <button onclick="changeSize('${divElements[i].id}', 'width', '-200')">-200 width</button>\n`;
s += ` <span class="width_value">${divElements[i].offsetWidth}px</span>\n`;
s += ` <button onclick="changeSize('${divElements[i].id}', 'width', '+200')">+200 width</button>\n`;
s += ` <span>|</span>\n`;
s += ` <button onclick="changeSize('${divElements[i].id}', 'height', '-10')">-10 height</button>\n`;
s += ` <span class="height_value">${divElements[i].offsetHeight}px</span>\n`;
s += ` <button onclick="changeSize('${divElements[i].id}', 'height', '+10')">+10 height</button>\n`;
s += `</div>\n`;
document.getElementById('control_panels').innerHTML += s;
sizeIniciate(divElements[i].id);
}
#4 ์์ฝ
inline์ด ๋ถ์ผ๋ฉด ์ค๋ฐ๊ฟ์ด ์๋ค. block์ ํฌ๊ธฐ ์กฐ์ ์ด ๊ฐ๋ฅํ ๋ฉ์ด๋ฆฌ๋ค.
#5 ์ด ๊ฐ๋ ์ด ์ฌ์ฉ๋ ๊ธ
-