반응형
1. 실선 테두리 넣어보기
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
html {
background-color: tomato;
}
body {
margin: 20;
padding: 20px;
background-color: thistle;
}
div {
padding: 20px;
border: 2px solid black;
}
#first {
background-color: whitesmoke;
width: 150px;
height: 150px;
}
#second {
background-color: teal;
width: 100px;
height: 100px;
}
#third {
background-color: wheat;
width: 50px;
height: 50px;
}
#fourth {
background-color: blanchedalmond;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth"></div>
</div>
</div>
</div>
</body>
</html>
결과
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
2. 모든 것에 실선 테두리 넣기
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
* {
border: 2px solid black;
}
html {
background-color: tomato;
}
body {
margin: 20;
padding: 20px;
background-color: thistle;
}
div {
padding: 20px;
border: 2px solid black;
}
#first {
background-color: whitesmoke;
width: 150px;
height: 150px;
}
#second {
background-color: teal;
width: 100px;
height: 100px;
}
#third {
background-color: wheat;
width: 50px;
height: 50px;
}
#fourth {
background-color: blanchedalmond;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth"></div>
</div>
</div>
</div>
</body>
</html>
결과
반응형
'2. CSS' 카테고리의 다른 글
| CSS inline의 margin(마진)은 좌우로만 가질 수 있다. (0) | 2024.11.18 |
|---|---|
| CSS Border 의 성질 (0) | 2024.11.18 |
| CSS 여러개의 div의 padding 적용하기 (0) | 2024.11.17 |
| CSS padding (패딩) (0) | 2024.11.17 |
| CSS margin 마진 사방에 적용하기 (0) | 2024.11.17 |