실습(안쪽 여백 - padding)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>안쪽 여백 - padding</title>
<style>
div {
border: 2px solid orange;
padding: 15px;
}
p {
background: coral;
/* padding 속성 값은 auto를 지원하지 않는다. */
padding: 50px 0 50px 20px;
}
</style>
</head>
<body>
<div id="wrap">
<p>저는 첫 번째 태그입니다.</p>
<div id="container1">
<p>저는 두 번째 태그입니다.</p>
<div id="container2">
<p>저는 세 번째 태그입니다.</p>
<div id="container3">
<p>저는 네 번째 태그입니다.</p>
</div>
</div>
</div>
</div>
</body>
</html>
실습(display - flex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display - flex</title>
<style>
div.wrap {
display: flex;
justify-content: center; /* 텍스트 가운데 정렬 */
}
div#container {
border: 1.5px solid black;
}
</style>
</head>
<body>
<div id="container">
<div class="wrap">
<div>1행 →</div>
<div>1열</div>
<div>2열</div>
<div>3열</div>
<div>4열</div>
</div>
<div class="wrap">
<div>2행 →</div>
<div>1열</div>
<div>2열</div>
<div>3열</div>
<div>4열</div>
</div>
<div class="wrap">
<div>3행 →</div>
<div>1열</div>
<div>2열</div>
<div>3열</div>
<div>4열</div>
</div>
</div>
</body>
</html>
실습(display - table)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display - table</title>
<style>
div#wrap {
display: table;
width: 70%;
margin: 0 auto;
}
.row {
display: table-row;
}
.col {
display: table-cell;
}
</style>
</head>
<body>
<div id="wrap">
<div class="row"> <!-- ← 행 -->
<div class="col">1열</div>
<div class="col">2열</div>
<div class="col">3열</div>
<div class="col">4열</div>
</div>
<div class="row"> <!-- ← 행 -->
<div class="col">1열</div>
<div class="col">2열</div>
<div class="col">3열</div>
<div class="col">4열</div>
</div>
</div>
</body>
</html>
'웹 개발 > CSS' 카테고리의 다른 글
| [Web_CSS] 06 (0) | 2022.04.24 |
|---|---|
| [Web_CSS] 05 (0) | 2022.04.23 |
| [Web_CSS] 03 (0) | 2022.04.21 |
| [Web_CSS] 02 (0) | 2022.04.20 |
| [Web_CSS] 01 (0) | 2022.04.19 |
