1. display 속성
- display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 속성이다. 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다.
1) block
-
'줄 바꿈이 되는 박스'로, display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.
-
<div>,<h1>,<p>,<ul>,<ol>,<form>요소는 대표적인 블록(block) 요소다.
div {
width: 100px;
height: 50px;
}
.first {
background-color: aqua;
}
.second {
background-color: green;
}
.third {
background-color: yellow;
}
2) inline
-
'줄 바꿈 없이 옆으로 붙는 박스'로, display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않는다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.
-
block 박스와는 다르게 inline 박스는
width,height속성이 적용되지 않는다. -
<span>,<a>,<img>요소는 대표적인 인라인(inline) 요소다.
div {
width: 100px;
height: 50px;
}
.first {
background-color: aqua;
}
.second {
background-color: green;
}
.third {
background-color: yellow;
}
.inline {
display: inline;
}
3) inline-block
-
'줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 박스'로, display 속성값이 인라인-블록(inline-block)으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작한다. 하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작한다.
-
인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있다. 또한, 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있게 된다.
div {
width: 100px;
height: 50px;
}
.first {
background-color: aqua;
}
.second {
background-color: green;
}
.third {
background-color: yellow;
}
.inline-block {
display: inline-block;
}
4. none
-
HTML 요소를 숨기기 위해서는 display 속성값을
none으로 설정하면 된다. 이렇게 하면 해당 요소는 웹 페이지에 더 이상 나타나지 않으며, 웹 페이지의 레이아웃에도 영향을 미치지 않는다. -
또한, visibility 속성값을 hidden으로 설정해도 HTML 요소를 숨길 수 있다.
-
display: none 미설정 시
-
display: none 설정 시
2. opacity 속성
-
opacity 속성을 이용하면 HTML 요소의 투명도를 조절할 수 있다.
-
opacity 속성값은 0.0부터 1.0까지 설정할 수 있으며, 속성값이 0에 가까울수록 투명한 상태가 된다.
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
