반응형
CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS 테스트</title>
<style>
body{margin: 0px; padding: 0px;}
li{float: left; padding: 20px; list-style: none;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
}
li:first-child{color:#0088FF;
border-left:1px solid red;
}
.bg{background-color: blue;}
li:nth-child(2n){background-color: rgba(227,115,49,.5);}
li:nth-child(2n+1){background-color: pink;}
li:last-child{color: #3C3C3C;}
.big{font-size: 20px; width: 200px; height: 150px;
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;}
.remText{font-size: 2rem;}
.box{width: 200px; height: 200px;
border: 2px solid red;
padding:20px;
margin:50px;
}
</style>
</head>
<body>
<div class="box">
영역테스트
</div>
<div class="big">
<h2>단위테스트</h2>
<div>
<h2 class="remText">rem 사이즈</h2>
</div>
</div>
<h2>CSS 구조선택자</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>반응형
'웹프로그래밍 기초 > B반소스자료' 카테고리의 다른 글
| 위치속성과 변형,애니메이션 (0) | 2023.05.11 |
|---|---|
| 디스플레이 & 폰트 스타일 (0) | 2023.04.27 |
| 레이아웃 & css (0) | 2023.03.30 |
| Table & Form Tag (1) | 2023.03.23 |
| 이미지와 멀티미디어 Tag (0) | 2023.03.23 |
댓글