⭐디스플레이 display 속성
html 요소가 화면에 어떻게 표시될지를 결정한다.
block: 요소가 한 줄을 모두 차지하고 새로운 줄에서 시작한다.
div, h1, p
inline: 요소가 한 줄 안에서 다른 요소와 나란히 배치된다.
span, a
inline-block:
한 줄에 나란히 배치되며 width, height, margin, padding을 설정할 수 있다.
⭐ visibility 속성
visibility 속성은 요소의 가시성을 제어한다.
visible: 요소를 보이게 한다.
hidden: 요소를 숨기지만, 공간은 차지한다.
display: none과 비슷해 보이지만 차이점이 있다.
display: none: 요소를 숨기고 공간도 제거한다.
visibility: hidden: 요소를 숨기지만 공간은 유지한다.
예제)
<body>
<h3>1.Inline 요소</h3>
<div class="box inline">box1</div>
<div class="box inline">box2</div>
<div class="box inline">box3</div>
<h3>2.Block 요소</h3>
<div class="box block">box1</div>
<div class="box block">box2</div>
<div class="box block">box3</div>
<h3>1.Inline-Block 요소</h3>
<div class="box inline-block">box1</div>
<div class="box inline-block">box2</div>
<div class="box inline-block">box3</div>
<h3>span 태그 사용</h3>
<span style="color: violet">안녕</span><span>반가워</span> <span
>좋은아침</span
>
</body>
인라인
}
.inline {
display: inline;
/* inline 값은 width, height 크기를 무시한다 */
width: 100px;
height: 50px;
/* margin 좌우만 적용된다 */
margin: 20px;
/* 좌우적용 가능하나 상하는 제한적(레이아웃에 영향) */
padding: 0 50px;
}
블록
.block {
display: block;
width: 100px;
height: 50px;
margin: 10px;
padding: 10px;
}
인라인블록
.inline-block {
display: inline-block;
width: 100px;
height: 50px;
margin: 10px;
padding: 10px;
}
결과
예제)
숨바꼭질
<body>
<h2>숨바꼭질</h2>
<button onclick="toggleVisibility()">고양이 숨기기/보이기 visibility</button>
<button onclick="toggleDisplay()">강아지 숨기기/보이기 display</button>
<div class="card" id="dog">🐶강아지</div>
<div class="card" id="cat">🐱고양이</div>
<script>
//자바 스크립트 문법을 작성할 수 있다
function toggleVisibility(){
var cat = document.getElementById('cat')
cat.classList.toggle('hidden');
}
function toggleDisplay(){
var dog = document.getElementById('dog')
dog.classList.toggle('none')
}
</script>
</body>
스타일 설정
.card{
border: 2px solid #333;
padding: 10px;
margin: 5px;
background-color: purple;
display: inline-block;
width: 100px;
height: 50px;
text-align: center ;
}
visibility, display 속성 설정
.hidden{
visibility: hidden;
}
.none{
display: none;
}
결과
'HTML CSS' 카테고리의 다른 글
| html/css) 포지션, 트랜지션 (1) | 2025.06.04 |
|---|---|
| html/css) 폰트 font 관련 속성 (0) | 2025.06.03 |
| html/css) background 배경 관련 주요 속성 (0) | 2025.06.03 |
| html/css) 박스모델이란 (0) | 2025.06.03 |
| html/css) css선택자 - 속성선택자 (0) | 2025.05.29 |