<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top{
background:blue;
width: 400px;
height: 400px;
color:white;
}
#bottom{
background: red;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="top">
<div id="bottom">
bottom
</div>
top
</div>
</body>
</html>
네모안에 네모 넣기
(오류가 났을 때는 해당 부분 윗부분을 고쳐볼것. 오타 있으면 뒤로도 실행 안됨)
여백을 없애고 싶을때는
*{
margin:0%;
padding:0%;
}
------------------------------------------------
css로 ul- li 리스트 안에 점 없애기
<style>
ul,li{
list-style:none;
}
</style>
--------------------------------------------------
*- 모든 엘리먼트를 의미함. 예를 들어 *{} 안에 색을 회색으로 하겠다고 하면 모든 엘리먼트 색이 회색이 됨.
*{background:gray;}
--------------------------------------------------
css에서
<style>
ul.li{}
<!-- ul과 li 모두 적용시킨다는 뜻>
ul>li
<!-- ul안의 li에게 적용시킨다는뜻>
navi>ul>li
<!--navi안의 ul안의 li에게 적용시킨다는 뜻>
</style>
--------------------------------------------------
블록 엘리먼트를 css를 이용해 강제로 인라인으로 바꿀 수 있음
{display: inline;}
또는
{float:left;}
float:left: 엘리먼트는 그 다음에 오는 태그가 옆으로 붙을 준비가 되었다는 개념으로 이해.