본문 바로가기

Python_WEB/HTML

HTML5 - 190608 Basic Study 20(CSS 동위(형제) 선택자)

반응형

1. 동위(형제) 선택자

선택자+선택자 h1+div A다음에B
선택자~선택자 h1~div A이후에B들

 

2. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 1일차</title>
<link href="css/ex04.css" rel="stylesheet">
</head>

<body>
<h1>네비게이션바 만들기</h1>
<h2>동위(형제 선택자)</h2>
<h3>메인메뉴1</h3>
<div>서브메뉴1</div>
<h3>메인메뉴2</h3>
<div>서브메뉴2</div>
<input type="text"><br>
보이기/숨기기<input type="checkbox">
<p id="box">
welcome to my world happy new year merry christmas
</p>
<h5>css 색상단위</h5>
<h5>css 색상단위</h5>
</body>
</html>

 

3. CSS Code

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
ul, li{
	list-style:none;
}
a{
	color:black;
	text-decoration:none;
}

h3{
	width:200px;
	border:1px solid black;
}
h3:hover{
	background:pink;
}
div{
	width:200px;
	height:100px;
	background:orange;
	display:none;	/* 숨기기 */
}
/* h3 태그에 마우스 올릴때 바로 나오는 친구 div를 선택 */
/* + 와 ~ 의 차이를 알자 */
h3:hover+div{
	display:block;
}
/* h3:hover~div{
	display:block;
} */
/* input 상자에 커서가 놓여진 상태 */
input:focus{
	background:snow;
}
p#box{
	width:150px;
	background:chocolate;
	/* 1) display:none; */
}
input[type=checkbox]+p#box{
	border:0;
	height:0;
	overflow:hidden;
	transition:1s;
	}
/* 체크박스에 체크 되면 보이기(토글박스) */
input[type=checkbox]:checked+p#box{
	/* 1) display:block; */
	height:100px;
	transition:1s;	/* 시간설정 */
	border:1px solid red;
	}
h5{
	color:red;
}
h5{
	color:#F00;
}
h5{
	color:#FF0000;
}
h5{
	color:rgb(255,255,0);
}
h5{
	color:rgba(255,0,0,0.5);
}
h5{
	border:5px solid transparent;
}
h5:hover{
	border:5px solid blue;
}

 

4. HTML / CSS 파일

ex04.html
0.00MB
ex04.css
0.00MB

 

5. HTML 미리보기

< CSS 1일차 >

반응형

태그