CSS3 가시 속성

미어캣의 개발일지·2022년 11월 22일

CSS

목록 보기

4/13

📖CSS 가시 속성

태그가 화면에 보이는 방식을 지정하는 속성

📃display 속성

요소를 어떻게 보여줄지 결정

키워드 이름	설명
none	태그를 화면에서 보이지 않게 만듬
block	태그를 block 형식으로 지정
inline	태그를 inline 형식으로 지정
inline-block	태그를 inline-block으로 지정

- none 속성

요소를 렌더링하지 않도록 설정
visibility 속성을 hidden으로 설정한것과 달리, 영역도 차지 하지 않음

<style>
	#box {
  		display: none;
	}
</style>

- block 속성

기본적으로 가로 영역을 모두 채움
block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보임
div 태그, p 태그, h 태그, li 태그 등이 이에 해당됨

<style>
	#box {
  		display: block;
	}
</style>

- inline 속성

block 과 달리 줄 바꿈이 되지 않고 width 와 height를 지정 할 수 없음
inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시
span 태그, b 태그, i 태그, a 태그 등이 이에 해당

<style>
	#box {
  		display: inline;
	}
</style>

- inline-block 속성

block과 inline의 중간 형태, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있음.

<style>
	#box {
  		display: inline-block;
	}
</style>

📃visibility 속성

태그의 가시성을 결정

키워드 이름	설명
visible	태그를 보이게 만듬
hidden	태그를 보이지 않게 만듬
collapse	table 태그를 보이지 않게 만듬
inherit	부모 요소의 값을 상속

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .box{
		width: 100px;
		height: 100px;
		background-color: #09C;
        }
        #box1{ visibility: hidden }
        #box2{ visibility: visible }
        #box3{ display: none }
    </style>
</head>
<body>
    <p>Dummy</p>
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <p>Dummy</p>
</body>
</html>

출력

display 속성을 사용하면 태그가 화면에서 제거 되지만 visibility 속성을 사용하면 화면에서 보이지 않을 뿐 자리는 남는다.

📃opacity 속성

태그의 투명도를 조절하는 스타일 속성

0.0 부터 1.0 사이의 숫자를 입력
0.0은 투명한 상태, 1.0은 불투명한 상태

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        #box {
            background-color: black;
            color: white;
            opacity: 0.2;
        }
    </style>
</head>
<body>
    <p>Dummy</p>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <p>Dummy</p>
</body>
</html>