반응형
CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS 테스트2</title>
<style>
html,body{margin: 0px; padding: 0px;}
h2{margin: 0px;}
html{font-size: 18px;}
li{float: left; list-style: none; padding: 20px; }
.bg{background-color: blue;}
li:nth-child(2n){background-color: blue;}
li:nth-child(2n+1){background-color: pink;}
li:first-child{
color:#8F0404;
color: rgb(143,4,4);
color: rgba(143,4,4,.5); opacity:0.5; }
li:last-child{color:white;}
.big{font-size: 22px;
width:200px; height: 175px;
border-top:3px solid red;
border-bottom: 3px solid blue;
border-left:3px solid red;
border-right: 3px solid blue;
/*border-width: 3px;
border-style: solid;
border-color:red;*/
}
.big > h2{font-size: 2em;}
.big div h2{font-size: 2rem;}
.box{width: 200px; height: 200px;
border: 2px solid red;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
padding: 50px 30px 50px 30px;
margin: 50px;
}
</style>
</head>
<body>
<div class="box">
영역테스트
</div>
<div class="big">
<h2>크기단위 테스트</h2>
<div>
<h2>크기체크</h2>
</div>
</div>
<h2>구조 선택자</h2>
<ul>
<li>1</li>
<li class="">2</li>
<li>3</li>
<li class="">4</li>
<li>5</li>
<li class="">6</li>
<li>7</li>
</ul>
</body>
</html>반응형
'웹프로그래밍 기초 > A반소스자료' 카테고리의 다른 글
| 위치속성과 변형/애니메이션 (0) | 2023.05.11 |
|---|---|
| 디스플레이속성 과 폰트속성 (1) | 2023.04.27 |
| 레이아웃 & CSS (3) | 2023.03.30 |
| table & form Tag (0) | 2023.03.23 |
| 이미지와 멀티미디어 Tag (0) | 2023.03.23 |
댓글