2nd DAY
BOX의 일반적인 성질에 대해서 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/box01.css">
</head>
<body>
<h1>박스의 기본 성질</h1>
<a href="../index.html">맨 앞으로</a>
<hr>
<div class="box00">화면 가운데 오는 박스</div>
<div class="box01">01</div>
<div class="box02">02</div>
<div class="box03">03</div>
</body>
</html><html>
body {
margin: 0;
}
h1 {
color: red;
}
.box00 {
width: 1200px;
margin: 0 auto;
background: #333;
color: #fff;
}
.box01 {
width: 50%;
background: #f00;
}
.box02 {
margin-left: 100px;
width: 100%;
background: #ff0;
}
.box03 {
margin-left: 100px;
background: #0f0;
}<css>
결과물 : http://127.0.0.1:5500/doc/box01.html
+ MEMO +
경로를 설정할 때
./ 나의 형제 레벨
../ 나의 부모 레벨
'수업내용' 카테고리의 다른 글
| [HTML, CSS with JS] position의 기초_2022.05.19.THU (0) | 2022.06.01 |
|---|---|
| [HTML, CSS with JS] position의 기초_2022.05.19.THU (0) | 2022.06.01 |
| [HTML, CSS] display: flex;를 이용한 박스배열_2022.05.18.WED (0) | 2022.06.01 |
| [HTML, CSS] BOX의 성질(3)_2022.05.17.TUE (0) | 2022.06.01 |
| [HTML, CSS] BOX의 성질(2)_2022.05.17.TUE (0) | 2022.06.01 |
