가시속성에 해당하는 속성들을 보면, 다음과 같다.
아래 표에서 보듯이, display는 요소가 인라인인지 블록인지를 정하는 것 외에도, none이라는 요소를 안보이게 하는 속성값도 있다.
이 외에도, 안보이게 하는 속성으로 visibility, opacity, overflow까지 설명을 참고해서 작성 해 본다.
| 속성명 | 속성값 | 설명 |
| display | inline| block | inline-block | none | table-cell | 안보이고, 공간 없어짐 |
| visibility | visible | hidden | 안보이고, 공간 남음 |
| opacity | 0~1까지의 수 | 0 : 안보이고, 공간 남음 | 0이상 : 보이고, 공간 남음 |
| overflow | hidden | auto | scroll | visible | 요소 안의 내용이 요소의 크기보다 많을 경우 넘쳐나는 부분을 처리하는 속성 |
1. 가시속성이란, 보이거나 안보이게 하는 속성을 말한다. 여기서 중요하게 비교 하며 볼 부분은,
보이고 vs 안보이고, 공간유지 vs 공간사라짐
에 대해 살펴 볼 필요가 있다.
2. display:none은 요소가 사라지게 되어, 공간도 없어진다.
3. visibility : hidden은 요소를 숨기고는 있으나, 공간은 남아 있다.
4. opacity:0~1미만의 수는 요소를 불투명하게 처리하는 속성으로, 공간은 그대로 남아 있다.
5. overflow 속성은 박스의 밖으로 넘쳐나는 부분에 대한 속성으로, 박스크기 밖으로 넘치는 텍스트나 이미지 등의 요소에 대해 처리하며, auto, scroll 을 값으로 적용하면 스크롤이 생길수 있다.
6. 또한, 가로배치를 위해 display: inline을 사용한다. 이 외에 다른 방법은 다음에 설명하도록 한다.
7. 추가적으로 세로의 가운데 정렬을 맞출 때 vertical-align 속성이 떠오를수 있으나, 이는 이미지, 폼요소, 테이블의 셀 등에 적용하는 속성으로, display속성을 table-cell로 변경하면 세로 가운데 정렬이 적용되는 것을 확인 할 수 있다.
8. overflow: scroll | auto는 박스에 스크롤이 생기게 하거나, 글자의 길이에 따라 스크롤이 생기게 되는 속성이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>가시속성</title>
<style>
div{
width:300px;
height:300px;
border:5px solid #333;
background:red;
float:left;
margin:20px;
}
#box1{
}
#box2{
display:none;
}
#box3{
visibility:hidden;
}
#box4{
opacity : 0;
}
#box5{
opacity : 0.3;
}
#box6{
opacity : 0.7;
}
h3::before{
/*태그를 작성하지 않고, 속성만으로 줄바꿈을 만드는 속성 3총사*/
content:'';
display:block;
clear:both;
}
#gnb{list-style:none;}
#gnb li{display:inline;} /*가로배치*/
#gnb a{/*크기, 모양*/
/*
a태그는 inline요소이므로, a요소 안의 글자의 길이만큼만 크기를 가져감.
a태그를 inline-block으로 전환해주면, width, height 의 크기가 적용된다.
*/
display:inline-block;
width:120px;
height:60px;
line-height:60px;
font-size:1.0em;
background: #fe0;
text-align:center;
color:#fff;
text-decoration:none;
font-weight:bold;
}
#gnb a:hover{
/*배경색, 글자색 변경*/
background: #dd0;
color:#aaa;
}
p{
padding:20px;
margin:20px;
background: #4e517c;
color:#fff;
}
.valign1{
height:100px;
line-height:100px;
}
.valign2{
height:100px;
vertical-align:middle;/*p요소는 이미지, 폼, 테이블의 셀이 아님*/
/*vertical-align : 이미지, 폼요소의 위치를 가운데, 위, 아래로 배치할 때 사용하는 속성
테이블의 셀(td, th)에 사용하는 속성
*/
}
.valign3{
width:1000px;
height:100px;
vertical-align:middle;
display: table-cell;/*요소의 성격을 테이블의 셀처럼 변경하는 속성*/
}
.overf{
width:450px;
height:300px;
padding:20px;
font-size:1.75em;
color:#aaa;
overflow-y:scroll;
}
</style>
</head>
<body>
<h1>가시속성 : 보이거나 안보이거나에 대한 속성</h1>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
<div id="box5">box5</div>
<div id="box6">box6</div>
<h3>가로메뉴 => display:inline-block</h3>
<ul id="gnb">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
</ul>
<p class="valign1">세로 정렬 확인입니다.</p>
<p class="valign2">세로 정렬 확인입니다.</p>
<p class="valign3">세로 정렬 확인입니다.</p>
<p class="overf">What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| background속성 2 - attachment (0) | 2021.01.25 |
|---|---|
| background 속성 1 - 기본 (0) | 2021.01.25 |
| display 속성 (0) | 2021.01.22 |
| 문단과 관련된 속성 (0) | 2021.01.22 |
| CSS 기초개념 : selector(선택자), 문자관련속성 (0) | 2021.01.21 |
