728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>형태</title>
<meta charset="UTF-8">
<style>
div:nth-child(1) {
width: 100px; /*가로크기*/
height: 50px; /*세로크기*/
background-color: red;
padding: 0 30px;
}
div:nth-child(2) {
width: 100px; /*가로크기*/
height: 50px; /*세로크기*/
background-color: dodgerblue;
margin: 15px 0 0 0;
}
div:nth-child(2):hover {
background-color: black;
}
div:nth-child(3) {
width: 100px; /*가로크기*/
height: 100px; /*세로크기*/
background-color: black;
border-radius: 50px;
}
/* margin : X; 상/우/하/좌 전부 x만큼 외부 여백*/
/* margin : a b; 상/하 는 a만큼, 좌/우는 b만큼 외부 여백*/
/* margin : a b c d; abcd 순서대로 상/우/하/좌 외부 여백*/
/* 혹은 margin-top, right, bottom, left 속성도 이용 가능*/
/* padding : X; 상/우/하/좌 전부 x만큼 내부 여백*/
/* padding : a b; 상/하 는 a만큼, 좌/우는 b만큼 내부 여백*/
/* padding : a b c d; abcd 순서대로 상/우/하/좌 내부 여백*/
/* 혹은 padding-top, right, bottom, left 속성도 이용 가능*/
</style>
</head>
<body>
<div>버튼임</div>
<div>버튼이다</div>
<div></div>
</body>
</html>
728x90
반응형