CSS3 요소 표시, 정렬, 배치 및 쌓임 순서 제어 속성

⏰ 2024.11.22 (D+32)

1. CSS의 display & visibility 속성 및 HTML5의 hidden 속성

1) visibility 속성

• visibility: hidden;을 적용하면 요소가 보이지는 않지만 공간은 차지
• 예: center 박스가 보이지 않지만, left와 right 사이에 공간이 남아있다.

<fieldset class="visible">
  <legend>visibility:hidden일때 영역은 그대로 존재</legend>
  <div style="background-color:red;">left</div>
  <div style="background-color:green;visibility: hidden;">center</div>
  <div style="background-color:blue;">right</div>
</fieldset>

2) display 속성

• display: none;을 적용하면 요소가 화면에서 완전히 사라지고, 공간도 차지하지 않는다.
• 예: center 박스가 완전히 사라지고, left와 right가 붙어 있다

<fieldset class="visible">
  <legend>display:none일때 영역도 사라짐</legend>
  <div style="background-color:red;">left</div>
  <div style="background-color:green;display:none">center</div>
  <div style="background-color:blue;">right</div>
</fieldset>

3) HTML5의 hidden 속성

• HTML5의 hidden 속성은 CSS의 display: none;과 동일한 효과
• 예: center 박스가 화면에서 사라지고, 공간도 차지하지 않는다.

<fieldset class="visible">
  <legend>태그의 hidden 속성으로 CSS의 diplay:none효과</legend>
  <div style="background-color:red;">left</div>
  <div style="background-color:green;" hidden>center</div>
  <div style="background-color:blue;">right</div>
</fieldset>

4) block → inline 변경

• display: inline;을 적용하면 블록 요소(div)가 인라인 요소로 변경
• 인라인 요소로 변하면서 width, height 속성이 무시
• 결과적으로 가로로 나란히 배치

<fieldset class="inline">
  <legend>가로배치로 변경</legend>
  <div style="background-color:red;">left</div>
  <div style="background-color:green;">center</div>
  <div style="background-color:blue;">right</div>
</fieldset>

5) block → inline-block 변경

• display: inline-block;을 적용하면 블록 요소가 인라인 요소처럼 가로로 나란히 배치
• 블록 요소의 특성(width, height)은 유지

<fieldset class="inline-block">
  <legend>가로배치로 변경</legend>
  <div style="background-color:red;">left</div>
  <div style="background-color:green;">center</div>
  <div style="background-color:blue;">right</div>
</fieldset>

6) inline → block 변경

• display: block;을 적용하면 인라인 요소(span)가 블록 요소로 변경
• 결과적으로 세로로 쌓이는 레이아웃

<fieldset class="block">
  <legend>세로배치로 변경</legend>
  <span style="background-color:red; width:50px; height:50px;">left</span>
  <span style="background-color:green; width:50px; height:50px;">center</span>
  <span style="background-color:blue; width:50px; height:50px;">right</span>
</fieldset>

2. CSS의 float & clear 속성

1) float 속성 (div의 width 및 height 미지정)

• div1은 float: left;로 설정되어 왼쪽에 배치
• div2는 float: right;로 설정되어 오른쪽에 배치
• div3은 clear: both;로 설정되어 div1과 div2 아래로 배치
• width와 height를 지정하지 않으면, 요소는 내용에 따라 자동으로 크기가 결정
• 남은 공간은 비어 있게 된다.

<fieldset>
    <legend>float속성(div의 width/height미 지정)</legend>
    <div style="background-color: red; float:left;">div1</div>
    <div style="background-color: green; float:right;">div2</div>
    <div style="background-color: blue; clear:both;">div3</div>
</fieldset>

2) float 속성 (div의 width만 지정)

• div1과 div2는 width: 100px;로 고정된 폭을 가지며, 각각 왼쪽과 오른쪽에 배치
• div3은 float 속성이 없으므로 남은 공간에 배치되지 않고, 새로운 줄에 표시
• 모든 div가 지정된 width에 따라 공간을 차지

