CSS - url() / display 속성 / visibility 속성 / opacity 속성
📌 url()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#wrap{
width:500px; height:500px;
margin:0 auto; border: 1px solid black;
}
#content{
width:80%; height:100%;
margin:0 auto;
background-image: url("https://picsum.photos/200/300");
color:white; font-size: 2em; font-weight: bold; text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
해당 이미지는 저작권 보호를 받습니다.
</div>
</div>
</body>
</html>
📌 display 속성
✅ inline / block / none
<!-- block : div, p ,li
inline : span / 높이를 가지지 않음
inline-block : 둘의 속성을 둘다 가짐 / 높이의 속성도 가지면서 옆으로 정렬되는 것 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body div:nth-child(1), body div:nth-child(2), body div:nth-child(3), body div:nth-child(4){
width:100px; height:100px;
background-color: goldenrod; color:white; font-weight: bold; text-align: center;
}
body div:nth-child(5), body div:nth-child(7){
width:100px; height:100px;
background-color: grey; color:white; font-weight: bold;
text-align:center;
display:inline;
margin:10px 10px 10px 10px;
}
body div:nth-child(6){
width:100px; height:100px;
background-color: grey; color:white; font-weight: bold;
text-align:center;
display:none;
}
body div:nth-child(8){
width:100px; height:100px;
background-color: tomato; color:white; font-weight: bold;
text-align: center;
display:inline-block;
}
</style>
</head>
<body>
<div>
content1
</div>
<div>
content2
</div>
<div>
content3
</div>
<div>
content4
</div>
<div>
content5
</div>
<div>
content6
</div>
<div>
content7
</div>
<div>
content8
</div>
</body>
</html>
📌 visibility 속성
✅ display:none / visibility:hidden
<!-- visibility:hidden / display:none 차이점
- visibility 는 빈공간을 놔둠 / display는 빈공간조차 없음 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#display_none{
margin-bottom: 10px;
}
#display_none div:nth-child(1), #display_none div:nth-child(3){
width:100px; height:100px;
background-color:tomato;
color:white; text-align: center;
font-weight: bold;
}
#display_none div:nth-child(2){
width:100px; height:100px;
background-color:tomato;
color:white; text-align: center;
font-weight: bold;
display:none;
}
#visibility_hidden div:nth-child(1), #visibility_hidden div:nth-child(3){
width:100px; height:100px;
background-color:darkblue;
color:white; text-align: center;
font-weight: bold;
}
#visibility_hidden div:nth-child(2){
width:100px; height:100px;
background-color:tomato;
color:white; text-align: center;
font-weight: bold;
visibility: hidden;
}
</style>
</head>
<body>
<div id="display_none">
<div>content1</div>
<div>content2</div>
<div>content3</div>
</div>
<div id="visibility_hidden">
<div>content1</div>
<div>content2</div>
<div>content3</div>
</div>
</body>
</html>
📌 opacity 속성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{ margin:0; padding:0; }
ul li{
display:inline-block;
width:200px; height:100px;
text-align: center;
background-color: grey;
}
ul li:nth-child(2){
background-color: grey;
opacity: 0.7;;
}
ul li:nth-child(3){
background-color: grey;
opacity: 0.4;;
}
</style>
</head>
<body>
<ul>
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>
</body>
</html>
Author And Source
이 문제에 관하여(CSS - url() / display 속성 / visibility 속성 / opacity 속성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rlaaltj1765/CSS-url-display-속성-visibility-속성-opacity-속성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)