1. Description
display: block와 display: inline-block간의 차이를 알아본다.
2. Example
[Click Me]버튼을 클릭할 때마다 display의 값이 block, inline-block으로 토글된다.
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] css/fieldset</title>
<style>
fieldset#_1q74-example-container {
border: solid 1px;
border-style: dotted;
padding: 10px;
}
div[name="_1q74-example-1"] {
background: green;
width: 100px;
height: 100px;
display: inline-block;
}
div[name="_1q74-example-2"] {
background: lightgreen;
width: 100px;
height: 100px;
display: inline-block;
}
</style>
</head>
<body>
<fieldset id="_1q74-example-container">
<legend>Div Boxes</legend>
<div name="_1q74-example-1">
inline-block
</div>
<div name="_1q74-example-2">
inline-block
</div>
</fieldset>
<br/>
<button id="btn-1q74-example">Click Me</button>
<script>
const btn = document.getElementById("btn-1q74-example");
btn.addEventListener("click", function() {
const examples = document.querySelectorAll("[name*=_1q74-example-]");
examples.forEach(example => {
const display = example.style.display;
const isBlock = display == "block";
let block = "";
if(isBlock) {
block = "inline-block";
} else {
block = "block";
}
example.style.display = block;
example.textContent = block;
});
});
</script>
</body>
</html>4. File
[css][div][display]example.html
0.00MB
'CSS > Cookbook' 카테고리의 다른 글
| 【CSS/Cookbook】<fieldset>, <legend> (Group으로 묶어서 표시하기) (0) | 2023.05.24 |
|---|---|
| 【CSS/table】Creating table with div(div로 테이블 만들기) #1 (0) | 2023.03.16 |
| 【CSS/Cookbook】Making HTML Random Color Code(HTML 랜덤 색상 만들기) (0) | 2023.03.16 |
| 【CSS/Common】<li>태그에서 bullet표시 없애기 (0) | 2023.03.01 |
| pseudo-class에 대하여 (0) | 2023.02.23 |