<fieldset>
    <legend>float속성(div의 width만 지정)</legend>
    <div style="background-color: red;width:100px; float:left;">div1</div>
    <div style="background-color: green;width:100px;float:right;">div2</div>
    <div style="background-color: blue;width:100px;">div3</div>
</fieldset>

3) float 속성 (div의 width 및 height 지정)

• div1과 div2는 각각 왼쪽과 오른쪽에 배치되며, 고정된 width와 height 가진다.
• div3은 clear: both;로 설정되어, float 속성의 영향을 받는 요소(div1, div2)의 아래로 배치
• 모든 요소의 크기가 고정되어 있어, 배치가 명확하게 이루어진다.

<fieldset>
    <legend>float속성(div의 width/height 지정)</legend>
    <div style="background-color: red;width:50px;height:50px;float:left;">div1</div>
    <div style="background-color: green;width:50px;height:50px;float:right;">div2</div>
    <div style="background-color: blue;width:50px;height:50px;clear:both;">div3</div>
</fieldset>

3. CSS의 position, z-index 속성

1) position 속성과 좌표 설정

부모가 position을 가지는 경우와 가지지 않는 경우의 차이

• position: static (기본값):
  - 좌표(left, top)의 영향을 받지 않는다.
• position: relative:
  - 요소의 원래 위치를 기준으로 좌표가 적용
• position: absolute:
  - 가장 가까운 position이 설정된 부모를 기준으로 좌표가 적용
  - 부모가 position을 가지지 않는 경우, 브라우저 창의 왼쪽 상단(전체 문서의 기준)이 기준
  

2) Z-Index를 사용한 요소 겹침

• z-index는 요소들의 쌓임 순서를 결정
• 값이 클수록 더 위에 표시
• 빨간 박스(z-index: 15) > 파란 박스(z-index: 12) > 초록 박스(z-index: 10) 순으로 쌓인다

<fieldset>
  <legend>Z-INDEX속성</legend>
  <div style="background-color:yellow;width:300px;height:300px;position:relative;">
    <div style="background-color:red;width:100px;height:100px;position:absolute;left:20px;top:20px;z-index:15;">div1</div>
    <div style="background-color:green;width:100px;height:100px;position:absolute;left:60px;top:60px;z-index:10;">div2</div>
    <div style="background-color:blue;width:100px;height:100px;position:absolute;left:100px;top:100px;z-index:12;">div3</div>
  </div>
</fieldset>

3) 버튼 클릭 시 정렬된 위치에 요소 띄우기

동작 ⚙️

(1) 초기 상태:

• #child 요소는 display: none;으로 설정되어 화면에 보이지 않는다.

(2) 버튼 클릭 시:

• 부모 요소를 Flexbox로 변환 (display: flex)
• Flexbox의 속성을 사용해 자식 요소를 가로 및 세로 중앙으로 정렬
• #child의 display 속성을 block으로 변경하여 보이게 한다.

(3) 학습 포인트:

• Flexbox는 수평(justify-content)과 수직(align-items) 정렬을 동시에 쉽게 설정 가능
• JavaScript를 사용해 동적으로 스타일을 변경 가능

<h2>버튼 클릭시 div를 특정 위치(정 가운데)에 띄우기</h2>
<div style="min-width:25em;margin-bottom:10px;background-color:rgb(109, 146, 15);width:100%;height:300px;">
  <div id="child" style="text-align:center;line-height:100px;background-color:rgb(231, 225, 116);width:50%;height:100px;display:none;position:absolute;">
    나이를 입력 <input type="text"/>
  </div>
</div>
<hr/>
<button>입력창 띄우기</button>
<script>
  var child = document.querySelector('#child');
  var parent = child.parentElement;
  var button = parent.nextElementSibling.nextElementSibling;
  
  button.onclick = function() {
      parent.style.display = 'flex'; // 부모를 Flexbox로 설정
      parent.style.justifyContent = 'center'; // 가로 중앙 정렬
      parent.style.alignItems = 'center'; // 세로 중앙 정렬
      child.style.minWidth = '288px'; // 자식 요소의 최소 너비 설정
      child.style.display = 'block'; // 자식 요소를 보이게 설정
  };
</script>