CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
교재 171페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>visibility</title>
<style>
.top {
height: 50px;
background-color: red;
}
.none {
display: none; /*자리차지가 없다*/
height: 50px;
background-color: green;
}
.visi {
visibility: hidden; /*자리를 차지함*/
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="visi"></div>
<div class="none"></div>
</body>
</html>오퍼시티 opacity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>opacity</title>
<style>
body {
background-image: url(img/Penguins.jpg);
}
.opa {
background-color: teal;
height: 300px;
opacity: 0.5; /*0-1*/
}
</style>
</head>
<body>
<div class="opa"></div>
</body>
</html>박스속성 중요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box 속성</title>
<style>
.outer {
height: 50px;
background-color: green;
}
.par {
background-color: red;
padding-left: 0;
padding-right: 0;
padding-top: 1px;
padding-bottom: 1px;
}
.chi {
width: 50px;
height: 50px;
background-color: blue;
margin: 50px; /* 요소의 밖 여백 */
/*
마진 상쇄(마진 겹침)
1. 부모와 자식의 마진중 큰 값을 가짐
2. 형제중 형과 아우의 마진 중 큰 값을 가짐
*/
padding: 50px;
border: 50px solid black;
}
.chi>img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="par">
<div class="chi"><img src="img/Penguins.jpg"></div>
</div>
<div class="outer"></div>
</body>마진상쇄?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box2</title>
<style>
.bro1 {
height: 50px;
background-color: red;
margin-bottom: 30px;
}
.bro2 {
height: 50px;
background-color: blue;
margin-top: 50px; /*마진 상쇄로 위쪽 요소의 마진 30px을 취소시킴*/
margin: 80px 100px 50px 30px;
margin: 100px 10px 500px;
margin: 50px 100px;
/*
margin: margin-top margin-right margin-bottom margin-left;
margin: margin-top margin-right/left margin-bottom;
margin: margin-top/bottom margin-right/left
*/
}
</style>
</head>
<body>
<div class="bro1"></div>
<div class="bro2"></div>
</body>
</html>