[그린컴퓨터] 클라이언트/CSS
CSS 핵심 문법 { CSS 단위, 박스모델, 여백 }
Ben의 프로그램
2023. 6. 27. 12:09
728x90
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 { background-color: orange;}
#div2 {
height: 100px;
background-color: skyblue;
}
span {
background-color: gray;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>요소의 크기 변경/확인하기</h1>
<!-- 블록요소는 부모의 크기만큼 가로가 늘어남, 그리고 콘텐츠 크기만큼
세로 길이가 늘어나게 된다. 또한 블록 요소는 가로길이 세로길이를 적용할 수 있다. -->
<div id="div1">Hello World</div>
<div id="div2">Hello World</div>
<!-- 인라인요소는 컨텐츠 크기만큼 가로 세로 길이를 갖는다. 가로 세로 길이를 적용할 수 없다. -->
<span>안녕하세요</span>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
div {
border: solid 1px;
}
span {
background-color: skyblue;
}
.box1 {
margin: 0;
}
.box2 {
margin: 10px;
}
.box3 {
margin: 10px 20px;
}
.box4 {
margin: 10px 20px 30px 40px;
}
.box5 {
margin-left: 100px;
}
</style>
</head>
<body>
<h1>외부여백 주기</h1>
<div class="box1">
<span>첫번째 박스</span>
</div>
<div class="box2">
<span>두번째 박스</span>
</div>
<div class="box3">
<span>세번째 박스</span>
</div>
<div class="box4">
<span>네번째 박스</span>
</div>
<div class="box5">
<span>다섯번째 박스</span>
</div>
</body>
</html>
- margin은 나와 다른 엘리먼트간의 거리를 의미하는데, 다른 엘리먼트란 body 부터 시작해서 나를 제외한 모든 element 들을 의미한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
div {
border: solid 1px;
margin: 10px;
}
span {
background-color: skyblue;
}
.box1 {
padding: 0;
}
.box2 {
padding: 10px;
}
.box3 {
padding: 10px 20px;
}
.box4 {
padding: 10px 20px 30px 40px;
}
.box5 {
padding-left: 100px;
}
</style>
</head>
<body>
<h1>내부여백 주기</h1>
<div class="box1">
<span>첫번째 박스</span>
</div>
<div class="box2">
<span>두번째 박스</span>
</div>
<div class="box3">
<span>세번째 박스</span>
</div>
<div class="box4">
<span>네번째 박스</span>
</div>
<div class="box5">
<span>다섯번째 박스</span>
</div>
</body></html>
