가시 속성은 태그가 화면에 보이는 방식을 지정하는 속성입니다. [1] (167)
1. display 속성
<!DOCYTPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<span>Dummy 1</span>
<div id="box">
<span>Dummy 2</span>
</div>
<span>Dummy 3</span>
</body>
</html>
1) display none
<!DOCYTPE html>
<html>
<head>
<style>
#box {
display: none
}
</style>
</head>
<body>
<span>Dummy 1</span>
<div id="box">
<span>Dummy 2</span>
</div>
<span>Dummy 3</span>
</body>
</html>
2) display block
<!DOCYTPE html>
<html>
<head>
<style>
#box {
display: block
}
</style>
</head>
<body>
<span>Dummy 1</span>
<div id="box">
<span>Dummy 2</span>
</div>
<span>Dummy 3</span>
</body>
</html>
3) display inline
<!DOCYTPE html>
<html>
<head>
<style>
#box {
display: inline
}
</style>
</head>
<body>
<span>Dummy 1</span>
<div id="box">
<span>Dummy 2</span>
</div>
<span>Dummy 3</span>
</body>
</html>
4) display inline-block
inline 키워드를 적용한 코드는 width 속성과 height 속성이 적용되지 않고 margin 속성이 div 태그의 좌우로만 지정됩니다.
inline-block 키워드를 적용하면 width 속성과 height 속성을 적용할 수 있고 margin 속성이 상하좌우로 적용됩니다.
<!DOCYTPE html>
<html>
<head>
<style>
#box {
display: inline-block;
background-color: red;
width: 300px;
height: 50px;
margin: 10px;
}
</style>
</head>
<body>
<span>Dummy 1</span>
<div id="box">
<span>Dummy 2</span>
</div>
<span>Dummy 3</span>
</body>
</html>
2. visibility 속성
visibility 속성은 대상을 보이거나 보이지 않게 지정하는 스타일 속성입니다.
| 키워드 이름 | 설명 |
| visible | 태그를 보이게 만듭니다 |
| hidden | 태그를 보이지 않게 만듭니다 |
| collapse | table 태그를 보이지 않게 만듭니다 |
1) visibility hidden
display none 속성을 사용하면 태그가 화면에서 제거되지만 visibility hidden 속성을 사용하면 화면에서 보이지 않을 뿐입니다.
<!DOCYTPE html>
<html>
<head>
<style>
#box {
visibility: hidden
}
</style>
</head>
<body>
<span>Dummy 1</span>
<div id="box">
<span>Dummy 2</span>
</div>
<span>Dummy 3</span>
</body>
</html>
3. opacity 속성
opacity 속성은 태그의 투명도를 조절하는 스타일 속성입니다.
<!DOCYTPE html>
<html>
<head>
<style>
#box {
background-color: red;
color: white;
opacity: 0.2;
}
</style>
</head>
<body>
<span>Dummy 1</span>
<div id="box">
<span>Dummy 2</span>
</div>
<span>Dummy 3</span>
</body>
</html>
Reference
[1] 모던 웹을 위한 HTML5+CSS3 바이블, 윤인성 (2019), 한빛미디어
'Study > HTML & CSS' 카테고리의 다른 글
| [CSS] 스타일 속성 - 위치 속성 (0) | 2022.11.01 |
|---|---|
| [CSS] 스타일 속성 - 박스 속성 (0) | 2022.10.31 |
| [CSS] 스타일 속성 - 단위 (0) | 2022.10.26 |
| [CSS] 선택자 (Selector) (0) | 2022.10.24 |
| [HTML] 입력 양식 태그 (0) | 2022.10.19 |
